React.JS中JSX的原理与使用方法

这篇文章主要介绍“React.JS中JSX的原理与使用方法”，在日常操作中，相信很多人在React.JS中JSX的原理与使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React.JS中JSX的原理与使用方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

安装

初始化

npm init -y

2.安装webpack相关依赖

npm install webpack webpack-cli -D

3.安装babel-loader相关依赖

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

4.安装jsx支持依赖

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

配置

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

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

module.exports={   entry:{     main:'./main.js'   },   module:{     rules:[       {         test:/\.js$/,         use:{           loader:'babel-loader',           options:{             presets:['@babel/preset-env'],             plugins:[['@babel/plugin-transform-react-jsx',{pragma:'createElement'}]] // 自定义设置pragma参数，我也可以设置为我的名字：maomin           }         }       }     ]   },   mode:'development',   optimization:{     minimize: false

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

开发

reactJsx.js

// 封装创建Dom节点 class ElementWrapper {   constructor(type) {     this.root = document.createElement(type);   }   setAttibute(name, value) {     this.root.setAttibute(name, value);   }   appendChild(component) {     this.root.appendChild(component.root);   } }  // 封装插入文本节点 class TextWrapper {   constructor(content) {     this.root = document.createTextNode(content);   } } // 组件 export class Component {   constructor() {     this.props = Object.create(null); // 创建一个原型为null的空对象     this.children = [];     this._root = null;   }   setAttribute(name, value) {     this.props[name] = value;   }   appendChild(component) {     this.children.push(component);   }   get root() { // 取值     if (!this._root) {       this._root = this.render().root;     }     return this._root;   } } // 创建节点，createElement对照 webapck.config.js 中pragma参数。 export function createElement(type, attributes, ...children) {   let e;   if (typeof type === "string") {     e = new ElementWrapper(type);   } else {     e = new type();   }   for (let p in attributes) { // 循环属性     e.setAttribute(p, attributes[p]);   }   let insertChildren = (children) => {     for (let child of children) {       if (typeof child === "string") {         child = new TextWrapper(child);       }       if (typeof child === "object" && child instanceof Array) {         insertChildren(child); // 递归       } else {         e.appendChild(child);       }     }   };   insertChildren(children);   return e; }  // 添加到Dom中 export function render(component, parentElement) {   parentElement.appendChild(component.root); }

main.js

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

maomin

import {createElement,Component,render} from './reactJsx.js'  class MyComponent extends Component {   render(){     return <div>       <h2>maomin</h2>       {this.children}     </div>   } }  render(<MyComponent id="name" class="age">   <div>xqm</div>   <div>my girlfriend</div> </MyComponent>,document.body)

执行

npx webpack

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

到此，关于“React.JS中JSX的原理与使用方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！