Create React App 文件夹结构

在使用 Create React App 创建新项目时,会自动生成一套标准的文件夹结构,这个结构是经过精心设计的,旨在提高项目的可维护性和可扩展性。下面我们来详细介绍一下 Create React App 默认的文件夹结构。

public 文件夹

public 文件夹是用来存放静态资源的地方,这些资源在构建过程中会被直接复制到最终的构建目录中,比如 build 目录。在 public 文件夹中,通常会包含以下文件:

  • index.html:项目的入口 HTML 文件,包含了根组件挂载的 DOM 节点。
  • favicon.ico:网站的图标文件,会显示在浏览器标签页上。
  • 其他静态资源文件,比如图片、字体等。

src 文件夹

src 文件夹是项目的源代码目录,所有的 React 组件、样式文件、图片文件等都应该放在这个文件夹下。在 src 文件夹中,通常会包含以下文件和文件夹:

  • index.js:项目的入口文件,通常会在这个文件中引入根组件并将其挂载到 DOM 上。
  • App.js:根组件文件,所有其他组件都会作为 App 组件的子组件。
  • components 文件夹:用来存放项目中的各个组件。
  • styles 文件夹:用来存放样式文件,比如 CSS 或者 SCSS 文件。
  • assets 文件夹:用来存放项目中使用的静态资源文件,比如图片、字体等。

除了上述文件和文件夹,你还可以根据项目的需求添加其他文件和文件夹,但是建议保持文件夹结构的清晰和规范,以方便团队协作和代码维护。

这就是 Create React App 默认的文件夹结构,下一节我们将介绍如何创建一个新的 React 组件。


上一篇:入门
下一篇:可用的 Scripts