【react教程 从0搭建到生命周期（hooks）】

1.开始

react的特点: react采用组件化模式，声明式编码，提高开发效率以及组件复用率。

React Native 中可以使用React语法进行移动端开发 ，可以用js代替Andriod开发移动端app。

2.react起步

react.development.js react核心库

react-dom.development.js react扩展库，帮助操作dom元素 这两个文件引入顺序不可随意更换，后者依赖前者

babel.min.js ES6转ES5 并且帮助react中的jsx转js

3.挂载react主DOM

<script type="text/babel"> //此处必须写babel
//  创建虚拟dom
const VDOM = (<h1>Hello,React</h1>)
//  渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('root'))//将VDOM挂载到#root下
</script>

4.react中的jsx语法规则

JSX全称（Javascript XML）

1.定义虚拟dom，不要写引号

2.标签中混入JS表达式的时候要用{}

3.样式的类名指定不要用class，要用className.

<h1 className="title"><h1/>

4.内联样式，要用style = { {key:value}}的形式去写

<h1 className="title" style={
  {color:'white',fontSize:'20px'}}><h1/>

5.虚拟dom只有一个根标签

6.标签必须闭合

7.标签首字母

（1）若小写字母开头，则将该标签转为html标签，若html中没有该标签对应的同名元素，则报错

（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

5.react面向组件编程

1.函数式组件：用函数创建的组件

//  创建函数式组件
function Demo(){
  return (<h1>我是用于函数定义的组件（适用于【简单组件】的定义）</h1>)
}
//  渲染虚拟DOM到页面
ReactDOM.render(<Demo/>,document.getElementById('root'))

1.react解析组件标签，找到了Demo组件

2.react发现该组件是函数定义的，随后调用该函数，将函数返回的虚拟DOM转为真实DOM，随后呈现在页面中

2.类式组件：用JavaScript类创建的组件

//  创建类式组件
  class MyComponet extends React.Component{
    render() {
      return (
              <div>Hello{this.props.name}</div>
      )
    }
  }
//  渲染虚拟DOM到页面
ReactDOM.render(<MyComponet name="liu"/>,document.getElementById('root'))

1.react解析组件标签&#