手写 React 第 1 节 - 从零搭建一个 React 架子

阳光穿透心脏的1/2处 2022-12-18 13:58 158阅读 0赞

### 手写 React 第 1 节 - 从零搭建一个 React 架子 ###

*  前言
 *   *   *  1. 创建根目录
         *  2. 安装 webpack
         *  3. 安装 loaders 和 plugins
         *  4. 配置 webpack
         *  5. 创建项目

# 前言 #

作为一个有追求的前端开发，掌握一门源码框架势在必行。特别是对于想要换工作或者想要进大厂的开发者来说，源码的考察必不可少。

然而源码晦涩难懂，没有扎实的基础或者足够的毅力很难坚持下去。但是如果能自己手动实现一个简易的 React，再去理解晦涩的 React 框架将会事半功倍。

本栏目《手写一个简易的 React》通过手动实现一个简易的 React 来疏通 React 的实现机制，为大家在 “ 啃 React 源码” 之路上尽一份绵薄之力。

### 1. 创建根目录 ###

创建 MiniReact 文件夹，通过编辑器（webstorm 或者 vcode ）打开。  
在控制台执行以下命令初始化项目，安装完成之后会自动创建 package.json 文件。

> `npm init`

**注意**：在执行 `npm init` 初始化项目时会有一系列配置提示，直接 enter 进入下一步即可。

### 2. 安装 webpack ###

工程化项目必须安装 webpack 打包工具。  
在控制台执行以下命令安装 webpack，安装成功后会出现 node\_modules 文件夹和 package-lock.json。

> `npm i webpack@4.32.2 webpack-cli@2.0.9 webpack-dev-server@3.0.0`

其中 node\_modules 文件夹是 webpack 相关的包依赖，package-lock.json 文件是对包依赖的一些描述（名称、版本、依赖包等）。

**注意**：在安装 webpack、webpack-cli、webpack-dev-server 这三个包时一定要按照指定的版本安装，如果随意安装，这三个包之间可能会出现版本不兼容的情况。

### 3. 安装 loaders 和 plugins ###

webpack 本身只能打包 JS（ES5） 文件，所以如果涉及到 JS ES6 语法和 CSS 样式。就必须安装相关的 loader，以及一些必要的 plugin。

安装 babel 编译 ES6 语法。

> `npm i @babel/core@7.12.3 babel-loader@8.1.0 @babel/preset-react@7.12.1`

其中 @babel/core 是核心功能包，babel 从版本 7 开始用 @开头的 scope 包，老版本是babel-core，其他的包都是一样的规律。  
babel-preset-env 包中的 preset 是预设的一些 plugin 的集合。而 env 预设目前已经使用很久，并且现在已经完全替代了先前 babel 提出并建议的一些预设。

安装 loader 编译 CSS 文件。

> `npm i css-loader@5.0.0 style-loader@2.0.0`

安装 plugin 打包 HTML 模板

> `npm i html-webpack-plugin@4.5.0`

**注意**：在安装 @babel/core 和 @babel/preset-react 这两个包时一定要安装相同大版本的包，比如要么都安装 版本 7，要么都降级到版本 6，否则会报各种错，大概率就是版本不兼容导致。

安装完成之后 package.json 文件，内容如下：

{ 
      "name": "minireact",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "start": "webpack-dev-server --progress --colors --mode=development --open",
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "@babel/core": "^7.12.3",
        "@babel/preset-react": "^7.12.1",
        "babel-loader": "^8.1.0",
        "css-loader": "^5.0.0",
        "html-webpack-plugin": "^4.5.0",
        "style-loader": "^2.0.0",
        "webpack": "^4.32.2",
        "webpack-cli": "^2.0.9",
        "webpack-dev-server": "^3.0.0"
      }
    }

### 4. 配置 webpack ###

安装了相关的依赖之后需要配置 webpack。在根目录下新建 webpack.config.js 文件，内容如下。

const path = require('path');
    const htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = { 
        entry:'./src/index.js',
        output:{ 
            path:path.resolve(__dirname,'dist'),
            filename:"main.js"
        },
        mode: 'development',
        devServer: { 
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,//实时刷新
        },
        module:{ 
            rules:[
                { 
                    test: /\.js$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    include: path.resolve(__dirname, 'src'),
                    loader:'babel-loader',
                    options:{ 
                        presets: [
                            "@babel/react"
                        ]
                    }
                },
                { 
                    test: /\.css$/,
                    use:['style-loader','css-loader']  // 从右到左执行，所以注意顺序
                }
            ]
        },
        plugins:[new htmlWebpackPlugin({ 
            template:path.join(__dirname,'./public/index.html'),
            filename: 'index.html'
        })
        ],
    }

### 5. 创建项目 ###

在根目录下新建 public 文件夹，在该文件夹下新建 index.html，内容如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>MiniReact</title>
    </head>
    <body>
    <div id="root"></div>
    </body>
    </html>

在根目录下新建 src 文件夹，在 src 文件夹下：  
新建 react 文件夹，用于手写 react 框架。  
新建 index.js 作为入口文件。  
新建 index.css 用于编写样式。

index.js

import React from './react/';
    import ReactDOM from './react/react-dom';
    import './index.css';
    const App = (
        <div>
            <h1 className="border">Mini React</h1>
        </div>
    )
    ReactDOM.render(App,document.getElementById('root'));

index.css

.border { 
        margin: 10px;
        padding: 10px;
        border: solid 1px red;
        border-radius: 5px;
        text-align: center;
    }

最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center][]  
**下一小节将会记录如何手动实现以上的 React 界面，请持续关注。。。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/5e33c45165a649ecb889c9605bd43173.png