推荐学习：

• React 官方文档：
  https://react.docschina.org/

• React 菜鸟教程：
  https://www.runoob.com/react/react-tutorial.html

关于React

特点

描述

库

React 是一个用于构建用户界面的 JavaScript 库

声明式设计

采用声明范式，可以轻松描述应用

高效

通过对 DOM 的模拟，最大限度地减少与 DOM 的交互

灵活

可以与已知的库或框架很好地配合

JSX

JSX 是 JavaScript 语法的扩展，建议使用

组件

通过 React 构建组件，使得代码更加容易得到复用

单向响应的数据流

减少了重复代码，比传统数据绑定更简单

安装

npm install -g create-react-app

Create React App 是来自于 Facebook的一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式，通过该命令我们无需配置就能快速构建 React 开发环境。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。

create-react-app 自动创建的项目是基于 Webpack + ES6。
执行以下命令创建项目：

npx create-react-app my-app
cd my-app
npm start

创建完成是这样的：

我们的大部分操作都将会在 src 文件夹中进行；

了解各个文件的作用

文件

作用描述

README.md

项目的说明文件，会在 github 上显示

package.json

第三方包管理工具和配置文件

package-lock.json

锁定安装时的版本号，版本控制文件

.gitignore

git 的选择性上传的配置文件

node_modules 文件夹

我们项目依赖的第三方包，一般不用动

public 文件夹

公共文件，里面有一些公用模版和图标等。

文件

作用描述

favicon.ico

标签的图标

index.html

模版文件，有 title 以及 noscript 设置

manifest.json

移动端的配置

src 文件夹

主要工作，是一个项目工程目录，很重要

文件

作用描述

index.js

入口文件

index.css

是 index.js 的 CSS 文件

APP.js

相当于一个方法模块，简单的模块化编程

serviceWorker.js

用于写移动端开发的，PWA 相关技术，实现离线浏览功能

logo.svg

图片技术

关于上面提到的 PWA

PWA全称Progressive Web App，即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用，随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

解决的问题：

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；
• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
• 实现了消息推送

它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生 App。