1、引入资源

使用React需要引入三个js文件，分别是: react.js、react-dom.js、babel.min.js、涉及到PropType的还需要添加 prop-types.js

引入的三个文件 script 类型都是 text/javascript

2、使用React

2.1、创建虚拟DOM

使用babel脚本是 script 的类型 type="text/babel"

var element = React.createElement('h1',{id:'myTitle'},'hello')  // 纯js创建，一般不用

var element = {title}

2.2、渲染虚拟DOM

ReactDOM.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并解析为真实DOM

3）插入到指定的页面元素内部

3.3、状态有关

1）初始化状态：

constructor(props){
    super(props)
    this.state = {
        stateProp1:value1,
        stateProp2:value2
    }
}

2) 读取某个状态的值
this.state.statePropertyName，比如上面的 this.state.stateProp1
3) 更新状态
this.setState({ stateProp1:value3, stateProp2:value4 })

4) 将新增方法中的this强制绑定为组件对象
this.handleClick = this.handleClick.bind(this)

3.4、input取值

react中有一个属性类似HTML中的ID或者说class，即 ref，比如:

// 获取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)

React的基本使用