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的原理與使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！