React—01—基本学习，如何在html中直接使用react；
一、react的特点:
React 组件是返回标签的 JavaScript 函数：
哪个组件是通过改变 state 实现可响应的，或者哪个组件拥有 这个 state。
然后我们需要确定吧这个state是放在这个组件，还是放在父组件（如何多个子组件都会受到相同state影响，那么需要放到父组件里统一管理）。
二、如何在html里使用jsx
◼ 开发React必须依赖三个库：
react：包含react所必须的核心代码
react-dom：react渲染在不同平台所需要的核心代码，，在web端或者native端，这个库干的事不一样。
babel：将jsx转换成React代码的工具
◼ 第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西： （直接放弃？）
对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包。
其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里；
◼ 为什么要进行拆分呢？原因就是react-native。
react包中包含了react web和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同：
✓ web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
✓ native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。
◼ babel是什么呢？
Babel ，又名 Babel.js。
是目前前端使用非常广泛的编译器、转移器。
比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。
◼ React和Babel的关系：
默认情况下开发React其实可以不使用babel。
但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。
<script>标签这里要加一个“text/babel”，babel才知道这个<script>标签里要解析js代码，否则babel不会启动。
我们想做一个点击按钮改变文字的demo，用react可以这样做：
由于react没有vue的响应式更新，所以需要重新加载一下render（）函数；
2.3react的组件化开发
（1）组件结构
◼ 整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：
我们说过root.render 参数是一个HTML元素或者一个组件；
所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；
◼ 在React中，如何封装一个组件呢？这里我们暂时使用类的方式封装组件：
1.定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component，这样它既是一个类，又是一个react组件。
2.实现当前组件的render函数
✓ render当中返回的jsx内容，就是之后React会帮助我们渲染的内容
（2）组件的数据定义在那？
◼ 组件化问题一：数据在哪里定义？
◼ 在组件中的数据，我们可以分成两类：
参与界面更新的数据：当数据变量时，需要更新组件渲染的内容；
不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容；
◼ 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
我们可以通过在构造函数中 this.state = {定义的数据}
当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且自动通知React进行update操作（类似vue的响应式了），会重新加载一遍render函数；
✓ 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
三、如何通过脚手架启动一个react项目：
旧的方式：
-
先全局安装脚手架工具包
命令：
npm i -g create-react-app -
用脚手架工具来创建项目
命令：
create-react-app+ 项目名称 或者使用命令：npx create-react-app+ 项目名称
新的方式：
- 使用next.js框架：npx create-next-app
