如何用JS实现自己的react

前言：使用react及相关技术栈进行日常业务的开发已近两年了，从开始单纯的利用setState()进行数据处理，到了解redux的状态管理，使用hooks，和pureComponent等稍显优化的操作。
虽然已经学习过react的生命周期（v16.4之前和v16.4之后），了解setState是同步还是异步，但又感觉好像没有真正了解react。所以今天开始想尝试记录下自己学习的一些过程，尝试从最底层去了解这个最常使用的工具。在此过程中也会查阅大量的资料，及结合自己的一些理解，如有错误，烦请指出，非常感谢~

基础配置

webpack相关配置：应用打包及使用babel的配置
babel相关配置：用于将jsx转换成createElement方法可识别的代码
1、安装webpack、babel及相关依赖如果速度太慢，可以安装nrm后切换到淘宝源，registry=https://registry.npm.taobao.org
使用npm初始化项目后，安装清单如下，版本有较大出入可能导致问题产生

package.json

{
  "name": "my-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "7.13.8",
    "babel-loader": "8.2.2",
    "@babel/plugin-transform-react-jsx": "7.12.17",
    "html-webpack-plugin": "^4.3.1",
    "webpack": "5.4.0",
    "webpack-cli": "4.5.0",
    "webpack-dev-server": "3.11.2"
  }
}

项目目录结构：

webpack完整配置

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    resolve: {
        fallback: {
            path: require.resolve("path")
        }
    },
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            include: path.resolve(__dirname, 'src'),
            exclude: path.resolve(__dirname, 'node_modules')
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index-bundle.html'
        })
    ],
    devServer: {
        port: 8090,
    }
};

.babelrc完整配置

{
    "plugins": [
        "@babel/plugin-transform-react-jsx"
    ]
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>myReact</title>
    </head>
    <body>
        <div id="root" />
    </body>
</html>

index.js

const number = 1;

const el = (    //一段jsx语法
    <div id="test">
        <span>{number}</span>
    </div>
);

编译结果

使用npm run start启动编译

查看编译后的bundle.js

eval("const number = 1;\nconst el = /*#__PURE__*/React.createElement(\"div\", {\n  id: \"test\"\n}, /*#__PURE__*/React.createElement(\"span\", null, number));\n\n//# sourceURL=webpack://my-react/./src/index.js?");

可以看到jsx语法已经变成了这样：

React.createElement(
    div, {
        id: test
    },
    React.createElement(
        span,
        null,
        number,
    )
)

但是打开打包后的index-bundle.html文件，会发现提示：React is not define 所以在index.js里创建一个React对象和createElement方法就好啦！
下一篇我们将开始解析react的虚拟dom，及重要的render()，让页面能够呈现出我们想要的样子

如何实现自己的react（1）启动配置