初识Reactnative端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iO

React是什么
官方解释：用于构建用户界面的 JavaScript 库
React特点
- 声明式编程
  它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；
- 组件化开发
  可以将一个复杂的界面拆分成一个一个小的组件
- 多平台适配
  1. Web开发
  2. ReactNative用于开发移动端
  3. ReactVR用于开发虚拟现实Web应用程序
React开发依赖
1. react：包含react所必须的核心代码
  包含了react和react-native所共同拥有的核心代码
2. react-dom：react渲染在不同平台所需要的核心代码
  - web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
  - native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。
3. babel
  是目前前端使用非常广泛的编辑器、转移器
  - 可以将ES6转成大多数浏览器都支持的ES5的语法
  - 将jsx转换成React代码的工具
事件绑定中的this指向
默认情况下会指向undefined
首先第一点我们知道在正常DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象），但是React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象，所以react给我们的函数绑定的this，默认情况下就是一个undefined；
修改this指向方法：
1. 传入函数时，给这个函数直接绑定this如下
```
<button onClick={this.changeText.bind(this)}>改变文本</button>
```
1. 箭头函数

简单的React Demo示例

<!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>

 <body>

   <div id="app">
   </div>

   <!-- 添加React的依赖 -->
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

   <!-- 开始开发 -->
   <!-- 注意事项: 使用jsx, 并且希望script中的jsx的代码被解析, 必须在script标签中添加一个属性  -->
   <!-- jsx特点: 多个标签最外层(根)只能有一个标签 -->
   <script type="text/babel">
     let message = "Hello World";

     function btnClick() {
       message = "Hello React";
       console.log(message);
       render();
     }

     // <h2></h2>: jsx代码
     function render() {
       ReactDOM.render(
         <div>
           <h2>{message}</h2>
           <button onClick={btnClick}>改变文本</button>
         </div>,
         document.getElementById("app")
       );
     }

     render();
   </script>

 </body>

 </html>

简单的组件化Demo示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
  </div>

  <!-- 添加React的依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 开始开发 -->
  <script type="text/babel">
    // 封装App组件
    // 类名大写，组件的名称是必须大写的，小写会被认为是HTML元素
    class App extends React.Component {
      constructor() {
        super();
        // this.message = "Hello World";
        // 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
        // 我们可以通过在构造函数中 this.state = {定义的数据}
        // 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作
        // 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
        this.state = {
          message: "Hello World"
        }
      }

      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.btnClick.bind(this)}>改变文本</button>
          </div>
        )
      }

      btnClick() {
        // this.message = "Hello React";
        // this.state.message = "Hello React";
        // console.log(this.state);
        this.setState({
          message: "Hello React"
        })
      }
    }

    // 渲染组件
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>

</body>

</html>

初识React

React是什么

React特点

React开发依赖

事件绑定中的this指向

简单的React Demo示例

简单的组件化Demo示例