基本介绍

学完之后再去学RN就会很简单了。编程思维类似。

这是官网：reactjs.org/

建议看英文版。React16称为React Fiber。事件循环加入了碎片时间的概念，利用好碎片时间提高用户体验

这里我们使用的是16.3.2版本。

React灵活性好，处理复杂业务时候技术方案可选的比较多。

Vue提供了很多API，所以开发很方便，但是相对的灵活度比较小，不容易自定义。

环境准备

1. 开发环境准备

第一种方法非常古老，通过script标签来引入React的JS文件，目前很少使用，大型项目也不容易拆分。

第二种通过脚手架工具（脚本化帮助构建应用和目录）进行编码，编译也依赖脚手架，编译完成之后才可以被浏览器识别。

1.1 脚手架

可以通过很多工具来帮助我们搭建脚手架，但是这个很复杂不在课程叙述中。我们也不需要关注脚手架的底层实现。

关于React的脚手架其实非常多，我们推荐使用官方的脚手架：create-react-app

下面来安装这个脚手架：

首先我们来安装node.js，里面包含了包管理工具npm。之后可以输入：

node -v

npm -v

来看看版本有没有安装成功。

接着我们安装脚手架，命令在上面。进入一个目录基于脚手架来新建一个React工程。

2. 工程目录简介

yarn.lock：项目依赖的安装包以及版本号，不要动

README：项目说明文件，可以全部删除，自己通过markdown来写介绍

package.json：项目的配置信息，包括名称，版本号，依赖，内部脚本等等。主要是node的内容，可以让项目变成node的包，一般也不会去修改。

gitgnore：不想要上传Git的文件。

node_modules：项目依赖的第三方包，不需要动，第三方模块

2.1 public目录

favicon.ico就是网页上面的小Icon

index.html是首页的模板，注释是帮助你理解的，全删掉其实没啥东西

主要是head的设置。

noscript标签是当用户关闭JS的时候显示的时候，容错的代码。

唯一展示内容的就是一个div标签。

manifest.json

我们需要先看一下下面了解ServiceWorker和PWA概念，这个manifest是说可以把一个网址设置为一个手机桌面快捷图标，那么快捷方式具体定义就在这里了--不用PWA这个也是不需要的

2.2 src目录

index.js

整个程序运行的入口文件，引入了React这个包，脚手架已经安装好了React可以直接使用。

引入的css文件下面说明。

引入了一个App，这个是引入了一个模块相当于在一个js引入另一个js文件，其实是引入的App.js文件，这个脚手架会自动补全。

引入了一个ServiceWorker，这个一个新的概念（PWA-progressive web application），通过写网页形式来写App应用，我们写了一个网页，上传到一个支持https的服务器上，访问完网页之后断网了，第二次仍然可以看到访问的页面，因为SW帮助把网页存储到浏览器之内！---目前的项目暂时不需要PWA的效果，所以这段是不需要的。了解一下。

index.css

React推荐css和html都写在js中，这个是一种编码方式，所以JS才可以引用外部的CSS文件！这个也就是初始页面使用的样式文件，初始内容其实非常少。

App.js

可以看到这个文件引入了React和Component，此外还引入了一个logo.svg图片文件。就是上面旋转的文件。

这个logo文件和引入都可以删除掉一开始。

这个引入央视和css文件也可以删除掉，页面就没有样式了。

我们可以将这一段HTML代码修改：

App.test.js

自动化测试文件，可以做测试，目前暂时不涉及