【React源码解析】初识JSX

学习源码基本流程

1. 下载源码
2. 观察源码中package.json, 主要使用的依赖，构建相关的脚本
3. 根据核心api找寻对应的结构：
   • packages/react
   • packages/react-dom
   • packages/react-reconciler
   • packages/scheduler
4. 串联整个流程
   • React项目的初始化，ReactDOM.render、createRoot
   • 数据更新是怎么触发的：this.setState,.const[update]=useState(0,forceupdate
   • 基本api的使用方式 hooks,useState、useReducer、useld

jsx

我们 jsx 语法要想被编译为浏览器可以识别的代码，需要使用 babel / swc 进行转义，下面以 babel 为例说明。

转义 jsx -> js ，需要使用 @babel/plugin-transform-react-jsx 这个库。

新版本支持的自动导入：

旧版本的导入方式（createElement）：