2.4 create-react-app

现在的前端项目功能越加复杂，或者说已经是一个运行在Web端的应用了。功能多了之后，不可避免地会产生一堆逻辑复杂的JS代码，以及相关的依赖包。为了降低开发的复杂程度，涌现了很多好的解决方法。

1）模块化开发。

2）Less、Sass等CSS语法扩展。

3）TS等JS语法扩展。

但是这些新的方法，要么需要进行编译，要么有大量的依赖需要进行管理，包括在真实上线的时候，还需要对代码进行打包。开发者在面临这些需求时，需要很多工具来完成代码编译、依赖管理以及打包合并，而webpack就是目前最热门的一款工具。它可以帮助开发者非常好地管理生产环境以及开发环境中的各种依赖，并且可以帮助开发者进行后期的打包合并。webpack的相关配置相对复杂，对于初学者来说可以基于一个现成的例子先快速上手。create-react-app是官方支持的一个React脚手架，它可以帮助开发者快速构建一个React程序。

2.4.1 安装create-react-app

create-react-app现在已经有多个版本，本书基于当下的最新版本3.4.1来进行相关讲解。在安装create-react-app之前，用户确保在计算机上已经正确安装了node.js环境。

不知道计算机是否安装了node的读者可以打开命令行，输入命令node-v。如果可以看到版本号就说明计算机中已经安装了node。没有安装node的读者，可以访问node.js官网或中文网http://nodejs.cn，根据自己的操作系统进行下载。

安装好node之后，就可以进行create-react-app的安装。打开命令行工具，输入命令npm i create-react-app-g，就可以快速安装create-react-app了。安装完成之后，输入命令npm i create-react-app-V后按Enter键，可以看到版本号，就说明create-react-app安装成功了。

2.4.2 项目构建和启动

安装好create-react-app之后，就可以利用它来构建项目了。在存放项目的文件目录下打开命令行工具，输入命令create-react-app my-app。运行命令成功之后，会在当前目录创建一个名为my-app的子目录。

注：my-app是自定义的名字，用户可以把它定义成自己想要的名字，但不要用中文。

打开my-app目录，可以看到以下结构：

简单的介绍一下这些文件，本书后文中有专门的工程化章节，这里就不对整个环境详细展开介绍了。

1）README.md，这个文件用于编写项目介绍使用，初学者可以跳过。

2）node_modules，在项目中安装的依赖都会放在这个文件夹下。

3）package.json，是整个项目的描述文件，里边有两块内容这里详细说一下。

①dependencies项目安装的依赖名称及版本信息。可以看到在构建完的项目中，已经帮开发者安装好了一些基本的依赖：＂react＂:＂^16.13.1＂，＂react-dom＂:＂^16.13.1＂，＂react-scripts＂:＂3.4.1＂。react和react-dom不需要再复述了。react-scripts是什么？create-react-app会把webpack、Babel、ESLint配置好合并在一个包里，方便开发人员使用，这个包就是react-scripts。

②scripts中定义的是在命令行工具中可以使用到的一些命令。在当前目录my-app中，启动命令行工具，一起来测试一下这些命令。

● npm start。这个命令用于启动项目。create-react-app内置了一个热更新服务器，项目启动之后，默认会打开http://localhost:3000，运行项目。

● npm test。这个命令用于项目测试，测试相关的内容在“第7章工程化配置”中会详细介绍。

● npm run build打包命令。该命令会将项目中的代码打包编译到build文件夹中，它会将React正确地打包为生产模式中需要的代码并优化构建以获得最佳性能。将来要把项目发布在生成环境的时候，只需要把build文件夹的内容发布上去即可。

● npm run eject。该命令会把项目所有配置文件暴露出来，用于对项目构建重新配置。但该命令是单向操作，不建议初学者使用。

4）.gitignore文件。该文件的内容用于描述项目中哪些文件不需要添加到git管理中。

5）public文件夹。用来存放html模板。public文件夹中的index.html就是项目的html模板，不建议读者修改名字，否则需要重新配置html文件。

6）src文件夹。该文件夹中index.js是整个项目的入口文件。为了加快重新构建的速度，webpack只处理src中的文件。注意要将JS和CSS文件放在src中，否则该文件不会被webpack打包。

关于create-react-app的使用先说到这里，对于初学者来说，在这个阶段可以安装脚手架npm i create-react-app-g、可以利用脚手架构建项目create-react-app＜项目名称＞、可以正常启动项目npm start、可以知道React所有的代码都写在src目录中就够了。关于create-react-app更高级的用法，可以在学完工程化内容之后再来探索。

2.4.3 项目入口文件

打开create-react-app构建好的项目，打开src文件夹，在这个文件夹中，可以看到很多文件，删除index.js和App.js以外的文件。

打开index.js，把多余的代码删除，只留下以下内容：

然后打开App.js，修改为以下内容：

现在有了一个最基础的React项目，index.js作为项目的入口文件，对项目进行配置，如后期学到的router和redux，App.js中的App组件则作为项目的入口组件，在App中开始写项目的正式内容。

2.4.4 React.StrictMode

StrictMode是用来检查项目中是否有潜在风险的检测工具，类似于JavaScript中的严格模式。StrictMode跟Fragment类似，不会渲染任何真实的DOM。只是为后代元素触发额外的检查和警告。

StrictMode可以在代码中的任意地方使用，当然也可以直接用在index.js中，开启全局检测。除上述描述的特征外，StrictMode检查只在开发模式下运行，不会与生产模式冲突。具体来看一下StrictMode都能进行哪些检测。

1）识别具有不安全生命周期的组件。

2）有关旧式字符串ref用法的警告。

3）关于已弃用的findDOMNode用法的警告。

4）检测意外的副作用。

5）检测遗留的context API。

在StrictMode模式下，如果检测到代码有以上问题，React会在控制台中打印出相应的警告。