React基本语法

React一、导入    0、局部安装 react 和 react-dom        npm install –save-dev react react-dom     1、react语法塘        import React from ‘react’;     2、reactDom用来操作虚拟Dom【虚拟Dom：真实的js对象】        import ReactDom from ‘react-dom’; 二、语法【通过实现vue的一些指令来学习react】    0、react通过单花括号{}来解析【vue：是通过双花括号{{}}来解析的】     1、实现v-text        let message = ‘小田田’;        let Dom = <h3>{message}</h3>;        let Dom = <h3>{1+1}</h3>;        let Dom = <h3>{2>1 ? 10 : 20}</h3>;     2、实现v-html        let message = <h2>小田田</h2>;        let Dom = <div>{message}</div>     3、实现v-bind        let message = ‘小田田’;        let Dom = <h3 title={message}>{message}</h3>     4、实现v-show【如果想加一个对象的话，要在括号里面在加一个括号】        let message = ‘小田田’;        let Dom = <h3 style={{display:true ? “block” : “none”}}>{message}</h3>     5、实现v-if【下方元素在dom中不存在，也就是说F12看不到】        let Dom = false ? <h3>{message}</h3> : “”;     6、实现v-for【每一个循环元素都要加 key ，数据变化是会根据这个属性单独去改变，而不是全部去修改】        let arr = [‘张三’,’李四’,’王五’];        let Dom = <ul>            {                arr.map((item,index)=>{                    return <li key={index}>{item}</li>                })            }        </ul>;     7、上面代码依赖下放代码        /*            ReactDom.render ：                参数1：需要渲染的组件或者虚拟DOM【上方定义了DOM】                            参数2：将渲染好的组件或者虚拟DOM放在哪个标签上【下方案例标签为：id为root的标签】                 参数3：回调函数        */        ReactDom.render(            Dom,            document.querySelector(‘#root’),            ()=>{                console.log(‘渲染完成’);            }        )