简版react

本节目标：理解“简版react”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 初始化项目： npx命令或yarn create命令

npx create-react-app my-app

cd my-app

npm start

使用create-react-app脚手架创建app后，删除了不必要的文件： 即src和public目录下(除index.html外)所有文件；

安装依赖：

yarn add cross-env

修改package.json文件： "scripts": { "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start", "build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build", "test": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts test", "eject": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts eject" },

DISABLE_NEW_JSX_TRANSFORM意思是用旧的转换方式去转换JSX;

为什么要有新的jsx转换； 因为如果我们在一个文件中定义了jsx语法，babel会使用用React.createElement来进行转换，但我们的文件中又没有引入 import React from 'react'；所以，为不了报错，我们就要这样引入；但这样引入之后，我们实际代码中又没有使用引入的React，所以eslint会报错或警告，说变量定义未使用，所以才有了新的jsx转换方法；它会自动引入react/jsx-runtime这个包来转换；

运行yarn start，打开localhost:3000，可看到效果；