React 学习

一、搭建webpack4.x环境

1.创建工程文件夹（ReactDemo）

2.在工程文件夹下，快速初始化项目

npm init -y        // 创建一个package.json文件

3.在工程文件夹下，创建源码文件夹（src）和编译打包文件夹（dist）

4.在源码文件夹下，创建index.html和入口index.js文件

5.在工程文件夹下，安装webpack

npm i webpack webpack-cli -D

6.在工程文件夹下，创建webpack.config.js文件

// 向外暴露一个配置对象
module.exports = {
    mode: 'development' // development：打包文件不压缩   production：打包文件压缩
}

7.配置package.json文件

{
  "name": "ReactDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

8.在工程文件夹下，执行打包，会在dist文件夹下生成main.js

npm run dev

二、工具使用

1.配置实时打包

npm i webpack-dev-server -D

{
  "name": "ReactDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }
}

注：--open：自动打开浏览器（谷歌），--port：指定端口，--hot：热打包，--host：指定地址

2.配置将html页面加载到内存中

npm i html-webpack-plugin -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// 那些 特性 Node 支持呢？Node是基于Chrome V8引擎实现的Javascript运行环境，如果 chrome 浏览器支持哪些，则 Node 就支持哪些；
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ]
}

三、配置React

1.引入包，react用于创建虚拟DOM和生命周期，react-dom用于将虚拟DOM渲染到页面

npm i react react-dom -S

2.配置index.js文件

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈')

// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(h1, document.getElementById('app'))

3.配置识别JSX。安装babel，添加.babelrc配置文件，配置webpack.config.js，修改index.js

npm i babel-core@6.26.3 babel-loader@7.1.2 babel-plugin-transform-runtime@6.26.0 -D
npm i babel-preset-env@1.7.0 babel-preset-stage-0@6.24.1 -D
npm i babel-preset-react@6.24.1 -D

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ],
    // 所有第三方模块的配置规则
    module: {
        rules: [
            {test: /.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}
        ]
    }
}
// 以下的写法不行，这是ES6中向外导出模块的API，与之对应的是import ** from '标识符'
// export default {}

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
const divJsx = <div>欢迎JSX</div>

// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div, divJsx)


// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

4.React语法之引用变量

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎JSX"
const divJsx = <div>{a}</div>


// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

5.React语法之引用变量数组使用map

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const divJsx = <div>
                {a}
                <hr />
                {b.map(item => <div key={item}>{item}</div>)}
               </div>


// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

5.React语法之注意事项

• 属性：使用className替代class，使用htmlFor替代label的for
• jsx注释：{ /* 这是注释 */ }
• 虚拟DOM：在jsx创建DOM时，所有节点必须有唯一的根节点包裹
• 标签：须成对出现（必须紫自闭合）
• 事件：属性名须小驼峰onClick

6.React语法之创建组件

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']

// 创建组件方式一
function Hello() {
    return (<div className="container">
        {a}
        <hr />
        {"创建组件方式一"}
        <hr />
        {b.map(item => <div key={item}>{item}</div>)}
       </div>)
}

// 创建组件方式二
class He extends React.Component{
    render() {
        return (<div className="container">
        {a}
        <hr />
        {"创建组件方式二"}
        <hr />
        {b.map(item => <div key={item}>{item}</div>)}
       </div>)
    }
}


// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(
    <div className="continer">
        <Hello />
        <hr />
        <He />
    </div>, 
    document.getElementById('app'))

7.React语法之给主键传值（只读）

import React from 'react'
import ReactDOM from 'react-dom'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {
    name: 'pascall',
    age: 20,
    sex: 'man'
}

// 创建组件方式一
function Hello(props) {
    return (<div className="container">
        {a}
        <hr />
        {"创建组件方式一: 接收值（只读）：{name=" + props.name + ",age=" + props.age + ",sex=" + props.sex + "}"}
        <hr />
        {b.map(item => <div key={item}>{item}</div>)}
       </div>)
}

// 创建组件方式二
class He extends React.Component{
    render() {
        return (<div className="container">
        {a}
        <hr />
        {"创建组件方式二: 接收值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        <hr />
        {b.map(item => <div key={item}>{item}</div>)}
       </div>)
    }
}


// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(
    <div className="continer">
        <Hello {...c} />
        <hr />
        <He  {...c} />
    </div>, 
    document.getElementById('app'))

8.React语法之组件内部属性state创建和获取

import React from 'react'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god'
        }
    }

    render() {
        return (<div className="container">
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        {"获取state值（读写）：" + this.state.name}
       </div>)
    }
}

9.React语法之组件内部属性state修改

import React from 'react'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0
        }
    }

    handleClink() {
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    render() {
        return (<div className="container">
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        {"获取state值（读写）：" + this.state.name}
        <br />
        <button onClick={this.handleClink.bind(this)}>修改state值</button>
       </div>)
    }
}

10.React语法之组件内部css样式

• 方式一：行内样式

import React from 'react'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0
        }
    }

    handleClink() {
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    render() {
        return (<div className="container-style-2">
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        {"获取state值（读写）：" + this.state.name}
        <br />
        <button onClick={this.handleClink.bind(this)} style={{color: 'red'}}>修改state值</button>
       </div>)
    }
}

• 方式二：外联样式(css, less)

npm i style-loader css-loader less less-loader sass-loader node-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ],
    // 所有第三方模块的配置规则
    module: {
        rules: [
            {test: /.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/},
            {test: /.css$/, use: [
                'style-loader', 
                'css-loader'
            ]},
            {test: /.scss$/, use: [
                'style-loader', 
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[path][name]-[local]-[hash:base64:5]',
                        },
                    },
                },
                'sass-loader'],
            exclude: /node_modules/},
            {test: /.less$/, use: [ 
                'style-loader', 
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[path][name]-[local]-[hash:base64:5]',
                        },
                    },
                },
                'less-loader'],
            exclude: /node_modules/}
        ]
    },
    // 配置省略后缀名和路径别名
    resolve: {
        // 默认.js, .json
        extensions: [".js", ".jsx", ".json"],
        alias: {
            '@': path.join(__dirname, "./src")
        }
    }
}

import React from 'react'
import hi from '@/css/hi.less'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0
        }
    }

    handleClink() {
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    render() {
        return (<div className={hi.containerStyle2}>
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        <div className={hi.content}>{"获取state值（读写）：" + this.state.name}</div>
        <br />
        <button onClick={this.handleClink.bind(this)}>修改state值</button>
       </div>)
    }
}

.containerStyle2{
    .content{
        color: red
    }
}

• 样式作用域（默认全局）（配置局部）普通样式模块化局部或全局

// hi.less
// :local：会被模块化，隐式使用，所以不用显示使用
// :local(.containerStyle2)与.containerStyle2效果一致
// :global：不会被模块化
:local(.containerStyle2){
    :global(.content){
        color: red
    }
}

import React from 'react'
import hi from '@/css/hi.less'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0
        }
    }

    handleClink() {
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    render() {
        return (<div className={hi.containerStyle2}>
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        <div className='content'>{"获取state值（读写）：" + this.state.name}</div>
        <br />
        <button onClick={this.handleClink.bind(this)}>修改state值</button>
       </div>)
    }
}

• 使用外部样式bootstrap@3.3.7

npm i bootstrap@3.4.1 -S

npm i url-loader file-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ],
    // 所有第三方模块的配置规则
    module: {
        rules: [
            {test: /.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/},
            {test: /.ttf|woff|woff2|eot|svg|jpg|png|gif$/, use: ['url-loader']},
            {test: /.css$/, use: ['style-loader', 'css-loader']},
            {test: /.scss$/, use: [
                'style-loader', 
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[path][name]-[local]-[hash:base64:5]',
                        },
                    },
                },
                'sass-loader'],
            exclude: /node_modules/},
            {test: /.less$/, use: [ 
                'style-loader', 
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[path][name]-[local]-[hash:base64:5]',
                        },
                    },
                },
                'less-loader'],
            exclude: /node_modules/}
        ]
    },
    // 配置省略后缀名和路径别名
    resolve: {
        // 默认.js, .json
        extensions: [".js", ".jsx", ".json"],
        alias: {
            '@': path.join(__dirname, "./src")
        }
    }

import React from 'react'
import hi from '@/css/hi.less'
import 'bootstrap/dist/css/bootstrap.css'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0
        }
    }

    handleClink() {
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    render() {
        return (<div className={hi.containerStyle2}>
        {"创建组件方式二"}
        <br />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        <div className='content'>{"获取state值（读写）：" + this.state.name}</div>
        <br />
        <button onClick={this.handleClink.bind(this)} className="btn btn-primary">修改state值</button>
       </div>)
    }
}

11.React语法之组件事件

import React from 'react'
import hi from '@/css/hi.less'
import 'bootstrap/dist/css/bootstrap.css'

export default class Hi extends React.Component{

    // 构造器
    constructor(props) {
        super(props)
        this.state = {
            name: 'god',
            seg: 0,
            nickName: [
                {id: 1, name: 'sa'},
                {id: 2, name: 'da'}, 
                {id: 3, name: 'adac'},
                {id: 4, name: 'asx'}
            ]
        }
    }

    handleClink() {
        console.log(this)
        this.setState({
            seg: this.state.seg + 1,
            name: this.state.name.substring(0, 3) + this.state.seg
        })
    }

    handleClinkNickName(item) {
        console.log("state nickName: {id=" + item.id + ",name=" + item.name + "}")
    }

    render() {
        return (<div className={hi.containerStyle2}>
        {"创建组件方式二"}
        <hr />
        {"获取props值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
        <div className='content'>{"获取state值（读写）：" + this.state.name}</div>
        <hr />
        <button onClick={this.handleClink.bind(this)} className="btn btn-primary">修改state值</button>
        <hr />
        {this.state.nickName.map(item =>{
            return (<div key={item.id}>
                        {item.name}
                        <button onClick={this.handleClinkNickName.bind(this, item)} className="btn btn-primary">
                            获取本item值
                        </button>
                    </div>)
        })}
        
       </div>)
    }
}

12.webpack语法之组件抽离成独立文件，在src下创建hello文件夹，并在其下创建Hello.jsx和Hi.jsx文件，修改index.js

// Hello.jsx
import React from 'react'

// 创建组件方式一
export default function Hello(props) {
    return (<div className="container">
        {"创建组件方式一: 接收值（只读）：{name=" + props.name 
        + ",age=" + props.age + ",sex=" + props.sex + "}"}
       </div>)
}

// Hi.jsx
import React from 'react'

export default class Hi extends React.Component{
    render() {
        return (<div className="container">
        {"创建组件方式二: 接收值（只读）：{name=" + this.props.name 
        + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}
       </div>)
    }
}

import React from 'react'
import ReactDOM from 'react-dom'

// 创建组件方式一二
import Hello from './hello/Hello.jsx'
import Hi from './hello/Hi.jsx'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {
    name: 'pascall',
    age: 20,
    sex: 'man'
}

// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(
    <div className="continer">
        <Hello {...c} />
        <hr />
        <Hi  {...c} />
    </div>, 
    document.getElementById('app'))

13.webpack语法之配置省略后缀名（webpack.config.js）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ],
    // 所有第三方模块的配置规则
    module: {
        rules: [
            {test: /.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}
        ]
    },
    // 配置省略后缀名
    resolve: {
        // 默认.js, .json
        extensions: [".js", ".jsx", ".json"]
    }
}

import React from 'react'
import ReactDOM from 'react-dom'

// 创建组件方式一二
import Hello from './hello/Hello'
import Hi from './hello/Hi'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {
    name: 'pascall',
    age: 20,
    sex: 'man'
}

// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(
    <div className="continer">
        <Hello {...c} />
        <hr />
        <Hi  {...c} />
    </div>, 
    document.getElementById('app'))

14.webpack语法之配置路径别名

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件路径
    filename: 'index.html'                               // 生成内存中首页的名称
})

// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {
    mode: 'development', // development   production
    plugins: [
        htmlPlugin
    ],
    // 所有第三方模块的配置规则
    module: {
        rules: [
            {test: /.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}
        ]
    },
    // 配置省略后缀名和路径别名
    resolve: {
        // 默认.js, .json
        extensions: [".js", ".jsx", ".json"],
        alias: {
            '@': path.join(__dirname, "./src")
        }
    }
}

import React from 'react'
import ReactDOM from 'react-dom'

// 创建组件方式一二
import Hello from '@/hello/Hello'
import Hi from '@/hello/Hi'

// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)

const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {
    name: 'pascall',
    age: 20,
    sex: 'man'
}

// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(
    <div className="continer">
        <Hello {...c} />
        <hr />
        <Hi  {...c} />
    </div>, 
    document.getElementById('app'))

 github.com-ReactDemo源码