React入门

react是一个用于构建用户界面的 JavaScript 库
现在我们来简单的入门，不涉及脚手架！
首先，我们要先安装运行环境

1. 用node的命令下载
   a.npm init -y --生成的默认的package.json
   b. npm i react --save --react的核心代码
   c. npm i react-dom -save --react-dom的核心功能就是把虚拟Dom渲染到文档中变成实际dom
   d.建立一个目录js
   把 node_modules/react/umd／react.development.js 拷贝到js目录下
   把 node_modules/react－dom/umd／react-dom.development.js 拷贝到js目录下
   注意，要先引入react，再引入react-dom，下面我们就用react来输出hello world

	<div id="box">

    </div>

ReactDOM.render("hello world",document.getElementById("box"))

这样就可以在页面上渲染出hello world。
但是，如果我们要渲染标签，就要使用jsx语法，就是javascript扩展意思，javascript+xml
先下载npm i babel-standalone --save
然后同样把 node_modules/_babel-standalone@6.26.0@babel-standalone／babel.js 拷贝到js目录下,然后引入

<script src="js/babel.js"></script>

<script type="text/babel">
	ReactDOM.render(<h2>hello</h2>,document.getElementById("box"))
</script>

注意，元素必须包装在一个封闭的标记中
script标签的type属性一定要写text/babel

2. 第二种我们可以在网上直接引入这几个文件

    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>

这样同样可以渲染页面。
下面我们来讲一下jsx语法

var arr=['aa','bb','cc'];
         var obj ={a:1,b:2}
         var test="react";
         var visible = false;
          var objStyle ={ background:'#ccc'};
         var toggle=()=>{  //切换div的隐藏与否
           visible =!visible
           r();
        } 
        var info =()=>{
            alert("haha")
        }
       var r=()=>{
           var style ={display:visible?"block":"none"};
          ReactDOM.render(<div>
                          <button onClick={toggle}>toggle</button>
                          <div style={style}>
                            <p title={test} className='active'>1234567</p>
                            <div onClick={info}>hello {arr}</div>
                            <div style={objStyle}>world {obj.a} {obj.b}</div>
                          </div>
                          <label htmlFor="select">选择</label>
                          <input type="checkbox" id="select" defaultChecked="true" />
                          <input type="text" defaultValue="abc" />
                          
                        </div>,
                       document.getElementById("box"));  
        }
        r();

{差值表达式}
对象不能直接渲染
onXxx 事件的首个字母要大写

style={{key:value…}}
class -->className
for–>htmlFor
value–>defaultValue
checked -->defaultChecked

遍历列表推荐用数组的map方法
遍历多个列表可以封装为函数
用无状态组件去渲染列表

遍历对象
组件的首字母要大写

var 组件=(props)=>{ //无状态组件
props就可以接受父组件传过来的值
return jsx表达式
}
<组件 属性={值} />