React介绍以及环境搭建（一）

React介绍以及环境搭建

初识React

1. React出自Facebook的开源项目 ，克服了传统的MVC框架的许多弊端；
2. React完全实现了组件化、模块化的开发模式，其主要思想就是通过组件来开发应用，所谓组件就是完成某个特定功能的、独立的、可重用的代码；
3. React基于JSX语法,JSX是React的核心组成部分，在使用JSX的范围内必须要有React,也就是说，在使用JSX代码的文件中,即使代码中没有直接使用React,也必须引入React，这是因为JSX最终会被转译成依赖于React的表达式。它使用XML标记的方式直接声明界面，Html、js代码混写的模式；
4. React不支持IE8以下的浏览器，适合构建用户的交互组件；
5. 在JSX中使用的"元素"不局限于HTML中的元素，可以是任何一个React组件；React判断一个元素是HTML元素还是React组件的原则：“看第一个首字母是否是大写”
6. React是一个JavaScript语言的工具库，需要安装Node.js，React本身并不依赖于Node.js，但是开发中用到的煮多工具都需要Node.js的支持，安装Node.js的同时也就安装了npm,npm是node.js的安装包管理工具；
7. React的组件可以把Javascript、HTML、CSS的功能组合在一个文件中，实现真正的组件封装；
8. 对于开发者来说，重要的是区分开哪些属于data，哪些属于render，想要更新用户界面，要做的就是更新data，用户界面自然会做出响应，所以React实践的也是“响应式编程”的思想，这也就是React为什么叫做React的原因。

搭建React开发环境之前的准备工作

1. 必须安装nodejs

   注意：安装nodejs稳定版本

2. 安装cnpm用cnpm替代npm

   地址：http://npm.taobao.org/
   安装cnpm命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 用yarn替代npm

   yarn的安装：
   第一种方法：参考官方文档 https://yarn.bootcss.com/　　　
   第二种方法：cnpm install -g yarn 或者 npm install -g yarn

搭建React开发环境

• 方法一：官方文档（https://reactjs.org/docs/create-a-new-react-app.html ）

1. 必须安装nodejs
2. 安装脚手架工具 ，只需要安装一次

npm install -g create-react-app / cnpm install -g create-react-app

注意：create-react-app是一个通过npm发布的安装包，在确认node.js和npm安装好之后，执行 npm install -g create-react-app

3. 创建项目：

找到项目要创建的目录，执行以下命令：
create-react-app reactdemo

5. cd 到项目里面

cd reactdemo
npm start ／ yarn start　运行项目
npm start这个命令会启动一个开发模式的服务器，同时也会让浏览器自动打开一个网页，指向本机地址：localhost:3000/
npm run build ／yarn build 　　生成项目

• 方法二：

1. 必须安装nodejs
2. 安装脚手架工具并创建项目

找到项目要创建的目录执行　　　
npx create-react-app reactdemo

4. cd 到项目里面

cd reactdemo
npm start ／ yarn start　　　　运行项目
npm run build ／yarn build 　　生成项目

npx介绍

npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
详情：http://www.phonegap100.com/thread-4910-1-1.html

npx create-react-app reactdemo

这条命令会临时安装 create-react-app包，命令完成后create-react-app会删掉，不会出现在global 中。下次再执行，还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件。
再比如 npx http-server 可以一句话帮你开启一个静态服务器

Virtual DOM(虚拟DOM)

• React利用Virtual DOM ，让每次渲染都只重新渲染最少的DOM元素。
• Web前端开发关于性能优化有一个原则：尽量减少DOM操作；虽然JSX看起来很像是一个模板，但是最终会被Babel解析为一条条创建React组件或者HTML元素的语句，神奇之处在于，React并不是通过这些语句直接构建DOM树，而是首先构建Virtual DOM。既然DOM树是对HTML的抽象，那Virtual DOM 就是对DOM树的抽象。Virtual DOM不会触及到浏览器的部分，只是在于Javascript空间的树形结构，每次自上而下渲染React组件时，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分就行。
• React利用函数式编程的思想来解决用户界面渲染的问题，最大的优势时开发者的效率会大大提高，开发出来的代码可维护性和可阅读性也大大增强。
• React等于强制所有组件都按照这种由数据驱动渲染的模式来工作。