在開始開發之前，我們需要創建一個空項目文件夾。
安裝
初始化
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>
<h1>maomin</h1>
{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文件就可以看到效果了。
