第一部分：React入门
系列文章目录
第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
一、React是什么？
React官方给出的解释是：React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成赋值的UI界面，这些代码片段被称为“组件”
简单来说：React就是一个JavaScript库，它可以用来构建UI界面，特点是：声明式、高效、灵活
二、React的特点
上面在概念中其实已经提到React的特点：声明式、高效且灵活，那么它的高效灵活具体体现在哪里呢，下面进行详细说明：
- 声明式设计：React采用声明范式，可以轻松描述应用
- 高效：React通过对DOM的模拟（虚拟DOM），最大限度的减小与DOM的交互，也就是说React中有一个虚拟DOM的机制，在操作DOM时一般都是直接操作虚拟DOM来改变真实DOM，从而减少对真实DOM的直接操作，从而提高DOM渲染方面的一些性能
- 灵活：React可以与已知的库或框架很好的配合使用
- JXS语法：jsx是JavaScript语法的扩展，React一般都是配合jsx一起使用
- 组件化：react可以将不同的代码片段组合使用，这些代码片段被称为组件，通过构建组件可以使得代码更容易复用和维护，并能应用在大型项目开发中。
- 单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
三、React的安装及使用
react的使用有以下三种方式：
- 从官网下载react库到本地，然后直接引入使用
- 直接使用CDN地址引入使用
- 搭建本地开发环境，通过npm安装到本地使用（该方法依赖node环境，需要先安装node）
建议使用第三种方式，在日常项目开发中基本上也都是使用的第三种方式。下面我们来简单介绍一下第一和第二种使用方法，然后重点讲解第三种使用方式
- 官网下载react库到本地
官方下载地址：https://reactjs.org/
该方式需要引用三个库：
- react.min.js ：React的核心库
- react-dom.min.js：提供DOM相关功能的库
- babel.min.js：将ES6语法转换为ES5的库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
- 直接使用CDN地址引入
与第一种方式相同：同样需要引入3个库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
- 通过npm安装使用
- 首先要确保已经安装了node环境
- 在国内使用npm速度很慢，建议可以使用淘宝定制的cnpm代替默认的cnpm，这样速度回快很多
- cnpm配置：
npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org这样就可以使用 cnpm install xxx来安装了。
- 要想在本地搭建react的开发环境，首先我们需要通过cnpm来安装react的脚手架（create-react-app），其实就是用来构建react项目的工具包，通过该脚手架我们无需更多配置就可以快速构建React的开发环境
- create-react-app自动创建的项目是基于Webpack和ES6的，命令使用如下：
cnpm install -g create-react-app /*全局安装create-react-app命令*/ create-react-app [project-name] /*项目名称不能是中文*/ cd project-name /*切换的项目目录下*/ npm start /*启动项目， 默认端口是3000*/
- 在浏览器中打开http://localhost:3000就可以浏览项目了
四、项目目录介绍
通过create-react-app创建的react应用会自动帮我们生成一些默认的目录结构，下面我们来一一介绍：
- project-name/ ：项目的根目录
- node_modules：创建项目时自动引入的一些依赖库，这里的文件都是自动生成无需我们手动修改
- public：存放一些不需要被打包压缩的公共资源及用于展示页面内容的HTML页面
- index.html 用于展示整个项目内容的html页面，该页面也是自动生成，一般不需要改动，项目中的入口组件（一般是src/index.js）在打包时会被自动引入到该页面中
- favicon.ico 项目的图标文件
- manifest.json 这个文件具体是干什么的也不太清楚，尝试改了里面的一些内容发现也没什么变化。官方给出的解释是：当你的web应用被安装到移动设备或桌面时，提供一些元数据。
- src：这个目录自动生成且不能修改，一般我们在手动写的代码都是放在这个目录下的
- index.js 这个文件也是必须存在的，这个是项目打包时的入口文件，后续所有的组件的引入都会直接或间接依赖这个文件
- 其它文件或目录结构在这里可以随便使用或更改
- package.json：这个是整个项目的配置文件，我们安装的所有依赖库都会在这里体现，包括我们上面通过 npm start启动项目的配置也是在这里配置的
- README.md 项目的说明文件
- scripts 脚本文件目录，比如存放启动项目或打包项目的脚本文件
- start.js 启动项目的脚本文件，比如我们运行 npm start时就会通过配置文件找到该目录下的该文件
- build.js 打包项目的脚本文件，比如我们运行 npm run build打包时就会通过配置文件找到该目录下的该文件
五、总结
- 通过本节学习我们了解了什么是react及react的特点
- react安装和使用的三种方式
- 重点介绍了react脚手架（create-react-app）的安装，以及通过脚手架来创建react项目
- 通过脚手架创建的项目目录结构介绍
下一章节我们将会讲解JSX的使用