React语法及使用

1.使用React渲染一个最基本的页面

//1.导入
import React from "react";//创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上去展示的

//2.创建虚拟DOM元素
//参数1：创建的元素的类型
//参数2：是一个对象或null,表示当前这个DOM元素的属性
//参数3：子节点
//参数n:其他子节点
const myh1 = React.createElement('h1',{id:'myh1',title:'this is myh1'},'这是用react创建的');

//3，使用ReactDOM把虚拟DOM渲染到页面上
//参数1：要渲染的那个虚拟DOM元素
//参数2：页面上的一个容器
ReactDOM.render(myh1,document.getElementById('container'));

2.实现DOM元素嵌套渲染

const myh1 = React.createElement('h1',{id:'myh1',title:'this is myh1'},'这是用react创建的');
const mydiv = React.createElement('div',{id:'mydiv',title:'this is mydiv'},'这是用react创建的div',myh1);
ReactDOM.render(mydiv,document.getElementById('container'));

3.JSX语法

启用JSX语法

（1）安装babel插件，执行以下命令

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm babel-preset-env babel-preset-stage-0 babel-preset-react -D

(2)在webpack.config.js文件中写入第三方配置规则

//webpack默认只能打包处理.js后缀名类型的文件，像.png,.vue等无法处理，所以要配置第三方的loader
module.exports = {
    mode:"development",
    plugins:[
        htmlPlugin
    ],
    module:{//所有第三方模块的配置规则
        rules:[//第三方匹配规则
            //千万别忘记添加exculde排除项
            {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/,}
        ]
    }
}

(3)在项目根目录下添加.babelrc配置文件，写入以下代码

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

JSX语法的本质：

并不是直接把JSX渲染到页面上，而是内部先转换成立creatElement形式后再渲染的

在JSX中可以混合写入JS表达式，但是要把JS代码写到{}中

let a = -2;
let str = '你好';
let boo = true;
let title = '999';
const h1=<h1>这是h1</h1>
const arr = [
	<h2>这是h2</h2>,
	<h3>这是h3</h3>
.]
ReactDOM.render(<div>
	//渲染数字
	{a+2}
	//渲染字符串
	{str}
	//渲染布尔值
    {boo ? '条件为真':'条件为假'}
    //为属性绑定值
    <div title = {title}></div>
    //渲染JSX元素
    {h1}
    //渲染JSX数组
    {arr}
</div>,
    document.getElementById('container')
)

将普通字符串转为JSX数组并渲染到页面上
（1）在外部使用forEach循环

      const arr = ['小王','小路','小刘','小样'];
      const newArr=[];
      arr.forEach(item => {