介绍
在前端开发中，我们经常会用到 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：
--- ------- -- ----------------
使用
在安装完成后，我们可以通过以下命令创建一个 React.js 项目：
---------------- ------ -- ------ --- -----
运行以上代码后，我们可以在浏览器中输入 http://localhost:3000，查看项目运行情况。
文件结构
创建项目后，我们会发现已经为我们生成了如下的文件结构：
-------
---------
-------------
------------
-------
----------
-----------
----
-------
------
-----------
---------
--------
--------其中，public 目录下存放的是一些静态资源，例如 HTML 文件、图片等。src 目录下存放的是源代码文件，其中 index.js 是项目入口文件。
脚本命令
在 package.json 文件中，我们可以看到一些脚本命令：
-
---------- -
-------- -------------- ------- -- --------------
-------- -------------- ------- -- ------
------- -------------- ------ -- ------
-------- -------------- ------ -- ----------------
-
-通过这些脚本命令，我们可以快速进行本地开发、打包发布以及测试等操作。
示例代码
下面是一个简单的 React.js 代码示例：
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
------------------- -
---------------------- ------
-
---- - -- -- -
---------------
------ ---------------- - -
---
-
-------- -
------ -
-----
------------
-------------------------
------
--
-
-
------ ------- ----在以上代码中，我们定义了一个计数器组件，每当组件被挂载时，就会开启一个定时器，每隔一秒钟计数器就会增加 1，实现了一个简单的计数器功能。
总结
通过本文的介绍，我们了解了如何使用 npm 包 the-react-scripts 快速搭建 React.js 项目，并了解了项目文件结构、脚本命令以及一个简单的 React.js 代码示例。希望本文能够为广大前端开发人员提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79034