React学习笔记（一）—— 如何使用

1. 运行：npm i react react-dom -S安装react和react-dom
2. 在index.js中加入如下代码：

// 1.引入
import React from 'react'
import ReactDOM from 'react-dom'

3. 在index.html中增加容器

<div id="app"></div>	

4. 简单使用，在index.js文件加入如下代码：

// 2.创建虚拟DOM元素
// 参数1：创建元素的类型，字符串，表示元素名称
// 参数2：是一个对象或null，表示当前这个DOM元素的属性
// 参数3：子节点
// 参数n:
const myh1=React.createElement('h1',{id:'myh1',title:'this is'},'zheshiyg daad')
const mydiv=React.createElement('div',null,'这是div',myh1)
// 3.使用使用ReactDOM把虚拟DOM渲染到页面上
// 参数1：渲染的那个虚拟DOM
// 参数2：指定页面的容器,应该是DOM元素
ReactDOM.render(mydiv,document.getElementById('app'))

5.高效使用：

• 安装label相关插件，运行：npm i babel-core babel-loader babel-plugin-transform-runtime -D 和 npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
• 在webpack.config.js文件中找到 module.exports={}，在其中添加如下代码：

        rules:[ // 第三方匹配规则
            {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/} // 千万别忘记添加exclude排除项       
        ]
    }

• 在项目根目录下创建.babelrc文件，并且添加如下代码

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

• 就可以使用jsx语法，如下所示

// 利用babel将下列第一句转换为const myh1=React.createElement('div','null','nihao')，再打包
const mytext=<div>nihao</div>
ReactDOM.render(mytext,document.getElementById('app'))