React的基本使用 1、引入资源使用React需要引入三个js文件，分别是: react.js、react-dom.js、babel.min.js、涉及到PropType的还需要添加 prop-types.js引入的三个文件 script 类型都是 text/javascript2、使用React2.1、创建虚拟DOM使用babel脚本是 script 的类型 type="text/babel"var element = React.createElement('h1',{id:'myTitle'},'hello') // 纯js创建，一般不用 var element = {title}2.2、渲染虚拟DOMReactDOM.render(param1, param2)2.3、JSX创建react虚拟DOM（元素）对象var ele = Hello JSX!1、要注意的是它既不是字符串，也不是HTML/XML标签2、它最终产生的就是一个JS对象3、使用总结babel的作用，浏览器不能直接解析jsx代码，需要babel转译为纯js代码才能运行只要用了 jsx，都要加上 type="text/babel" ， 声明需要babel来处理3.1、如何将一个数据的数组转换为一个标签的数组？使用数组的Map（）const names = ['jquery','zepto','angular','react','vue'] const ul = ({ names.map((name) => {name}) })3.2、组件的使用1、组件名必须首字母大写2、虚拟DOM元素只能有一个根元素3、虚拟DOM元素必须有结束标签3.2.1、render()渲染组件标签的基本流程1）React内部会创建组件实例对象2）得到包含的虚拟DOM并解析为真实DOM3）插入到指定的页面元素内部3.3、状态有关1）初始化状态：constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 } }2) 读取某个状态的值this.state.statePropertyName，比如上面的 this.state.stateProp13) 更新状态this.setState({ stateProp1:value3, stateProp2:value4 })4) 将新增方法中的this强制绑定为组件对象this.handleClick = this.handleClick.bind(this)3.4、input取值react中有一个属性类似HTML中的ID或者说class，即 ref，比如:<input type="text" ref="content">// 获取input的值const iuput = this.refs.content第二种方式：<input type="text" ref="{input" ==""> this.input=input} /> // 这也是后面react推荐的 代码有误，未修改获取input的值： const text = this.input.value去空格， const text = this.input.value.trim()把获取到的text存到 props中： this.props.add(text)