本文基于官方 v18.1.0 文档。

Introducing JSX

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic:
how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files,
React separates concerns with loosely coupled units called “components” that contain both.

这是当初 React 最吸引我的地方，不执著于将 UI 和逻辑分开。MVC 大行其道几十年后，Android 跟 iOS 也都在尝试返濮了。
在我实际工作经验中，进行视图子类化定制的出发点往往就是为了将 UI 和其逻辑写在一起。这个需求越靠近业务层就越强烈。

ubuntu 上安装完 nginx 后发现默认首页不能访问，可以优先检查 ufw 防火墙：

1

sudo ufw status

结果显示 status: active，说明 vultr 上的防火墙是默认开启的。

执行命令将 http、https 端口加入到白名单：

1
2

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

可以了。

参考：

How to Set Up Nginx on a Ubuntu Server with Vultr: https://coderrocketfuel.com/article/how-to-set-up-nginx-on-a-ubuntu-server-with-vultr

白名单

https://vultr.com/

黑名单

1. https://flaunt7.com/

垃圾，会无故下线服务器，各种反馈渠道没有响应。

2. https://hostus.us/

不能购买 VPS，直接把我标记为了 fraud（诈骗），要求我提供身份证明信息。

3. https://www.linode.com/

同上，说我行为、模式像诈骗。

4. https://www.time4vps.com/

同上，需要提供驾驶证、身份证或者护照。

之前 通过直接运行 babel 相关命令，把 jsx 语法做了预处理。但输出远远达不到 create-react-app 的水平。 Google 了一圈发现，原来可以通过 webpack 把 jsx 预处理、js 压缩、js 打包几个步骤一次性执行。

初始化 Webpack Config

安装 webpack：

1

npm i webpack webpack-cli

• Video.js 版本：7.10.2
• 弹幕库：https://github.com/weizhenye/Danmaku，2.0.2 版本

因为实现方式比较不规范，会深入 Video.js 内部 dom 进行操作，不确定是否适用其它版本。

全屏弹幕

我使用 vjs 的姿势是这样的：

1
2
3

<div id="danmaku-container" ref={danmakuContainerRef} divdata-vjs-player>
    <video ref={videoRef} className="video-js vjs-big-play-centered" />
</div>

1. 多页面用不到 create-react-app，项目结构需要手动配置。
2. Jsx 不能带到生产环境去，会导致每次加载 js 文件时都要做语法转换，所以需要用 babel 预处理。

项目根目录下，创建 package.json：

1

npm init -y

把 html 文件放在 src 目录下，js 文件放在 src/js 目录下。html 中引入对应的 js：

1

<script src="/js/index.js"></script>

不要加 type=”text/babel”，路径其实对应的是预处理后的、被转换的 js 文件。

https://reactjs.org/docs/add-react-to-a-website.html

Html5 的 <video /> 只能在整个视频文件加载完成后才能播放，体验极其不好。如果仅是支持基于 Http(s) 的流媒体播放的话，可以直接利用 Http 协议的 Content-Range 头。

所以本文的核心思想是使 Sanic 后端能正确处理 Videojs 发送的 byte-range 请求，并回以带 Content-Range 的文件流响应即可。

简单横向比较了 Sanic、Flask、FastAPI 之后，决定以后还是优先学 Sanic 吧。

Sanic 在同类评测里名列前茅。异步架构有先天的性能优势，Flask 甚至才认识到这点，好像又显得不那么重视。最新发布的 2.x 版本里的异步支持形同鸡肋，不支持 ASGI，不支持后台任务，Websocket 也同样不能支持。