使用 create-react-app 创建的 React 应用程序的文件结构

2019-08-15 08:00:00 · 飞浪

使用 create-react-app，我们可以在几分钟内解决依赖项、配置等设置问题，并开始使用实际的应用程序代码。

介绍

当我们开始开发任何 React 应用程序时，设置整个项目（设置依赖项、配置等）可能是一项巨大的挑战。在我们开始编写第一行代码之前，必须先处理好这些问题。使用 create-react-app，我们可以在几分钟内解决上述所有问题，并开始编写实际的应用程序代码。create-react-app 工具由 Facebook 推出，是设置新项目的推荐方式。在本指南中，我们将介绍使用此工具创建的项目以及项目的结构。

创建新的 React 项目

要使用此工具创建新的应用程序/项目，我们需要做的就是运行命令“create-react-app”，然后输入应用程序名称。

      create-react-app my-sample-app

运行上述命令后，将创建一个名为“my-sample-app”的新文件夹，其中包含我们所有的应用程序代码。

项目布局

项目结构如下：

      ├── README.md
├── node_modules
├── package.json
├── .gitignore
├── build
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    

从上图可以看出，只创建了最小结构，没有任何复杂性。

结构细节

让我们逐一了解其生成的每个文件/文件夹的用途。

build 表示我们最终生产构建的路径。此文件夹实际上是在我们运行 npm build 后创建的。

我们可以在 node_modules 中看到 React 应用所需的所有“依赖项”和“devDependencies”。这些内容在我们的 package.json 文件中指定或显示。如果我们只运行 ls -l 命令，我们将看到近 800 个子目录。此目录将添加到 .gitignore，因此它实际上不会以此类方式上传/发布。此外，一旦我们最小化或压缩我们的代码以进行生产，我们的示例应用的大小应该小于 100 KB。

我们的静态文件位于公共目录中。此目录中的文件在部署到生产环境时将保留相同的名称。因此，它们可以在客户端缓存并缩短整体下载时间。

所有动态组件都将位于 src 中。为了确保在客户端只下载最新版本而不是缓存副本，Webpack 通常会在最终构建中为更新的文件指定一个唯一的文件名。因此，我们可以使用简单的文件名，例如 header.png，而不是使用 header-2019-01-01.png。Webpack 会负责将 header.png 重命名为 header.dynamic-hash.png。只有当我们的 header.png 发生变化时，这个唯一的哈希才会更新。我们还可以看到像 App.js 这样的文件，它是我们的主要 JS 组件，相应的样式位于 App.css 中。如果我们想添加任何单元测试，我们可以使用 App.test.js 来实现。此外，index.js 是我们应用程序的入口点，它会触发 registerServiceWorker.js。顺便说一句，我们主要在这里添加一个“components”目录来添加新组件及其相关文件，因为这可以改善我们结构的组织。

React 项目的整体配置在 package.json 中概述。如下所示：

      {
	"name": "my-sample-app",
	"version": "0.0.1",  
	"private": true,
	"dependencies": {
    	"react": "^16.5.2",
	    "react-dom": "^16.5.2",
	},
	"devDependencies": {
    	"react-scripts": "1.0.7"
  	},
  	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test --env=jsdom",
		"eject": "react-scripts eject"
	}    
}
    

我们可以看到以下属性：

name - 代表传递给 create-react-app 的应用程序名称。
版本——显示当前版本。
依赖项 - 应用程序所需的所有模块/版本的列表。默认情况下，npm 将安装最新的主要版本。
devDependencies - 列出在开发环境中运行应用程序的所有模块/版本。
scripts - 列出所有可用于以有效方式访问 react-scripts 命令的别名。例如，如果我们在命令行中运行 npm build，它将在内部运行“react-scripts build”。

我们的应用程序共享的依赖项可以放在 assets 目录中。这些依赖项可以包括 mixin、图像等。因此，它们将代表我们主项目本身之外的文件的单一位置。

我们还需要有一个实用程序文件夹。这将包含整个应用程序全局使用的辅助函数列表。我们可以将通用逻辑添加到此实用程序文件夹中，并在我们想要使用它的任何地方导入它。虽然命名可能略有不同，但标准命名约定包括助手、实用程序、实用程序等。

这样，我们的结构现在看起来如下所示：

      my-sample-app
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── assets
│   │   └──images
│   │      └── logo.svg
│   ├── components
│   │   └── app
│   │       ├── App.css
│   │       ├── App.js
│   │       └── App.test.js
│   ├── utilities
│   ├── Index.css
│   ├── Index.js
│   └── service-worker.js
├── .gitignore
├── package.json
└── README.md
    

manifest.json 此文件用于描述我们的应用程序，例如在手机上，如果在主屏幕上添加了快捷方式。它看起来如下；

      {
  "short_name": "My Sample React App",
  "name": "My Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#efefef",
  "background_color": "#000000"
}
    

当我们的网络应用被添加到用户的主屏幕时，正是这些元数据决定了图标、主题颜色、名称等。

favicon.ico 这是我们项目使用的图标图像文件。它也链接到index.html和manifest.json中。

组件目录

组件目录结构是任何 React 应用中最重要的部分。虽然组件可以位于 src/components/my-component-name 中，但建议在该目录中包含 index.js。因此，每当有人使用 src/components/my-component-name 导入组件时，这实际上会导入 index.js 文件，而不是导入目录。

组件还涉及许多文件，包括无状态和有状态容器、SASS 文件、该组件内共享的实用程序，甚至子组件。

因此，我们的组件目录结构将如下所示：

      my-sample-app
└── src
	└── components
        └── my-component-name
			├── my-component-name.css
            ├── my-component-name.scss
            ├── my-component-name-container.js
            ├── my-component-name-redux.js
            ├── my-component-name-styles.js
            ├── my-component-name-view.js
            └── index.js
    

my-component-name.css 代表我们的无状态视图组件导入的 CSS 文件。my-component-name.scss 是我们的无状态视图组件导入的 SASS 文件。my-component-name-container.js 将包含业务逻辑和状态管理。my-component-name-redux.js 将包括 Redux 提供的 mapStateToProps、mapDispatchToProps 和连接功能。my-component-name-styles.js 将代表我们的 JSS（例如存储 Material UI 样式）。my-component-name-view.js 主要是一个纯函数式组件 index.js 是导入我们组件的入口点。

单元测试

对于单元测试，我们将遵循相同的原则，将所有相关文件分组。因此，我们可以将它们添加到我们已有的组件目录中，如下所示；

      my-sample-app
└── src
    └── components
        └── my-component-name
            ├── my-component-name-container.js
            ├── my-component-name-container.test.js
            ├── my-component-name-redux.js
            ├── my-component-name-redux.test.js
            ├── my-component-name-view.js
            └── my-component-name-view.test.js
    

索引页

我们还来看看 index.js 以及生成的 index.html 页面。

以下是我们的 index.js 文件的样子；

      import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
    

以下是 html 页面；

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
    

我们可以看到，这是一个非常基本的 HTML 页面，包含一些元标记和一些链接元素。此外，我们可以看到有一个空的 div 元素，其 id 为“root”。我们可以随时将其更新为其他内容，例如“content”，以及添加任何其他 CSS 或外部 JS 库，例如，假设我们想将 Bootstrap 库添加到我们的项目中。为此，我们可以直接将 CDN 引用添加到我们的 index.html，如下所示：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="content"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>
    

由于我们将默认容器元素 Id 更改为“content”，我们还必须在 index.js 中更新它，如下所示：

      import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('content'));
registerServiceWorker();
    

添加引导库的另一种方法（假设我们只想在特定组件中使用它）是使用 npm 安装该库，然后添加导入，如下所示：

      npm install --save bootstrap

      import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

或者

      import 'bootstrap/dist/css/bootstrap.min.css';

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 create-react-app 创建的 React 应用程序的文件结构

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

├── README.md ├── node_modules ├── package.json ├── .gitignore ├── build ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js

{ "name": "my-sample-app", "version": "0.0.1", "private": true, "dependencies": { "react": "^16.5.2", "react-dom": "^16.5.2", }, "devDependencies": { "react-scripts": "1.0.7" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

my-sample-app ├── build ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── assets │ │ └──images │ │ └── logo.svg │ ├── components │ │ └── app │ │ ├── App.css │ │ ├── App.js │ │ └── App.test.js │ ├── utilities │ ├── Index.css │ ├── Index.js │ └── service-worker.js ├── .gitignore ├── package.json └── README.md

{ "short_name": "My Sample React App", "name": "My Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ], "start_url": ".", "display": "standalone", "theme_color": "#efefef", "background_color": "#000000" }

my-sample-app └── src └── components └── my-component-name ├── my-component-name.css ├── my-component-name.scss ├── my-component-name-container.js ├── my-component-name-redux.js ├── my-component-name-styles.js ├── my-component-name-view.js └── index.js

my-sample-app └── src └── components └── my-component-name ├── my-component-name-container.js ├── my-component-name-container.test.js ├── my-component-name-redux.js ├── my-component-name-redux.test.js ├── my-component-name-view.js └── my-component-name-view.test.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" />  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>  </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" />  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="content"></div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script> </body> </html>