React js教程：React 中的文件夹结构（2）
本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接
介绍
创建 React 应用程序
为了创建一个 React 应用程序，我们将使用React 提供的create-react-app node_module。这有助于我们自动创建一致的文件夹结构，因此我们无需关心正确有效的文件夹结构。对于这个演示，我将使用 Visual Studio Code。
打开 Visual Studio Code > 转到终端 > 打开新终端。
在终端中写入以下命令并按 Enter。
npx create-react-app ReactDemo
成功创建 React 应用程序后，您可以使用“cd reactdemo”命令导航到 React 应用程序。要开始运行 React 应用程序，请使用以下命令。
npm start
创建 React 应用程序后，我们会注意到在终端中，它提供了有助于执行 React 应用程序的快速提示或命令。例如 –
- npm start – 此命令将启动开发服务器。
- npm run build – 将应用程序捆绑到用于生产的静态文件中。
- npm test – 启动测试运行程序。
- npm run object – 删除此工具并将构建依赖项、配置文件和脚本复制到应用程序目录中。
“npm start”命令后，它将在浏览器中打开端口号为 3000 的应用程序。
文件夹结构
React 应用程序会自动创建所需的文件夹，如下所示。
.gitignore – 此文件是源代码控制工具 git 使用的标准文件，用于识别在提交代码时需要忽略哪些文件和文件夹。除非此文件存在，否则 create-react-app 命令不会在此文件夹中创建 git repo。
package.json – 此文件包含项目所需的依赖项和脚本。
该文件包含 React 应用程序的所有设置，包括：
- name – 指向您的应用程序的名称。
- version – 指的是应用程序正在使用的当前版本。
- “private”: true – 是一个万无一失的设置，可避免您的 React 应用程序意外发布为 npm 生态系统中的公共包。
- 依赖项将包含应用程序所需的所有必需节点模块和版本。默认情况下，添加了 2 个依赖项，包括允许使用 JavaScript 的 React 和 React-Dom。在我们的演示中，我们使用的是 React 16.8 版。
- 脚本指定可用于以更有效的方式访问某些 React 命令的别名。
- package-lock.json 包含要安装在 /node_modules 中的确切依赖树。当团队正在开发私有应用程序时，它有助于确保他们正在处理相同版本的依赖项和子依赖项。它还维护 package.json 中所做更改的历史记录，以便在任何时间点，需要时可以在 package-lock.json 文件中查看以前的更改。
- node_modules – 此文件夹包含 React 应用程序使用的 package.json 中指定的所有依赖项和子依赖项。它包含 800 多个子文件夹，此文件夹会自动添加到 .gitignore 文件中。
- public – 该文件夹包含不需要 webpack 额外处理的文件。index.html 文件被视为 Web 应用程序的入口点。这里，favicon 是一个标题图标，manifest.xml 文件包含您的应用程序用于 Android 应用程序时的配置。
- src – 这个文件夹是 React 应用程序的核心，因为它包含需要由 webpack 处理的 JavaScript。在这个文件夹中，有一个主要组件App.js，它的相关样式（App.css），测试套件（App.test.js）。index.js 及其样式 (index.css)；它提供了一个进入应用程序的入口点。最后，它包含 registerServiceWorker.js，它负责为最终用户缓存和更新文件。它有助于离线功能和第一次访问后更快的页面加载。
毕竟，我们在 src 中添加 /Component 文件夹以添加我们的自定义组件及其相关文件和 /Views 文件夹用于添加 React 视图及其相关文件。
概括
在本文中，我们学习了使用create-react-app创建一个 React 应用程序，并创建了它的文件夹结构。在下一篇文章中，我们将介绍组件的基础知识及其在 React 应用程序中的类型和用法。如果您有任何问题或反馈，请随时在评论部分提及。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
