1. create-react-app
React技术依赖于一个很庞大的技术栈：
- 转译js代码需要使用Babel
-
模块打包工具使用Webpack
- 定制build过程需要grunt或者gulp
这些技术栈都需要各自的配置文件，还没有开始写一行React代码，开发人员就已经被各种名词概念淹没了。针对这种情况，React的创建者Facebook提供了一个快速开发React应用的工具create-react-app，这个工具的目的是将开发人员从配置工作中解脱出来，无需过早关注这些技术栈细节，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发。
create-react-app是一个通过npm发布的安装包：
npm install --global create-react-app
安装完成后，你的电脑中就会有create-react-app这样一个可执行命令。
我们在命令行中执行：
create-react-app first_react_app
这个命令会在当前目录下创建一个名为first_react_app的目录，在这个目录中会自动添加一个应用的框架，随后我们只需要在这个框架的基础上修改文件就可以开发React应用，避免了大量的手工配置工作。
在create-react-app命令一大段文字输出之后，根据提示，输入下面的命令：
cd first_react_app npm start
这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开一个网页，指向本机地址http://localhost:3000
React的首要思想是通过组件来开发应用。所谓组件，指的是能完成某个特定功能的独立的、可重用的代码。
2. JSX
JSX：JavaScript eXtension，让我们在js中可以编写像html一样的代码。
1)在JSX中使用的元素不局限于html中的元素，可以是任何一个react组件
2)react判断一个元素是html元素还是react组件的原则就是看首字母是否大写
3. 分解React应用
package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
注意eject命令，它把潜藏在react-scripts中的一系列技术栈配置都弹射到应用的顶层，然后我们可以研究这些配置的细节，而且可以更灵活地定制应用的配置。
npm run eject这个命令会改变一些文件，也会添加一些文件。
应用目录下会增加两个目录scripts和config，同时package.json中scripts部分也发生了变化：
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
}
从此之后start脚本将使用scripts目录下的start.js，而不是node_modules目录下的react-scripts，弹射成功就再也回不去了。
4. 虚拟DOM
react的理念：UI=render(data)
web前端开发关于性能优化有一个原则：尽量减少DOM操作。在react的实现方式中，看起来每次render函数被调用，都要把整个组件重新绘制一次，事实上不是这样，react利用虚拟DOM，让每次渲染都只重新渲染最少的DOM元素。虚拟DOM是对DOM树的抽象，每次自上而下渲染react组件时，会对比这一次产生的虚拟DOM和上一次渲染的虚拟DOM，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分就行。
各种事件->render->虚拟DOM->DOM修改