介绍
在前端开发中，我们经常会用到 React.js，搭建 React.js 项目时需要进行一些配置，比如说 Babel，Webpack 等等。这些配置不但烦琐，而且容易出错。为了解决这个问题，Facebook 推出了一个 npm 包：the-react-scripts。通过使用这个 npm 包，我们可以快速搭建一个 React.js 项目，省去了繁琐的配置过程。
安装
在使用 the-react-scripts 之前，我们需要先安装 Node.js 和 npm。安装方法可以参考官方文档：https://nodejs.org/zh-cn/download/。
安装 Node.js 和 npm 后，在命令行中执行以下命令安装 the-react-scripts：
npm install -g create-react-app
使用
在安装完成后，我们可以通过以下命令创建一个 React.js 项目：
create-react-app my-app cd my-app npm start
运行以上代码后，我们可以在浏览器中输入 http://localhost:3000，查看项目运行情况。
文件结构
创建项目后，我们会发现已经为我们生成了如下的文件结构：
-- -------------------- ---- ------- ------- --------- ------------- ------------ ------- ---------- ----------- ---- ------- ------ ----------- --------- -------- --------展开代码
其中，public 目录下存放的是一些静态资源，例如 HTML 文件、图片等。src 目录下存放的是源代码文件，其中 index.js 是项目入口文件。
脚本命令
在 package.json 文件中，我们可以看到一些脚本命令：
{ "scripts": { "start": "react-scripts start", // 启动本地服务器，用于开发调试 "build": "react-scripts build", // 打包发布代码 "test": "react-scripts test", // 运行测试用例 "eject": "react-scripts eject" // 暴露配置文件，用于项目自定义配置 } }
通过这些脚本命令，我们可以快速进行本地开发、打包发布以及测试等操作。
示例代码
下面是一个简单的 React.js 代码示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ------ - -- - ------------------- - ---------------------- ------ - ---- - -- -- - --------------- ------ ---------------- - - --- - -------- - ------ - ----- ------------ ------------------------- ------ -- - - ------ ------- ----展开代码
在以上代码中，我们定义了一个计数器组件，每当组件被挂载时，就会开启一个定时器，每隔一秒钟计数器就会增加 1，实现了一个简单的计数器功能。
总结
通过本文的介绍，我们了解了如何使用 npm 包 the-react-scripts 快速搭建 React.js 项目，并了解了项目文件结构、脚本命令以及一个简单的 React.js 代码示例。希望本文能够为广大前端开发人员提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79034
