一步一个脚印搭建简易React

最新推荐文章于 2023-05-03 15:23:02 发布
最新推荐文章于 2023-05-03 15:23:02 发布
阅读量241 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41022872/article/details/109243231
版权

一步一个脚印搭建简易React

准备环境：

  1. node环境
  2. vscode编辑器

初始化项目

// 创建一个文件夹，当然你也可以手动创建
mkdir my-react
// 进入到项目目录
cd my-react
// 生成pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中
npm init

搭建项目环境

由于我们的目的是实现一个简易的React,为了能把更多的重心花在React上，我们需要借助一些工具来帮助我们处理一些React之外的问题。

  1. webpack： 我们需要使用webapck将我们的项目打包，最终生成一个js文件
  2. babel：能帮助我们将高级的ES语法向下转化成浏览器识别的低版本的ES语法
webpack
cnpm install --save-dev webapck webapck-cli

然后在我们项目的根目录新建webapck.config.js文件来告诉webapck如何打包我们的js文件

module.exports = {
  entry: './src/main.js',
};

同时创建src目录，并且新建main.js作为项目的入口文件

// main.js
const array = [1, 2, 3, 4, 5];
array.find((item) => item === 1);
babel

babel需要安装的包比较多

cnpm install --save-dev babel-loader @babel/core @babel/preset-env
  1. babel-loader： 使用babel-loader处理js文件，会将es5以上的语法进行转义
  2. @babel/core： 封装了babel-loader需要用到的api
  3. @babel/preset-env： babel 内部经历了「解析 - 转换 - 生成」三个步骤。而 @babel/core 这个库则负责「解析」，具体的「转换」和「生成」步骤则交给各种插件（plugin）和预设（preset）来完成

tips1： 使用@babel开头是为了声明作用域

tips2： @babel/preset-*实际上就是各种插件的打包组合，也就是说各种转译规则的统一设定，目的是告诉loader要以什么规则来转化成对应的js版本

好了，回到我们的项目本身，我们需要告诉webapck,用babel-loader去打包我们的js文件，以及babel-loader对应的配置。

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

第一次打包编译

在终端执行npx webpack,就可以在dist文件加下查看打包出来的文件了

tips: 使用npx可以保证我们执行的是当前项目

my-react
│ 
│
└───dist
│   │   main.js
└───src
│   │   main.js
└───package.json
|
└───webpack.config.js

引入babel插件支持jsx语法

现在我们尝试在main.js中声明一个不一样的变量，然后再执行npx webpack

const array = [1, 2, 3, 4, 5];

array.find((item) => item === 1);

const ele = <div id="id" class="mr5" >
  <span> zaoren </span>
</div>;
console.log(ele);

我们看到报错了，原因是我们不能解析jsx语法

因此，我们引入另一款babel插件来帮助我们解析jsx语法 - @babel/plugin-transform-react-jsx

cnpm install --save-dev @babel/plugin-transform-react-jsx

然后在我们的webapck.config.js中引入插件

{
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ["@babel/preset-env"],
        plugins: ['@babel/plugin-transform-react-jsx']
      },
    },
  },

然后再用webapck打包一下，发现没有报错,打包成功了！

然后我们尝试着用一个main.html来引入我们打包后的main.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

但是当我们在浏览器中运行的时候发现报了个错误

咦？React未定义，想想我们这篇文章的主题是什么？不就是实现一个简易的React吗？所以，到现在为止，我们不进一步使用工具来帮助我们简化工作量。完全靠自己了！！！

开始动手写React

从打包后的代码可以看出，首先，我们需要一个React变量，React变量的createElement方法接受了三个参数

  1. DOM节点类型
  2. DOM节点上的属性对象
  3. DOM上的子节点children

我们来简单动手实现一下React这个对象，并且把创建好的DOM对象挂载到html页面的body上

// main.js
let React = {
  createElement: (tagName, attributes, ...children) => {
    let ele =  document.createElement(tagName);
      
    Object.keys(attributes || {}).forEach(key => {
      ele.setAttribute(key, attributes[key]);
    });
    
    children.forEach(child => {
      ele.appendChild(child);
    })

    return ele;
  },
};

const ele = <div id="id" style="background: red" >
  <span>zaoren1</span>
  <span>zaoren2</span>
</div>;

document.body.appendChild(ele);

执行npx webpack之后，我们打开浏览器发现报错了！

调试后发现，我们这个t为文本“zaoren”,并且原生的Web API中createElement这个方法是不支持添加文本节点的，需要使用createTextNode方法（详情见MDN）

因此在创建子节点的时候，需要对是否是文本节点进行判断。

children.forEach(child => {
  if (typeof child === "string") {
    child = document.createTextNode(child);
  }
  ele.appendChild(child);
})

重新npx webpack，查看效果

可以看到我们的<div>子节点<span>以及我们的一些属性都能成功设置啦！恭喜你，已经完成了第一步！

与属性相对应对的是函数，但目前我们的React还是没有处理事件的能力的，那么只需要在attribute中过滤出函数属性，然后增加事件监听器（这里简单用正则去匹配on字符串）

... 省略部分
Object.keys(attributes || {}).forEach(key => {
  if (key.match(/^on/)) {
    let eventType = key.replace(/^on/, '').toLocaleLowerCase();
    ele.addEventListener(eventType, attributes[key]);
    return
  }
  ele.setAttribute(key, attributes[key]);
});

... 省略部分
const ele = <div id="id" style="background: red" >
  <span onClick={() => {console.log('add event success!')}}>zaoren1</span>
  <span>zaoren2</span>
</div>;

点击zaoren1，可以看到我们已经成功添加click事件啦！

实现自定义组件的挂载

用过React的同学会发现，我们在React中经常会用到自定义的组件，而我们的乞丐版React目前肯定是不支持渲染自定义的标签的，我们可以尝试着将之前的渲染方式修改一下

// main.js
class MyComponent {
  constructor() {

  }
}

const customComponent = <MyComponent />

// 注意 一定要使用一下customComponent 不然webpack在打包的时候会会略只声明没有使用的变量
console.log(customComponent);

其实也不奇怪，我们可以看到我们的MyComponent这个类型最后通过createElement去创建的时候是传了一个函数对象，原生的API肯定是不支持的。

那我们要怎么做呢？思考一下，我们在做React的时候是不是所有自定义的Class都会从React.Component继承？

所以我们顺着这个思路，写一个能被createElement识别的基类Component，然后我们所有自定义的Component再继承它。

那么接下来，我们的任务就是封装一个能渲染到原生页面上的Component类

  1. props： 首先按照经验，每个Component都能接受一个props的参数
  2. children：可以接受子组件作为children
  3. appendChild: 能往根节点添加子节点
  4. root: 根节点（实DOM）
  5. 有一个render方法去创建虚拟树（这个地方我们就用jsx自带的render方法，不重新定义）,render方法本质上调用的是React.createElement方法(plugin-transform-react-jsx帮我们做了这些工作)

所以！！！我们还需要将我们的createElement方法做一下修改，之前的createElement方法返回的都是实DOM（不信你可以回去看一下），这不符合React的设计原则，我们需要让createElement都返回一个虚拟DOM

方法： 原来的createElement中创建DOM的逻辑用类来封装一下，其中调用原生Web API的document.createElement和document.createTextNode,用root变量来存储，createElement中返回的只是我们封装类的实例，想要拿到实DOM需要再调用root方法。

新建my-react.js文件，将React.Component的逻辑单独放在一个文件

my-react
│ 
│
└───dist
│   │   main.js
└───package.json
|
└───src
│   │   main.js
│   │   my-react.js
└───package.json
|
└───webpack.config.js

my-react.js

// my-react.js
export let React = {
  createElement: (tagName, attributes, ...children) => {
    let ele;
    
    if (typeof tagName === 'string') {
      // 原生标签的创建方法
      ele = new ElementWrapper(tagName, attributes);
    } else {
      ele = new tagName(attributes);
    }
    // 由于我们的children也是走的createElement逻辑，所以也是一个虚拟DOM，把child改成vchild方便理解
    children.forEach(vchild => {
      if (vchild === null) {
        return;
      }
      if (typeof vchild === "string") {
        vchild = new TextWrapper(vchild);
      }
      ele.appendChild(vchild);
    })
    
    return ele;
  },
};

class ElementWrapper {
  constructor(type, attributes) {
    this.root = document.createElement(type);

    Object.keys(attributes || {}).forEach(key => {
      if (key.match(/^on/)) {
        let eventType = key.replace(/^on/, '').toLocaleLowerCase();
        this.root.addEventListener(eventType, attributes[key]);
        return
      }
      this.root.setAttribute(key, attributes[key]);
    });
  }

  appendChild(vchild) {
    // appendChild 本质上是在实DOM上进行操作,所以需要取createElment返回的实例的实DOM
    this.root.appendChild(vchild.root);
  }
}

class TextWrapper {
  constructor(content) {
    this.root = document.createTextNode(content);
  }
}

class Component {
  constructor(props) {
    this.props = props;
    this.children = [];
    
  }
  
  // 由于我们渲染的时候需要拿到实DOM所以需要一个获取root的属性
  get root() {
    // 拿到渲染后的虚拟DOM再去获取实DOM
    return this.render().root;
  }

}

React.Component = Component;

在main.js中测试我们的React

// main.js
import { React } from "./my-react";

class MyComponent extends React.Component {
  constructor() {}

  render() {
    return (
      <div id="id" style="background: red">
        <span
          onClick={() => {
            console.log("add event success!");
          }}
        >
          zaoren1
        </span>
        <span>zaoren2</span>
      </div>
    );
  }
}

const customComponent = <MyComponent />;

document.body.appendChild(customComponent.root);

好了，现在我们已经能加载自定义的组件了，为了使用起来更接近我们真正的React，我们新建一个react-dom.js文件来写一个render方法

my-react
│ 
│
└───dist
│   │   main.js
└───package.json
|
└───src
│   │   main.js
│   │   my-react.js
│   │   react-dom.js
└───package.json
|
└───webpack.config.js

react-dom.js

// react-dom.js
export const render = function(vElement, parentDOM) {
  parentDOM.appendChild(vElement.root);
}

main.js

// main.js
+ import { render } from "./react-dom";
...
+ render(<MyComponent />, document.body);
- document.body.appendChild(customComponent.root);

实现setState来更新组件状态

// my-react.js
class Component {
  constructor(props) {
    this.props = props;
    this.children = [];
    this._root = null;
  }

  setState(state) {
    this.state = state;

    let oldRoot = this._root;

    if (oldRoot && oldRoot.parentNode) {
      oldRoot.parentNode.replaceChild(this.root, oldRoot);
    }
  }

  // 由于我们渲染的时候需要拿到实DOM所以需要一个获取root的属性
  get root() {
    // 拿到渲染后的虚拟DOM再去获取实DOM
    // 每次获取root的时候都将root在_root中保存一份？？？
    return this._root = this.render().root;
  }
}

// main.js
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zaoren1'
    }
  }

  render() {
    const { name } = this.state;
    return (
      <div id="id" style="background: red">
        <span
          onClick={() => {
            this.setState({
              name: 'setState success!'
            })
          }}
        >
          {name}
        </span>
        <span>zaoren2</span>
      </div>
    );
  }
}

然后点击我们的zaoren1，内容变成setState success!

同时我们可以看到，React中的setState只是调用了replaceChild替换了某个父节点下的子节点，并不需要重新渲染整个

学前端的枣仁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled
本本本添哥
02-01 2965
Support for the experimental syntax 'jsx' isn't currently enabled (20:19):
VSCode搭建React Native环境
10-15
VSCode搭建React Native环境是开发React Native应用的重要步骤，它能提供高效的代码编辑、调试以及项目管理功能。本文将详细讲解如何使用Visual Studio Code (VSCode) 创建并配置React Native开发环境。 首先，确保...
实现一个简易版的react
aeipyuan
05-12 162
实现一个简易版的react React.createElement 作用：将babel解析的结果转换成树形结构 class Element { constructor(type, props) { this.type = type; this.props = props; } } function createElement(type, props, ...children) { props = props || {}; props.chil
手写简易版react
weixin_45627127的博客
12-05 642
请多看代码注释 入口index.js // 先把React和React-dom换成mReact和mReact-dom import React, { Component } from "./mReact"; import ReactDOM from "./mReact-dom"; import "./index.css"; // function类型的组件 function Comp(props...
从头实现一个简易版React（一）
weixin_34051201的博客
03-03 150
写在开头 工作中使用react也很长一段时间了，虽然对它的用法，原理有了一定的了解，但是总感觉停留在表面。本着知其然知其所以然的态度，我试着去看了react源码，几天下来，发现并不能看懂，反而更加云里雾里了- -！。既然看不懂，那就看看社区前辈们写的一些源码分析文章以及实现思路吧，又这么过了几天，总算是摸清点思路，于是在参考了前辈们的基础...
来会会babel这个重要且神奇的工具
hello ice cream
05-08 1685
babel 在前端工程化开发中发挥着至关重要的作用，它能将较高级的语法转成浏览器可识别的代码，无论中 es6 中 const 、promise 还是 React、TypeScript。 以下babel在线工具中左侧输入代码，右侧为编译后的结果，设置需要浏览器兼容的版本后，可以看到 “const” 编译成 “var”，“箭头函数” 编译成 “普通函数”。 命令行使用 babel 和之前说到的 postcss 一样，可以通过命令行运行，解析文件夹或者文件。安装命令行工具所需要的依赖，npm install @
react项目搭建
09-27
此项目包含了 路由配置（嵌套路由） fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能，绝对物超所值，页面简单 但是架子稳定 涉及的知识全面
react环境搭建
01-05
React环境的搭建是开发工作的重要第一步，因为这将决定你的项目能否顺利进行。本项目已经为你提供了一个预配置好的React环境，集成了Redux和其他必要模块，可以直接使用。 首先，我们来了解一下`npm install`这个...
React Native 环境搭建的教程
08-29
React Native 环境搭建教程 在本篇文章中，我们将详细介绍 React Native 环境搭建的教程，帮助大家快速上手 React Native 开发。 环境搭建 要搭建 React Native 环境，需要安装 Node、Watchman、Yarn 和 RN ...
react native windows 环境搭建
06-07
在windows搭建RN环境
babel-plugin-import-react：一个小的babel插件，可以自动导入React，它钩在您的组件上
01-31
babel插件导入React 一个小型babel插件，可自动导入React并将其钩在您的组件上 安装 # yarn yarn add --dev babel-plugin-import-react # npm npm i --save-dev babel-plugin-import-react 用法 将其包含在您的.babelrc { " plugins " : [ " import-react " ] } 现在您可以用这种方式编写所有组件（无需导入React及其钩子） // index.jsx import { render } from ' react-dom ' import App from ' ./App.jsx ' render (< App>, document . getElementById ( ' app ' )) // App.jsx const App = () => { // No need to import the `useState` hook const [ msg ] = useState ( ' Hello World from
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程
01-08
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程 目录 安装babel插件 安装babel用于解析jsx语法的包 配置 webpack.config.js 配置 .babelrc 文件 正文 提示: 本文使用的babel及相关插件皆为最新版本，如果需要老版本切勿参考本文 版本信息 babel-loader: ^8.1.0 @babel/core: ^7.9.6 @babel/plugin-transform-runtime: ^7.9.6 @babel/preset-env: ^7.9.6 @ba
关于Vue的一些写法及问题记录
jingchao1998的博客
08-08 1842
∮ 获取组件使用时 v-model 绑定的对象名称 this.$vnode.data.model.expression 例如： <!--这是使用组件时的代码--> <template> <vs-radio v-model="radio" value="0"></vs-radio> </template> <script> export default { name: "Index", data () { retur
040 babel/preset-react
MichaelAn的博客
02-13 294
040 babel/preset-react 开发中使用的库 用途 处理 react 的预设，包括下面的插件(编译jsx) This preset always includes the following plugins: @babel/plugin-syntax-jsx @babel/plugin-transfo...
通过webpack从零开始搭建React项目
knowledge_bird的博客
04-26 3513
从零开始搭建React项目 1. Webpack基础概念 webpack主要作用： 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功...
组件化：2. 组件的基本知识 | 为组件添加JSX语法
minmin_web的博客
01-30 292
搭建JSX环境 安装webpack webpack-cli mdkir jsx #创建目录 cd jsx #进入文件夹 npm init #初始化 （一直按enter即可） npm install -g webpack webpack-cli #全局安装webpack webpack-cli webpack --version #查看版本 若用的是vs code终端，可能会有以下报错： webpack : 无法加载文件 D:\Program Files\nodejs\webpack.ps1……；
手把手教你搭建 Webpack 5 + React 项目
小柒的前端之旅
05-03 3169
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？
react安装初探
前端技术教程
11-17 1663
通过 npm 使用 React 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。 我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。 第一步、安装全局包 $ npm install babel -g $ npm install webpack -g $ npm
前端技术之：使用webpack构建React程序配置方法
popgis的专栏
10-11 94
package.json中需要引入以下依赖： 开发依赖： "@babel/core": "^7.1.2", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.4”, 运行时依赖： "react": "^16.6.0", "react-dom": "^...
vite搭建react项目
最新发布
06-08
好的，我可以帮你解答这个问题。以下是使用 Vite 搭建 React 项目的步骤： 1. 首先，安装 Node.js 和 npm。 2. 使用 npm 安装 Vite： ``` npm install -g vite ``` 3. 创建一个新的 React 项目： ``` npm init vite@latest my-react-app --template react ``` 这将创建一个名为 `my-react-app` 的新目录，并在其中初始化一个新的 React 项目。 4. 进入新创建的项目目录： ``` cd my-react-app ``` 5. 启动开发服务器： ``` npm run dev ``` 此命令将启动一个开发服务器，并在浏览器中打开一个新的页面以显示您的 React 应用程序。 以上就是使用 Vite 搭建 React 项目的步骤。希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值