react的基础用法（1）

首先需要先安装：npm init -y

然后下载相应的：npm i react react-dom babel-standalone

​ 新建js文件夹把上面下载的文件移动到js文件夹

	(react/umd/react.development.js)
    (react-dom/umd/react-dom.development.js)
    (babel-standalone/babel.min.js)

在写代码的时候要把上面三个js文件引入（每个项目都需要加），

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

书写的格式 ReactDOM.render()固定格式

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

<script type="text/babel">    //需要改样式的格式。默认type="text/javascript"
    // console.log(ReactDOM)   

    // 将h2节点渲染到指定的app节点上面去。
    // jsx代码        参数一：要插入的内容。参数二：挂载点
    ReactDOM.render(<h2>我是h2哦</h2>,document.getElementById("app"))
</script>

jsx编译规则：

• jsx内部借鉴了xml一些语法规范，标签必须是闭合的、只能有一个根元素
• 在jsx代码中class属性应该改成className

const a = <div><h2 className='abc'>我是h2</h2><p>我是P标签</p></div>

jsx内部的编译原理： Babel会把jsx代码转译成一个名字React.createElement()方法进行调用

 上面一行代码为例：
 const a = React.createElement(
                     'div',
                     {},
                     React.createElement('h2',{className:'abc'},"我是h2"),
                     React.createElement('p',{},"我是p"),
  );
  
  也就相当于：
  ReactDOM.render(a,document.getElementById("app"))

在jsx代码模式添加style属性的时候，

• 行内样式

  想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

还可以使用这种方法

const style = {color:'red', fontSize:'14px'}

<p style={style}>Hello world</p>

• 使用class

React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体

其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class是关键字）

Hello world

渲染方式：

• react中通过{}来渲染变量 （只要写js代码了，就需要通过引入{}语法）
• null | undefined | boolean 都不会在{}中进行渲染
• 数组会渲染成字符串
• 注意： {}中不能直接放入对象类型！ json对象不能扔进去，报错！
• jsx中注释需要 {/jsx代码/}

	const a = 10
        ReactDOM.render(<div>
            <p>{a}</p>    //react中通过{}来渲染变量 （只要写js代码了，就需要通过引入{}语法）
            <p>{"hello".substr(0,2)}</p>
          11{[1,2,3]}</p>   //数组会渲染成字符串
            {/*<p>{ {a:1} }</p>*/}   jsx中注释需要 {/*jsx代码*/}
            <p>{function(){alert(2)}()}</p>
        </div>,document.getElementById("app"))

绑定事件：

绑定事件 遵从驼峰式写法 onclick>onClick onkeyup>onKeyUp

const app = <div><p id="p1" onClick={()=>alert('asldjlakjdlakdjl')}>我是p标签</p><input onKeyUp={()=>console.log(1111)}/></div> 

ReactDOM.render(<div>{app}</div>,document.getElementById("app"))


		// 下述写法麻烦，谨记写在render下面！
        // document.getElementById("p1").onclick = function(){
        //     alert("点击了哦...")
        // }

数组的map迭代与key：

在react里，没有像vue里面v-for= v-if v-show v-once v-model v-on v-bind 这些方法，在react里我们可以写内部运行原理的类似于原生js的代码，下面我们举例写遍历的代码：

const arr = ["a","b","c","d"]
        ReactDOM.render(<div>
            <ul>
                {
                    arr.map((item,index)=>{
                        return <li>{item}</li>
                    }) 
                }
            </ul> 
        </div>,document.getElementById("app"))

如果仅仅是这样写的话，会报没有添加key值的错。所以我们需要添加key值，作用为：

• key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识
• 虚拟dom对比的时候，加key可以避免出错。 如果不加key，当一个元素添加的时候，后面的元素就会经历卸载与重新装载的过程。
• 为了避免出错。所以我们在开发中应该尽量避免用index作为key值，除非我知道index是不变的。

代码改为

			   {
                    arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    }) 
                }

此时加上key值，报错就会消失。