React起手式

知识铺垫

React的引入

CDN引入React
1. 在JS文件中引入React需要引入2个库，react和react-dom，而且必须先引入react。
2. 成功引入后我们将拥有一些新的全局变量，我们可以同过console这些变量来确定我们是否成功引入了React：
  - React
  - React.createElement
  - ReactDOM
  - ReactDOM.render

通过Webpack引入

$ yarn add react react-dom // 安装
import React from 'react' // 引入react
import ReactDOM from 'react-dom' // 引入react-dom

这个方法适合经验老道的前端，更加灵活同时也更加复杂。

通过React提供的create-react-app创建项目
1. create-react-app是一个创建React项目的工具，使用它创建了React项目后，就相当于已经安装了React所需要的其他loader，只需要import进JS文件就能够使用了。
2. ```
$ yarn globle add create-react-app // 引入工具
$ create-react-app [项目名] // 创建react项目
```
3. 成功创建React项目后，终端会显示几个命令，可以快速实现build、server的功能。
React元素、React组件和虚拟DOM
1. React元素和React组件本质上是一个东西，但是形式上不一样。
2. 通过React.createElement创建的元素就是React元素，React元素并不是真正的元素（DOM对象），所以我们一般称React元素为虚拟DOM对象，简称虚拟DOM。为什么要使用虚拟DOM？因为React是JS层面的，如果每次操作DOM都要通过另外一个线程去操作DOM效率会非常低下，在JS中使用虚拟DOM来模拟DOM对象，最后再渲染到页面上更加地效率。
3. React组件的形式则函数返回一个React元素：()=>React.createElement
JSX
1. JSX的概念
  - JSX的意思就是React定义的JS的拓展语法，因为原生的React语言非常复杂难用，所以React拓展了JS语法，简化原生的React的JS语言，然后同loader转换成原生的JS是其得以运行。让我们能够使用简单的代码完成复杂的操作。
2. JSX与webpack中的loader
  - Vue可以通过vue-loader将 .vue 文件中的内容（template script style）转义成构造选项；同样React也有loader。最初叫JSX-loader，后来因为开发者的工作合并关系，babel-loader集成了JSX-loader的功能，而babel-loader在webpack中是内置的loader。
3. JSX的引入
  - CDN引入JSX
    1. 引入babel.js文件
    2. script标签使用 <script type='text/babel'>
    3. 实际使用效率低下：用户不仅需要下载babel.js这个库，还需要在浏览器中等待babel.js把JSX翻译成JS。但实际上开发者更愿意把这些繁琐的事情放到开发阶段。
  - webpack+babel-loader创建项目
    1. 适合自定义配置webpack的开发者，比较复杂
  - create-react-app创建项目
    1. 我们可以直接在js文件中使用JSX语法，因为webpack默认让JS走了babel-loader
4. JSX的使用注意点
  
  JSX是JS的拓展语法：
  1. class 要写成 className
  2. 要使用{}包裹一切JS变量、函数等JS语句{ n }、 { {a : 1} }、 { ()=>{n += 1} }
  3. 函数return的时候把返回的内容全部用()包裹起来，如果 return 那行没有其他内容的话，JS会默认return undefined，这是JS的一个bug。

React起步

React起手式

知识铺垫

React的引入