Skip to main content

React 初始化指南

本指南将帮助你了解如何从零开始创建一个 React 项目，包括环境准备、项目结构规范以及常见开发实践。

🛠️ 环境准备​

在开始之前，请确保你已经在本地安装了以下工具：

1. 安装 Node.js​

访问 Node.js 官网 并下载 LTS 版本。

安装完成后，你可以通过终端检查版本：

node -v
npm -v
info

建议使用 Node.js 18 以上版本。

🚀 创建 React 项目​

React 官方推荐使用 create-react-app 快速创建项目。

npx create-react-app my-app
cd my-app
npm start
tip

使用 npx 运行命令时不需要全局安装 create-react-app。

📁 项目结构说明​

my-app/
├── node_modules/           # 依赖模块
├── public/                 # 公共静态资源目录
│   └── index.html          # HTML 模板
├── src/                    # 源代码目录
│   ├── App.js              # 主组件
│   ├── index.js            # 入口文件
│   └── components/         # 可复用组件
├── .gitignore              # Git 忽略配置
├── package.json            # 项目信息和依赖列表
└── README.md               # 项目说明
点击展开项目结构说明
  • public/：放置不会被 Webpack 处理的静态资源。
  • src/：所有 React 源代码写在这里，推荐按功能模块划分子文件夹。
  • components/：可复用的 UI 组件。
  • App.js：项目主视图容器。
  • index.js：项目入口，挂载根组件。

✍️ 示例代码​

import React from 'react';

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

📦 常用脚本命令​

npm start       # 启动开发服务器
npm run build   # 生产环境打包
npm test        # 运行测试
npm run eject   # 弹出所有配置（慎用）
caution

npm run eject 会暴露隐藏配置，无法还原，请谨慎使用。

📐 项目规范建议​

  • ✅ 使用 ESLint + Prettier 保持代码一致性
  • ✅ 组件使用函数式组件 + Hooks
  • ✅ 避免过度嵌套，保持组件职责单一
  • ✅ 使用目录分层：pages/、components/、hooks/、utils/
  • ✅ 使用 .tsx 文件名用于 TypeScript 开发
点击展开 ESLint 和 Prettier 配置示例
npm install -D eslint prettier eslint-plugin-react eslint-config-prettier

.eslintrc.json 示例：

{
  "extends": ["react-app", "plugin:react/recommended", "prettier"]
}

.prettierrc 示例：

{
  "singleQuote": true,
  "semi": true
}

✅ 总结​

你现在已经掌握了从零开始创建 React 项目的完整流程：

  • 安装 Node.js
  • 使用 create-react-app 初始化项目
  • 启动本地开发环境
  • 理解项目结构
  • 编写基本组件
  • 配置项目规范（如 ESLint / Prettier）

下一步你可以探索更多 React 特性，如路由（React Router）、状态管理（Redux/Zustand）、UI 库（MUI/Antd）等。

📚 参考链接​