6 创建第一个React应用之项目结构介绍

在上篇中，我们成功地创建了我们的第一个React应用。现在，我们将深入了解这个应用的项目结构，帮助我们更好地理解React的工作机制以及如何高效管理我们的代码。

项目结构概述

当我们使用create-react-app创建一个新的React项目时，自动生成的项目结构如下：

my-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── .gitignore
├── package.json
└── README.md

在这个结构中，各个文件夹和文件的作用如下：

1. node_modules/

这个文件夹包含了所有项目所依赖的npm包。当你安装依赖时，npm会将它们放在这个文件夹下。一般情况下，我们不需要手动操作这个文件夹。

2. public/

public文件夹用于存放静态资源，这些资源在构建时不会被Webpack打包。在这个文件夹中的文件可以直接通过URL访问。我们来看看几个重要的文件：

• index.html: 这是我们应用的入口HTML文件。React会将它的内容替换为我们组件的内容。确保它包含一个<div id="root"></div>，因为React会把组件渲染到这个节点之上。
• manifest.json: 这个文件包含了关于应用的元数据，通常用于PWA（渐进式网页应用）。
• favicon.ico: 网站的图标文件。

3. src/

src是实际编写React代码的地方。以下是一些常用的文件：

• index.js: 这个文件是React应用的入口点。在这里，我们使用ReactDOM.render()将根组件（通常是<App />）渲染到DOM中。

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

• App.js: 这是我们应用的主组件。它是所有其他组件的父组件，通常在这里组织主要的应用结构和路由。

• App.css: 每个组件通常会有自己的样式文件。App.css用于App.js组件的样式。

• App.test.js: 这是用于App.js组件的测试文件。我们可以在这里编写自动化测试代码，以确保组件按照预期工作。

• index.css: 通常用于全局样式。所有组件共享的样式可以在这个文件中定义。

4. 其他文件

• .gitignore: 列出了不需要提交到Git版本控制的文件。

• package.json: 包含了项目的元数据和依赖信息。可以在这里查看和管理项目的依赖和脚本。

  {
    "name": "my-react-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "react-scripts": "4.0.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    }
  }

• README.md: 项目的说明文档，通常用于描述项目的功能、安装步骤和使用方法。

小结

了解React应用的项目结构是开发的基础。通过上面的结构分析，我们可以更好地组织代码，避免混乱，并提升开发效率。在接下来的章节中，我们将深入探讨组件的概念，了解Props的使用以及如何构建可复用的组件。

下篇将介绍组件与Props之函数组件与类组件，敬请期待！