React 项目创建与目录解析

在本章节中，我们将学习如何创建 React 项目并理解项目的目录结构。

4.1 两种创建方式

方式1：create-react-app 创建传统React项目

create-react-app 是官方推荐的创建 React 项目的方式，它会为你设置好所有必要的配置。

创建项目：
bash
```
npx create-react-app my-react-app
```
进入项目目录：
bash
```
cd my-react-app
```
启动开发服务器：
bash
```
npm start
```
构建生产版本：
bash
```
npm run build
```

方式2：Vite 极速创建React项目（推荐）

Vite 是一个现代化的前端构建工具，它提供了更快的开发体验。

创建项目：

bash

npm create vite@latest my-react-app -- --template react

进入项目目录：
bash
```
cd my-react-app
```
安装依赖：
bash
```
npm install
```
启动开发服务器：
bash
```
npm run dev
```
构建生产版本：
bash
```
npm run build
```

4.2 项目启动、停止、打包命令详解

开发服务器命令

启动开发服务器：

bash

# create-react-app
npm start

# Vite
npm run dev

停止开发服务器：
- 在终端中按 Ctrl+C

构建命令

构建生产版本：
bash
```
npm run build
```
构建产物会生成在 build 或 dist 目录中。

其他命令

运行测试：
bash
```
npm test
```
** ejected 配置**（仅 create-react-app）：
bash
```
npm run eject
```
注意：此操作不可逆，会将所有配置文件暴露出来。

4.3 项目目录结构逐文件解析

Vite 创建的项目结构

my-react-app/
├── node_modules/       # 依赖包
├── public/             # 静态资源
│   └── favicon.ico     # 网站图标
├── src/                # 源代码
│   ├── App.css         # App 组件样式
│   ├── App.jsx         # App 组件
│   ├── index.css       # 全局样式
│   └── main.jsx        # 入口文件
├── .gitignore          # Git 忽略文件
├── index.html          # HTML 模板
├── package.json        # 项目配置
├── package-lock.json   # 依赖版本锁定
└── vite.config.js      # Vite 配置

create-react-app 创建的项目结构

my-react-app/
├── node_modules/       # 依赖包
├── public/             # 静态资源
│   ├── favicon.ico     # 网站图标
│   ├── index.html      # HTML 模板
│   └── manifest.json   # PWA 配置
├── src/                # 源代码
│   ├── App.css         # App 组件样式
│   ├── App.js          # App 组件
│   ├── App.test.js     # App 组件测试
│   ├── index.css       # 全局样式
│   ├── index.js        # 入口文件
│   └── logo.svg        # React 标志
├── .gitignore          # Git 忽略文件
├── package.json        # 项目配置
└── package-lock.json   # 依赖版本锁定

核心目录和文件解析

public 目录

作用：存放静态资源，这些资源会被直接复制到构建产物中
常见文件：
- index.html：HTML 模板，React 应用会挂载到这个文件中
- favicon.ico：网站图标
- 其他静态资源：图片、字体等

src 目录

作用：存放源代码，这是我们主要工作的目录
常见文件：
- main.jsx / index.js：应用入口文件
- App.jsx / App.js：根组件
- 其他组件文件
- 样式文件
- 工具函数
- 状态管理文件

4.4 入口文件、根组件作用讲解

入口文件（main.jsx / index.js）

作用：

导入 React 和 ReactDOM
导入根组件
将根组件渲染到 DOM 中

示例代码：

jsx

// Vite 项目 (main.jsx)
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

jsx

// create-react-app 项目 (index.js)
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.jsx / App.js）

作用：

作为应用的根组件
组织和管理其他子组件
定义应用的基本结构

示例代码：

jsx

// App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

项目配置文件

package.json

作用：

定义项目的基本信息
管理项目依赖
定义脚本命令

示例代码：

json

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

vite.config.js（Vite 项目）

作用：

配置 Vite 的构建选项
配置插件
配置别名

示例代码：

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

常见问题解决

创建项目失败：
- 检查网络连接
- 确保 Node.js 版本符合要求
- 尝试使用镜像源
依赖安装失败：
- 清理 npm 缓存：npm cache clean --force
- 尝试删除 node_modules 目录和 package-lock.json 文件，然后重新安装
开发服务器启动失败：
- 检查端口是否被占用
- 确保依赖已正确安装
- 查看终端错误信息
构建失败：
- 检查代码中是否有语法错误
- 确保所有依赖都已正确安装
- 查看终端错误信息

通过本章节的学习，你已经掌握了如何创建 React 项目并理解了项目的目录结构。现在你可以开始学习 React 的核心概念和实践技能了。

React 项目创建与目录解析 ​

4.1 两种创建方式 ​

方式1：create-react-app 创建传统React项目 ​

方式2：Vite 极速创建React项目（推荐） ​

4.2 项目启动、停止、打包命令详解 ​

开发服务器命令 ​

构建命令 ​

其他命令 ​

4.3 项目目录结构逐文件解析 ​

Vite 创建的项目结构 ​

create-react-app 创建的项目结构 ​

核心目录和文件解析 ​

public 目录 ​

src 目录 ​

4.4 入口文件、根组件作用讲解 ​

入口文件（main.jsx / index.js） ​

根组件（App.jsx / App.js） ​

项目配置文件 ​

package.json ​

vite.config.js（Vite 项目） ​

常见问题解决 ​

React 项目创建与目录解析

4.1 两种创建方式

方式1：create-react-app 创建传统React项目

方式2：Vite 极速创建React项目（推荐）

4.2 项目启动、停止、打包命令详解

开发服务器命令

构建命令

其他命令

4.3 项目目录结构逐文件解析

Vite 创建的项目结构

create-react-app 创建的项目结构

核心目录和文件解析

public 目录

src 目录

4.4 入口文件、根组件作用讲解

入口文件（main.jsx / index.js）

根组件（App.jsx / App.js）

项目配置文件

package.json

vite.config.js（Vite 项目）

常见问题解决