在前端开发中，React 已经成为了不可忽视的一部分。而如何编写 React 应用程序呢？awesome-react-app 成为了解决这个问题的一个 npm 包，提供了许多默认的应用程序结构和工具，将您的开发体验提高到一个完全新的水平。
安装和使用
awesome-react-app 是一个 npm 包，所以您需要在安装前确保您已经安装了 Node.js 和 npm。一旦您确认已经安装了这些软件，您只需要在终端中执行以下命令：
npm install -g awesome-react-app
这个 -g 参数将帮助您将 awesome-react-app 安装成全局命令，这样您就可以在任何位置运行它了。在安装成功后，您就可以使用 awesome-react-app 命令来创建新的 React 应用程序了。
awesome-react-app my-app
这个命令会在您的当前目录中创建一个名为 my-app 的文件夹，并将所有的文件、文件夹和工具都放到这个目录中。您可以更改 my-app 的名称以创建一个命名您自己应用程序的目录。
应用程序结构
awesome-react-app 提供了一个默认的应用程序结构，这个结构将帮助您开始编写 React 应用程序。以下是默认的应用程序结构：
-- -------------------- ---- -------
-------
---------
-------------
------------
-------
----------
-----------
----
------
-------
-----------
--------
--------
----------------让我们来看看这个结构中的每个部分。
README.md
这是您的应用程序的默认文档。您可以在这个文件中记录您的应用程序的相关信息。
node_modules/
这个文件夹包含了您应用程序中使用的所有 npm 包。
package.json
这是包含您应用程序相关信息的一个文件，比如名称、版本等等。您还可以在这个文件中指定应用程序的依赖和脚本。
public/
这个文件夹包含了所有需要在您的应用程序中使用的公共文件，比如 HTML 文件和图标文件。
src/
这个文件夹包含了应用程序的所有源代码。您需要在这里编写您的 React 组件并构建您的应用程序。
应用程序运行
awesome-react-app 还提供了几个内置的命令来帮助您快速开发您的应用程序。下面是几个常用的命令：
npm start
这个命令将启动您的应用程序并在默认浏览器中打开它。每次您修改您的代码时，页面将自动刷新。
npm test
这个命令将运行应用程序的测试套件，并显示测试结果。
npm run build
这个命令将构建您的应用程序，并生成一个优化过的版本。这个版本将被存储在 build/ 目录中。
应用程序示例
以下是一个使用 awesome-react-app 创建的示例应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- -------------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----这是一个非常简单的应用程序，它只是显示了一个包含 React 图标的欢迎页。您可以根据您的需要修改这个组件以创建一个完全不同的应用程序。
结论
awesome-react-app 是一个很好的工具，可以帮助您快速开始编写 React 应用程序。它提供了一个默认的应用程序结构和工具，使得您的开发工作更加容易和高效。希望这篇文章对您在使用 awesome-react-app 方面有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5181e8991b448e5d25