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

這篇文章主要介紹“React.JS中JSX的原理與使用方法”，在日常操作中，相信很多人在React.JS中JSX的原理與使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React.JS中JSX的原理與使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

在開始開發(fā)之前，我們需要?jiǎng)?chuàng)建一個(gè)空項(xiàng)目文件夾。

安裝

初始化

npm init -y

2.安裝webpack相關(guān)依賴

npm install webpack webpack-cli -D

3.安裝babel-loader相關(guān)依賴

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

4.安裝jsx支持依賴

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

配置

1.在根目錄下創(chuàng)建main.js文件 此文件為入口文件。

2.在項(xiàng)目根目錄下創(chuàng)建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'}]] // 自定義設(shè)置pragma參數(shù)，我也可以設(shè)置為我的名字：maomin           }         }       }     ]   },   mode:'development',   optimization:{     minimize: false

3.創(chuàng)建一個(gè)reactJsx.js文件 此文件為主要邏輯文件。

開發(fā)

reactJsx.js

// 封裝創(chuàng)建Dom節(jié)點(diǎn) class ElementWrapper {   constructor(type) {     this.root = document.createElement(type);   }   setAttibute(name, value) {     this.root.setAttibute(name, value);   }   appendChild(component) {     this.root.appendChild(component.root);   } }  // 封裝插入文本節(jié)點(diǎn) class TextWrapper {   constructor(content) {     this.root = document.createTextNode(content);   } } // 組件 export class Component {   constructor() {     this.props = Object.create(null); // 創(chuàng)建一個(gè)原型為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;   } } // 創(chuàng)建節(jié)點(diǎn)，createElement對照 webapck.config.js 中pragma參數(shù)。 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) { // 循環(huán)屬性     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)

執(zhí)行

npx webpack

在dist文件夾下創(chuàng)建html文件，然后引入main.js，打開html文件就可以看到效果了。

到此，關(guān)于“React.JS中JSX的原理與使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！