详解开发react应用最好用的脚手架 create-react-app

React脚手架概述

1. 介绍

在开发React应用时，传统方式通常涉及手动引入React源文件（JS）并在HTML中进行编辑，这种做法已逐渐被淘汰。

目前主流的开发模式是采用Webpack结合ES6语法来构建前端应用。

在此背景下，开发者可以手动使用npm安装各类插件，从零开始搭建开发环境。

例如：

npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g

虽然手动搭建环境是一个很好的学习过程，但初学者常会遇到各种棘手问题。此外，每次开发新应用都需重复搭建环境，过程繁琐且效率低下。

为了解决这一问题，社区基于经验和最佳实践开发了多种脚手架工具，旨在避免重复造轮子，节省开发时间。

经过筛选，网络上关注度较高且使用广泛的脚手架主要有以下三个：

1. react-boilerplate
2. react-redux-starter-kit
3. create-react-app

这三个工具在GitHub上的Star数量均非常高。截至文章撰写时，其Star数对比如下：

数据显示，使用这三款脚手架的用户群体庞大，其中create-react-app的表现尤为突出。

尽管create-react-app的开发时间晚于前两者，但其关注度却远超它们，且由Facebook官方开发。

这足以证明其产品的优秀品质。

接下来，我们将详细介绍该工具的核心特点。

create-react-app核心特点

2. 特点

该工具具备诸多优势，首先从安装和使用流程说起。

安装与使用

2.1 简单的安装使用

create-react-app的安装过程极其简便，仅需一条命令即可完成。与其他需要克隆整个脚手架源码并在此基础上修改的工具相比，它更加便捷。

npm install -g create-react-app

安装完成后，生成新项目可使用以下命令：

create-react-app my-app
cd my-app/

这将创建my-app目录。随后，使用以下命令即可启动应用开发：

npm start

默认情况下，工具会在开发环境下启动服务器，监听3000端口，并自动打开浏览器展示应用效果。

整个过程是否足够简单？

源码结构与热更新

2.2 源码结构简单清晰

在项目my-app目录中，源码结构非常清晰，没有任何冗余文件。

目录结构清爽，所有源码均放入src目录下。开发者无需关心配置文件等复杂细节，只需专注于开发，create-react-app会自动处理相关配置。

整体源码简洁、小巧且易于管理。

如果你曾使用webpack-dev-server或webpack搭建开发环境，会发现create-react-app具备类似webpack-dev-server的--inline --hot自动刷新功能。

具体含义是什么？

即当源码文件更新并保存后，浏览器会自动刷新，实时展示修改效果。

探究其原理，难道create-react-app也使用了webpack-dev-server？

检查源码后，并未找到webpack.config.js文件。若使用了webpack，理应存在该文件，这显得颇为奇怪。

查看node_modules目录，也未发现webpack相关配置。

从入口入手，项目通过npm start命令运行。

因此从package.json文件入手，其内容如下：

注意到这行代码：

"start": "react-scripts start"

react-scripts又是什么？

在node_modules目录中可以找到它，它确实依赖了多个工具，其中包括'webpack'。

其中包含webpack配置文件及多个脚本文件。

原来它是Facebook开发的一个管理create-react-app服务的工具。

这也解释了为何源码结构如此整洁。

它隐藏了不必要的文件，因为大多数人的配置需求相似。

此外，它还集成了eslint功能，让开发者在开发过程中更专注于代码本身。

生产环境编译

2.3线上编译命令

这是create-react-app的一大亮点，它能将应用编译为适用于生产环境的代码。编译后的文件体积小，且文件名包含hash值，便于缓存管理。同时，它提供本地服务器，模拟线上生产环境效果，极大提升了便利性。

只需执行一行命令：

npm run build

运行以下两条命令，可查看线上生产环境的运行效果：

npm install -g pushstate-server
pushstate-server build

编译生成的文件均存放于build目录中。

API代理配置

2.4 api开发

在开发React应用时，不可避免地与服务器进行数据交互，即涉及API调用。

此时会出现一个问题。

API所在的服务器可能与React应用完全分离，且开发环境与线上环境存在差异。

例如，开发环境中React应用运行在3000端口，而API服务可能运行在3001端口。此时，若使用fetch或各类请求库（如jQuery的ajax）与API服务器交互，可能会遇到跨域资源共享（CORS）问题。

而在线上环境中，由于React应用和API应用运行在同一端口，通常不会出现此问题。

以往解决此问题的方法可能涉及环境变量，例如：

const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'

然而，这种方式较为复杂。create-react-app提供了一种更简单的方法，只需在package.json文件中添加一个配置项即可。

例如：

"proxy": http://localhost:3001/,

无论使用何种HTTP请求库，均无需修改代码。该选项仅对开发环境有效，线上环境仍保持React应用和API应用在同一端口。

鉴于以上诸多优点，你还有理由不使用它吗？

完结。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。