React.JS中JSX的原理与关键实现

开发 前端
本篇和大家一起学习React.js中JSX的原理与关键实现

[[354631]]

 在开始开发之前,我们需要创建一个空项目文件夹。

安装

初始化

  1. npm init -y 

2.安装webpack相关依赖

  1. npm install webpack webpack-cli -D 

3.安装babel-loader相关依赖

  1. npm install babel-loader @babel/core @babel/preset-env -D 

4.安装jsx支持依赖

  1. npm install @babel/plugin-transform-react-jsx -D 

配置

1.在根目录下创建main.js文件 此文件为入口文件。

2.在项目根目录下创建webpack.config.js

  1. module.exports={ 
  2.   entry:{ 
  3.     main:'./main.js' 
  4.   }, 
  5.   module:{ 
  6.     rules:[ 
  7.       { 
  8.         test:/\.js$/, 
  9.         use:{ 
  10.           loader:'babel-loader'
  11.           options:{ 
  12.             presets:['@babel/preset-env'], 
  13.             plugins:[['@babel/plugin-transform-react-jsx',{pragma:'createElement'}]] // 自定义设置pragma参数,我也可以设置为我的名字:maomin 
  14.           } 
  15.         } 
  16.       } 
  17.     ] 
  18.   }, 
  19.   mode:'development'
  20.   optimization:{ 
  21.     minimize: false 

3.创建一个reactJsx.js文件 此文件为主要逻辑文件。

开发

reactJsx.js

  1. // 封装创建Dom节点 
  2. class ElementWrapper { 
  3.   constructor(type) { 
  4.     this.root = document.createElement(type); 
  5.   } 
  6.   setAttibute(name, value) { 
  7.     this.root.setAttibute(name, value); 
  8.   } 
  9.   appendChild(component) { 
  10.     this.root.appendChild(component.root); 
  11.   } 
  12.  
  13. // 封装插入文本节点 
  14. class TextWrapper { 
  15.   constructor(content) { 
  16.     this.root = document.createTextNode(content); 
  17.   } 
  18. // 组件 
  19. export class Component { 
  20.   constructor() { 
  21.     this.props = Object.create(null); // 创建一个原型为null的空对象 
  22.     this.children = []; 
  23.     this._root = null
  24.   } 
  25.   setAttribute(name, value) { 
  26.     this.props[name] = value; 
  27.   } 
  28.   appendChild(component) { 
  29.     this.children.push(component); 
  30.   } 
  31.   get root() { // 取值 
  32.     if (!this._root) { 
  33.       this._root = this.render().root; 
  34.     } 
  35.     return this._root; 
  36.   } 
  37. // 创建节点,createElement对照 webapck.config.js 中pragma参数。 
  38. export function createElement(type, attributes, ...children) { 
  39.   let e; 
  40.   if (typeof type === "string") { 
  41.     e = new ElementWrapper(type); 
  42.   } else { 
  43.     e = new type(); 
  44.   } 
  45.   for (let p in attributes) { // 循环属性 
  46.     e.setAttribute(p, attributes[p]); 
  47.   } 
  48.   let insertChildren = (children) => { 
  49.     for (let child of children) { 
  50.       if (typeof child === "string") { 
  51.         child = new TextWrapper(child); 
  52.       } 
  53.       if (typeof child === "object" && child instanceof Array) { 
  54.         insertChildren(child); // 递归 
  55.       } else { 
  56.         e.appendChild(child); 
  57.       } 
  58.     } 
  59.   }; 
  60.   insertChildren(children); 
  61.   return e; 
  62.  
  63. // 添加到Dom中 
  64. export function render(component, parentElement) { 
  65.   parentElement.appendChild(component.root); 

main.js

import {createElement,Component,render} from './reactJsx.js'class MyComponent extends Component { render(){ return

maomin

  1. import {createElement,Component,render} from './reactJsx.js' 
  2.  
  3. class MyComponent extends Component { 
  4.   render(){ 
  5.     return <div> 
  6.       <h1>maomin</h1> 
  7.       {this.children} 
  8.     </div> 
  9.   } 
  10.  
  11. render(<MyComponent id="name" class="age"
  12.   <div>xqm</div> 
  13.   <div>my girlfriend</div> 
  14. </MyComponent>,document.body) 
执行
  1. npx webpack 

在dist文件夹下创建html文件,然后引入main.js,打开html文件就可以看到效果了。

 

责任编辑:姜华 来源: 前端历劫之路
相关推荐

2016-11-14 15:51:42

JavaScriptAngular.jsReact.js

2017-03-28 21:03:35

代码React.js

2021-09-14 18:33:39

React 数据交互

2018-06-21 16:03:25

Vue.jsReact.js框架

2015-12-31 10:14:54

React.js开发Web应用

2021-05-21 09:34:40

React React 17前端

2022-06-08 08:03:51

React.jsReactJS 库

2020-04-27 14:54:45

React开发

2017-02-09 15:19:14

2024-01-26 08:06:43

2021-10-12 23:01:42

项目语法React

2023-11-26 18:02:00

ReactDOM

2022-05-03 21:18:38

Vue.js组件KeepAlive

2022-04-25 07:36:21

组件数据函数

2022-07-06 08:30:36

vuereactvdom

2015-02-11 09:44:49

React.js缓存构建

2021-04-25 05:31:33

React.js项目FastReactAp

2021-05-24 06:00:20

ReactJSXJS

2017-09-21 10:36:05

JavaScriptReact.js生命周期

2024-02-26 08:04:38

ReactReact.js场景
点赞
收藏

51CTO技术栈公众号