React简介

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修改