React js教程:React 中的文件夹结构(2)

作者 : 慕源网 本文共1926个字,预计阅读时间需要5分钟 发布时间: 2021-10-25 共402人阅读

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

上一篇文章中,我们了解了 React.js 的一些基础知识。我们看到了如何安装 React js 并设置环境。在本文中,我们将讨论在 React 应用程序创建过程中创建的文件夹结构以及一个简单的演示。

创建 React 应用程序

为了创建一个 React 应用程序,我们将使用React 提供的create-react-app node_module。这有助于我们自动创建一致的文件夹结构,因此我们无需关心正确有效的文件夹结构。对于这个演示,我将使用 Visual Studio Code。

打开 Visual Studio Code > 转到终端 > 打开新终端。

在终端中写入以下命令并按 Enter。

npx create-react-app ReactDemo

执行该命令后,需要一些时间来创建 React 应用程序及其相关依赖项。

成功创建 React 应用程序后,您可以使用“cd reactdemo”命令导航到 React 应用程序。要开始运行 React 应用程序,请使用以下命令。

npm start

创建 React 应用程序后,我们会注意到在终端中,它提供了有助于执行 React 应用程序的快速提示或命令。例如 –

  • npm start – 此命令将启动开发服务器。
  • npm run build – 将应用程序捆绑到用于生产的静态文件中。
  • npm test – 启动测试运行程序。
  • npm run object – 删除此工具并将构建依赖项、配置文件和脚本复制到应用程序目录中。

“npm start”命令后,它将在浏览器中打开端口号为 3000 的应用程序。

现在,打开 App.js 并将代码更改为“Hello world”并刷新浏览器。它将在屏幕上显示“Hello world”。

文件夹结构

React 应用程序会自动创建所需的文件夹,如下所示。

.gitignore – 此文件是源代码控制工具 git 使用的标准文件,用于识别在提交代码时需要忽略哪些文件和文件夹。除非此文件存在,否则 create-react-app 命令不会在此文件夹中创建 git repo。

package.json – 此文件包含项目所需的依赖项和脚本。

该文件包含 React 应用程序的所有设置,包括:

  1. name – 指向您的应用程序的名称。
  2. version – 指的是应用程序正在使用的当前版本。
  3. “private”: true – 是一个万无一失的设置,可避免您的 React 应用程序意外发布为 npm 生态系统中的公共包。
  4. 依赖项将包含应用程序所需的所有必需节点模块和版本。默认情况下,添加了 2 个依赖项,包括允许使用 JavaScript 的 React 和 React-Dom。在我们的演示中,我们使用的是 React 16.8 版。
  5. 脚本指定可用于以更有效的方式访问某些 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 应用程序中的类型和用法。如果您有任何问题或反馈,请随时在评论部分提及。

本系列的下一个 >> React.js 中的组件

慕源网 » React js教程:React 中的文件夹结构(2)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录