1.2React 开发环境搭建

文档摘要

1.2React 开发环境搭建 React 开发环境搭建：从零开始搭建环境前的准备在开始搭建 React 开发环境之前，请确保你已经安装了以下工具： Node.js 和 npm (或 yarn/pnpm): React 项目依赖 Node.js 运行 JavaScript 代码，npm (Node Package Manager) 是 Node.js 的包管理器，用于安装和管理项目依赖。你也可以选择使用 yarn 或 pnpm 作为替代方案，它们在依赖管理方面具有不同的优势。检查 Node.js 版本: 在命令行中运行和 (或 / )，确保版本号显示正确。建议使用 Node.js 14 或更高版本。

1.2React 开发环境搭建

React 开发环境搭建：从零开始

1. 搭建环境前的准备

在开始搭建 React 开发环境之前，请确保你已经安装了以下工具：

Node.js 和 npm (或 yarn/pnpm): React 项目依赖 Node.js 运行 JavaScript 代码，npm (Node Package Manager) 是 Node.js 的包管理器，用于安装和管理项目依赖。你也可以选择使用 yarn 或 pnpm 作为替代方案，它们在依赖管理方面具有不同的优势。
- 检查 Node.js 版本: 在命令行中运行 node -v 和 npm -v (或 yarn -v/pnpm -v)，确保版本号显示正确。建议使用 Node.js 14 或更高版本。
代码编辑器: 选择你喜欢的代码编辑器，例如 VS Code、Sublime Text、Atom 等。VS Code 拥有丰富的 React 插件，可以提供代码高亮、自动补全、代码格式化等功能，是 React 开发的常用选择。

2. 使用 Create React App (CRA)

Create React App 是 Facebook 官方提供的脚手架工具，用于快速创建 React 项目。它预配置了 Webpack、Babel 等构建工具，简化了开发环境的搭建过程，让开发者专注于业务逻辑的编写。

2.1 安装 Create React App

在命令行中运行以下命令，全局安装 Create React App：


npm install -g create-react-app
# 或者使用 yarn
# yarn global add create-react-app
# 或者使用 pnpm
# pnpm add -g create-react-app

2.2 创建 React 项目

使用 Create React App 创建一个新的 React 项目：


create-react-app my-app
cd my-app

其中 my-app 是你的项目名称，你可以根据需要修改。

2.3 启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：


npm start
# 或者使用 yarn
# yarn start
# 或者使用 pnpm
# pnpm start

浏览器会自动打开 http://localhost:3000，显示 React 默认的欢迎页面。

2.4 Create React App 目录结构


my-app/
  ├── node_modules/      # 项目依赖包
  ├── public/             # 静态资源文件，例如 HTML、CSS、图片等
  │   ├── index.html     # HTML 入口文件
  │   └── ...
  ├── src/                # React 源代码
  │   ├── App.js         # 根组件
  │   ├── App.css        # 根组件样式
  │   ├── index.js       # JavaScript 入口文件
  │   ├── index.css      # 全局样式
  │   └── ...
  ├── package.json       # 项目配置文件，包含依赖信息、脚本等
  └── README.md          # 项目说明文档

2.5 代码示例：修改 App.js

打开 src/App.js 文件，修改代码如下：


import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

保存文件后，浏览器会自动刷新，显示修改后的内容。

2.6 Create React App 的优点和缺点

优点:
- 快速搭建开发环境，无需手动配置 Webpack、Babel 等工具。
- 提供了一套标准的项目结构和开发规范。
- 内置了常用的开发工具，例如热更新、代码检查等。
缺点:
- 配置高度封装，自定义程度较低。
- 项目体积较大，包含了一些不必要的依赖。

3. 使用 Vite

Vite 是一个由 Evan You (Vue.js 的作者) 开发的新一代前端构建工具。它利用浏览器原生的 ES 模块支持，实现了闪电般的冷启动速度和热更新速度。

3.1 创建 Vite React 项目

在命令行中运行以下命令，创建一个 Vite React 项目：


npm create vite my-vite-app --template react
cd my-vite-app

3.2 安装依赖


npm install
# 或者使用 yarn
# yarn install
# 或者使用 pnpm
# pnpm install

3.3 启动开发服务器


npm run dev
# 或者使用 yarn
# yarn dev
# 或者使用 pnpm
# pnpm dev

浏览器会自动打开 http://localhost:3000 (或 Vite 提示的端口)，显示 React 默认的欢迎页面。

3.4 Vite 目录结构


my-vite-app/
  ├── node_modules/
  ├── public/
  │   └── vite.svg
  ├── src/
  │   ├── App.jsx
  │   ├── App.css
  │   ├── index.css
  │   ├── main.jsx
  │   └── vite-env.d.ts
  ├── .gitignore
  ├── index.html
  ├── package.json
  ├── README.md
  └── vite.config.js

3.5 代码示例：修改 App.jsx

打开 src/App.jsx 文件，修改代码如下：


import React from 'react'
import logo from './logo.svg'
import './App.css'
function App() {
  const [count, setCount] = React.useState(0)
  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={logo} 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>
    </div>
  )
}
export default App

保存文件后，浏览器会自动刷新，显示修改后的内容。

3.6 Vite 的优点和缺点

优点:
- 极快的冷启动速度和热更新速度。
- 基于 ES 模块，无需打包，开发效率更高。
- 配置灵活，可以根据需要自定义构建过程。
缺点:
- 生态系统相对较新，一些插件可能不够完善。
- 生产环境需要打包，但 Vite 提供了优化的打包方案。

4. 手动配置 Webpack 和 Babel

虽然 Create React App 和 Vite 提供了便捷的开发环境，但手动配置 Webpack 和 Babel 可以让你更深入地了解 React 的构建过程，并根据需要进行高度定制。

4.1 初始化项目

创建一个新的项目目录，并初始化 package.json 文件：


mkdir my-webpack-app
cd my-webpack-app
npm init -y

4.2 安装依赖

安装 React、ReactDOM、Webpack、Babel 等依赖：


npm install react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev

4.3 配置 Webpack

创建 webpack.config.js 文件，配置 Webpack：


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development', // 开发模式
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 JavaScript 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
        },
      },
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: ['style-loader', 'css-loader'], // 使用 style-loader 和 css-loader
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTML 模板文件
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 静态资源目录
    },
    compress: true,
    port: 3000, // 端口号
  },
};

4.4 配置 Babel

创建 .babelrc 文件，配置 Babel：


{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4.5 创建目录和文件

创建 src 目录，并在其中创建 index.js 和 App.js 文件。创建 public 目录，并在其中创建 index.html 文件。

src/index.js:


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.js:


import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  );
}
export default App;

public/index.html:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4.6 修改 package.json

在 package.json 文件中添加启动脚本：


{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.9.1",
    "html-webpack-plugin": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.4",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

4.7 启动开发服务器

运行以下命令启动开发服务器：


npm start

浏览器会自动打开 http://localhost:3000，显示 React 默认的欢迎页面。

4.8 手动配置的优点和缺点

优点:
- 高度定制，可以根据需要配置 Webpack 和 Babel。
- 更深入地了解 React 的构建过程。
- 可以优化项目体积，移除不必要的依赖。
缺点:
- 配置复杂，需要花费更多的时间和精力。
- 容易出错，需要仔细阅读文档和调试。

5. 环境搭建流程图

6. 总结

本文介绍了三种常见的 React 开发环境搭建方法：Create React App、Vite 和手动配置 Webpack 和 Babel。Create React App 和 Vite 提供了便捷的开发环境，适合快速入门和小型项目。手动配置 Webpack 和 Babel 可以让你更深入地了解 React 的构建过程，适合大型项目和需要高度定制的场景。选择哪种方法取决于你的项目需求和个人偏好。希望本文能帮助你成功搭建 React 开发环境，开启你的 React 开发之旅！

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流