创建项目的关键步骤: 1．打开终端 2． 输入 npx create-react-app 项目名

npm start 启动项目

目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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

目录结构说明

  • README. md: 项目的说明文件，一般用于记录项目简介、安装步骤和使用方法。

  • node_modules/: 存放项目依赖的第三方库，由 npm 或 yarn 管理。

  • package. json: 项目的配置文件，包含项目的基本信息、脚本、依赖等

  • . gitignore: Git 忽略文件配置文件，用于指定哪些文件不应包含在 Git 版本控制中。

  • public/: 存放静态文件，Create React App 中只有 index.html 是必须的，其他文件可根据需要添加。

    • favicon. ico: 浏览器标签页图标。
    • index. html: HTML 模板文件，Webpack 插件会自动将构建后的静态文件引入此文件。
    • manifest. json: PWA 应用的说明文件。
    • robots. txt: 用于搜索引擎优化，指示搜索引擎抓取哪些页面。

  • src/: 存放你的 React 组件和应用逻辑。

    • App. css: App.js 组件的样式文件。
    • App. js: 主 React 组件，通常为应用的入口组件。
    • App. test. js: App.js 组件的测试文件。
    • index. css: 全局样式文件。
    • index. js: 应用的 JavaScript 入口文件。
    • logo. svg: React Logo 示例文件。
    • reportWebVitals. js: 性能测量相关代码。
    • setupTests. js: 用于设置测试环境的代码。

这只是 Create React App 默认生成的目录结构，你可以根据项目的复杂度和需求对其进行调整和扩展。