Create React App 项目教程

Create React App 项目教程

create-react-app Set up a modern web app by running one command. 项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app

1. 项目目录结构及介绍

Create React App 是一个官方支持的 React 应用启动器，它允许开发者快速搭建一个现代化、功能完整的 React 应用。以下是项目的目录结构及文件介绍：

my-app/
├── README.md           # 项目说明文件
├── node_modules/       # 项目依赖文件夹
├── package.json        # 项目配置文件
├── .gitignore          # Git 忽略文件
├── public/             # 公共静态文件文件夹
│   ├── favicon.ico     # 网站图标
│   ├── index.html      # 应用入口 HTML 文件
│   └── manifest.json   # 应用清单文件
└── src/                # 源代码文件夹
    ├── App.css         # 应用样式文件
    ├── App.js          # 应用主组件
    ├── App.test.js     # 应用主组件测试文件
    ├── index.css       # 应用入口样式文件
    ├── index.js        # 应用入口文件
    ├── logo.svg        # 应用图标
    ├── serviceWorker.js # 服务工作者文件，用于 PWA
    └── setupTests.js   # 测试配置文件

• README.md：项目的说明文件，通常会包含项目的介绍、使用方法和贡献指南。
• node_modules：存放所有项目依赖的模块。
• package.json：项目的配置文件，定义了项目的依赖、脚本和元数据。
• .gitignore：定义了 Git 应该忽略的文件和文件夹。
• public：存放公共静态文件，如网站图标、入口 HTML 文件和应用清单文件。
• src：源代码文件夹，包含了所有 React 组件和逻辑。

2. 项目的启动文件介绍

Create React App 提供了几个内置命令来启动和构建项目。以下是一些主要的启动文件和脚本：

• index.js：应用的入口文件，它负责创建 React 组件并挂载到 DOM 上。

• App.js：应用的主组件，通常包含了应用的主体结构和逻辑。

• package.json 中的 scripts 字段定义了几个常用的启动脚本：

  {
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    }
  }
  

  • "start"：启动开发服务器。
  • "build"：构建应用的生产版本。
  • "test"：运行测试。
  • "eject"：将所有的配置文件和依赖复制到项目中，以便进行自定义配置。

3. 项目的配置文件介绍

Create React App 默认隐藏了所有的配置文件，以简化开发流程。但是，如果需要自定义配置，可以通过以下文件进行：

• package.json：虽然它不是一个传统意义上的配置文件，但它包含了项目的配置信息，如启动脚本、依赖和项目元数据。
• react-scripts：这是一个隐藏的文件夹，包含了所有内置的配置和启动脚本。如果使用 "eject" 命令，这个文件夹中的内容会被复制到项目中，允许开发者进行自定义。

通常，不需要直接修改配置文件，因为 Create React App 已经为大多数项目提供了一个合理的默认配置。如果需要特殊配置，那么可以考虑使用 "eject" 命令，但这将使项目脱离 Create React App 的自动更新。

create-react-app Set up a modern web app by running one command. 项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app