一：HTML 模板

 例如： <script src="../build/react.js"></script>  //react的核心库
<script src="../build/react-dom.js"></script>  //提供Dom的相关功能
<script src="../build/browser.min.js"></script> //将JSX语法转换成js语法

二：ReactDom.render()

<div id="example"></div>
<script type='text/babel'>
    ReactDOM.render(
    <h1>Hello, world!</h1>,    
    document.getElementById('example')
)
</script>
     总结： JSX部分的script 要加上type='text/babel'   在script里面写ReactDOM.render(
  把元素添加到里面元素里面)

三：jsx语法

HTML语言直接写在Javascript语言中，不加任何引号，就是JSX语法
  <div id="example"></div>
 <script type="text/babel">
    var names = ['Alice', 'Emily', 'Kate'];
    ReactDOM.render(
     <div>
    {
     names.map(function(name,index){
      return <div key={index}>{name }</div> })
     }
     </div>,
     document.getElementById('example')
)
</script>
      总结：这个div标签就是JSX语法。
     JSX语法，最终会被编译为 createElement() 方法
                  推荐：使用 JSX 的方式创建组件
        注意：1：如果在JSX里面添加类，用className代替class. for用htmlFor
      2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
      3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
      4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

四：组件

创建组件的三种方法

React.createClass 方法就是用于生成一个组件类
  <div id="example"></div>
  <script type="text/babel">

1):用React.createClass创建一个组件 HellowMessage

  var HelloMessage=React.createClass({
  render:function(){
    return <h1>Hello {this.props.name}</h1>;
}
});
 //在html中输出
 ReactDOM.render(
    //要有闭合标签
    <HelloMessage name='join'/>,  
   //输入到页面
   document.getElementById('example')
 )
 </script>

注意：首字母一定要大写。第二个是，每个组件都要有一个render的方法，用于输出组件。

2): 第二种方式创建组件 通过js函数创建(无状态组件）

          例：function Welcome(props) {
  return (
  // 此处注释的写法 
 <div className="shopping-list">
 {/* 此处 注释的写法 必须要{}包裹 */}
  <h1>Shopping List for {props.name}</h1>
  <ul>
  <li>Instagram</li>
  <li>WhatsApp</li>
   </ul>
    </div>
    )}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('app')
)

注意： 1 函数名必须是大写，react通过这来判断是不是组件

2 函数必须有返回值(return)，返回值可以是：JSX对象或null

3 返回的JSX，必须有一个根元素(如例的div)

4 组件的返回值使用()包裹，避免换行问题

3): class创建组件 (有状态组件)

class ShoppingList extends React.Component {
      constructor(props) { 
        super(props)
      }
      // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
            </ul>
          </div>
        )
      }
    }
注意点和别的创建组件一样。

区别和使用场景：

1：如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2：如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

给组件传递数据 - 父子组件传递数据

1： 可以理解为props为从外部传入组件内部的数据。因为react是单向数据流，所以，基本就是props从父级组件向子组件传递数据。
 2：通过this.props来获取传递该组件的所有的数据
 3：props经常被用作渲染组件和初始化状态，它是只读的，不可改变的。

props的默认参数

在组件中，我们为props参数设置一个defaultProps，并且制定它的类型
例如：Item.defaultProps = {
    item: 'Hello Props',
  };
  设置类型
  Item.propTypes = {
    item: PropTypes.string,
  };    
  关于其他的一些类型：
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,       

总结：props是一个从外部传进组件的参数，主要就是从父组件向子组件传递数据。它具有可读性和不变性。

只能通过外部组件传新的props来渲染子组件。否则子组件的props以及展现形式不会改变。

关于state (相当于vue里的data)

通过this.state给组件设定一个初始的state,在第一次render的时候就会用这个数据来渲染。
state是可以改变的，但是是通过this.setState()方法来修改state.
例：componentDidMount(){
fetch('url')
.then(response => response.json())
 .then((data) => {
 this.setState({itemList:item});  
}
}
        当我们调用this.setState方法时，React会更新组件的数据状态state,并且重新调用render方法，也就是对组件重新进行渲染。

注意：

通过this.state=来初始化state，使用this.setState来修改state，constructor是唯一能够初始化的地方。
setState可以传两个参数，
1 setState接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象
2 setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

state总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问              和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

关于state和props的区别

1 state是组件自己管理数据，控制自己的状态，可变
2 props是外部传入的数据参数，不可变；
3 没有state的叫做无状态组件，有state的叫做有状态组件；
4 多用props，少用state。也就是多写无状态组件。