ReactJS - 环境搭建

ReactJS - 环境搭建

借助一些工具能帮你处理复杂的配置，搭建现代 React 开发环境变得非常简单。本教程将重点介绍使用 Create React App 和 Vite，它们是快速启动新 React 项目的两个常用选择。

前置条件：

• Node.js 和 npm：React 开发依赖于 Node.js（一个 JavaScript 运行时）和 npm（Node 包管理器）或 Yarn。如果你尚未安装，请从 https://nodejs.org/ 下载 Node.js（npm 会随 Node.js 一起安装）。

选项 1：使用 Create React App (CRA)

Create React App 是创建单页 React 应用的官方支持方式。它会为你搭建好开发环境，让你可以使用最新的 JavaScript 特性，提供良好的开发者体验，并优化你的应用以供生产环境使用。

步骤 1.1 - 创建一个新的 React 应用

打开你的终端 (terminal) 或命令提示符 (command prompt)，运行以下命令（npx 是 npm 5.2+ 附带的包运行工具）：

npx create-react-app my-react-app

将 my-react-app 替换为你想要的项目名称。此命令将在当前文件夹内创建一个名为 my-react-app 的目录，设置好项目结构，并安装所有必要的依赖项。

步骤 1.2 - 进入项目目录并启动开发服务器

cd my-react-app
npm start

这将启动开发服务器（通常在 http://localhost:3000），并在你的默认网页浏览器中打开新的 React 应用。当你修改代码时，服务器会自动重新加载页面。

选项 2：使用 Vite

Vite 是一个现代化的前端构建工具，它显著改善了前端开发体验。它提供了极快的冷启动速度和热模块替换 (Hot Module Replacement, HMR) 功能。

步骤 2.1 - 使用 Vite 创建一个新的 React 应用

打开你的终端，运行：

# 使用 npm
npm create vite@latest my-vite-app -- --template react

# 使用 yarn
yarn create vite my-vite-app --template react

将 my-vite-app 替换为你的项目名称。Vite 会提示你选择一个框架（选择 React）和一个变体（例如，带有 JavaScript 或 TypeScript 的 React）。

步骤 2.2 - 进入项目目录，安装依赖项并启动服务器

cd my-vite-app
npm install  # 或 yarn install
npm run dev  # 或 yarn dev

这将启动 Vite 的开发服务器（通常在 http://localhost:5173 或类似的端口）并提供极快的 HMR。

理解项目结构（Create React App/Vite 的典型结构）

Create React App 和 Vite 都会生成一个类似的基础结构：

my-react-app/ (or my-vite-app/)
├── node_modules/     # 所有项目依赖项
├── public/
│   └── index.html    # 应用的主 HTML 页面
│   └── ...           # 其他静态资源，如 favicons
├── src/
│   ├── App.css       # App 组件的样式
│   ├── App.js / App.jsx # 主要的 App 组件
│   ├── index.css     # 全局样式
│   ├── index.js / main.jsx # React 应用的入口文件
│   └── ...           # 其他组件、资源等
├── .gitignore        # 指定 Git 应忽略的有意未跟踪的文件
├── package.json      # 列出项目依赖项和脚本
└── README.md         # 项目信息

关键文件：

• public/index.html：页面模板。React 会将你的应用注入到此文件中的一个 DOM 元素（通常是一个带有 root 等 id 的 <div>）中。
• src/index.js (CRA) 或 src/main.jsx (Vite + React)：JavaScript 入口文件。此文件将你的根 React 组件（通常是 <App />）渲染到 DOM 中。
• src/App.js 或 src/App.jsx：主要的应用组件，你将从这里开始构建你的 UI。

创建你的第一个组件（示例）

让我们修改默认的 src/App.js（或 src/App.jsx）以显示一个简单的消息。

src/App.jsx (Vite 示例，与 Create React App 的 App.js 类似)

import React from 'react';
import './App.css'; // 你可能有一些默认样式

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, Modern React!</h1>
        <p>My first React application setup is complete.</p>
      </header>
    </div>
  );
}

export default App;

开发服务器会自动检测到这些更改并刷新你的浏览器。

关于 import 和 export 的重要说明：

现代 JavaScript（React 大量使用了它）使用 ES Modules 来组织代码。

• import 语句：用于导入从外部模块（另一个文件）导出的函数、对象或基本类型。
• export 语句：用于从给定文件（或模块）导出函数、对象或基本类型，以便其他程序可以使用 import 语句来使用它们。 在 React 项目中，你将大量看到这些语句，它们用于管理组件和工具函数。

Webpack、Babel 等呢？

Create React App 和 Vite 等工具预配置了 Webpack (CRA) 或 Rollup (Vite 底层用于生产构建) 等构建工具，以及 Babel 等转译器。这些工具负责处理：

• 打包 (Bundling)：将你的 JavaScript 文件和依赖项组合成浏览器优化的文件。
• 转译 (Transpiling)：将现代 JavaScript（和 JSX）转换为浏览器兼容的 JavaScript。
• 开发服务器 (Development Server)：提供具有热模块替换等功能的本地服务器。

对于初学者，你无需手动配置这些工具。随着你变得更进阶，你可能会探索自定义这些配置，但刚开始时这是不必要的。

你现在已经搭建好了现代化的 React 开发环境！你可以开始构建组件并探索 React 生态系统了。