React 学习

时间  2019-11-13
标签 react 学习 栏目 React 繁體版
原文   原文链接

1、搭建webpack4.x环境css

1.建立工程文件夹（ReactDemo）html

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

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

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

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

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

npm i webpack webpack-cli -D

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

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

7.配置package.json文件web

{
  "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.jschrome

npm run dev

2、工具使用npm

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 ]
}

3、配置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源码

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程