前端框架目前基本还是 Vue.js 和 React.js 两大阵营为主流，尽管 Angular.js 版本升的飞快, 事实就是鲜有人问津, 想用 Angular.js 的人何不直接用 Vue.js 呢. 关于 Vue.js 和 React.js 的数据显示, Vue.js 延续了传统模板(如 JSP, Velocity, Freemarker, Thymeleaf)的用法, 通过自定义 Tag, 许多逻辑写到 HTML 里. 而 React.js 则另辟蹊径, 通过 JSX 语法将 HTML 直接写到 JavaScript 里, 页面显示时不夹杂逻辑.

以前算是用 Vue.js 做过一些小项目, 对 React.js 未有多少了解, 现在也算是初学. 刚开始不想从一个 npx create-react-app my-react-app 的脚手架开始, 而是想从最原始的 HTML 中引入 React.js 的方式开始学习, 这样可以更清晰地了解 React.js 的工作原理. 也是为使用 React.js 拥抱 Vibe Coding 做准备.

基本 React.js Virtual DOM 渲染

用 <script> 标签引入 react 和 react-dom 两个核心库的方式已经不推荐了, 官方的 CDN Links 已经变成 Legacy 了, 也找不到引用 react@19 的相关链接了. 但本着要明就里的原则还是希望以这种方式演练一下.

ws://localhost:8000/ws

var ws = new WebSocket("ws://test.exmple.com:8080/ws");

1. 根(CA) 证书: root.crt
2. 服务端私钥文件: server.key
3. 服务端公钥证书: server.crt

1. 截止 2021 年 1 月 8 日，有 50% 的网站正在使用 HTTP/2，参见 Usage statistics of HTTP/2 for websites
2. 另一篇介绍 HTTP/2 Adoption 说 2020 年就有 64% Web 请求是基于 HTTP/2 的

import axios from 'axios';
import Home from '../views/Home.vue';
export default {
  data() { .... }