React 安装（NPM）

在 React 开发中，使用 npm（Node Package Manager）来安装 React 及其相关依赖是最常见的方式。通过 npm，你可以快速地设置一个 React 项目，并使用 NPM 安装所需的包和库。

目录

  1. 前提条件
  2. 安装 Node.js 和 npm
  3. 使用 Create React App 创建 React 项目
  4. 手动安装 React
  5. 常见问题
  6. 参考资料

1. 前提条件

在开始安装 React 之前，你需要确保已经安装了 Node.js 和 npm。

  • Node.js 是 JavaScript 的运行环境，用于运行 React 以及其他 JavaScript 工具。
  • npm 是 Node.js 的包管理工具，用于管理和安装依赖包。

你可以通过以下命令检查是否已经安装 Node.js 和 npm：

node -v
npm -v

如果没有安装 Node.js 和 npm，可以参考下文的安装步骤。

2. 安装 Node.js 和 npm

2.1 安装 Node.js

前往 Node.js 官方网站 下载并安装 Node.js。你可以选择 LTS（长期支持）版本或 Current（当前版本）。LTS 版本通常更稳定，适合生产环境。

安装完成后，可以再次通过以下命令检查版本：

node -v
npm -v

3. 使用 Create React App 创建 React 项目

Create React App 是由 Facebook 提供的官方工具，它能帮助你快速设置一个新的 React 项目并配置好所需的依赖。

3.1 安装 Create React App

Create React App 是一个命令行工具，你可以全局安装它（但不推荐）或直接使用 npx 来创建项目，推荐使用 npx（无需全局安装）。

npx create-react-app my-app
cd my-app
npm start
  • npx 会自动下载并运行 create-react-app 工具。
  • my-app 是你希望创建的项目文件夹名称。
  • npm start 会启动开发服务器，通常会在浏览器中自动打开 http://localhost:3000。

这样就完成了 React 项目的创建，Create React App 会为你配置好所有的依赖项，如 React、React DOM、Babel 等。

4. 手动安装 React

如果你不想使用 Create React App，可以手动安装 React 和 React DOM。以下步骤帮助你从零开始安装和配置 React 项目。

4.1 初始化项目

首先，在你的工作目录中初始化一个新的 Node.js 项目：

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

这会生成一个 package.json 文件，其中包含你的项目依赖和配置信息。

4.2 安装 React 和 React DOM

接下来，通过 npm 安装 React 和 React DOM：

npm install react react-dom
  • react：React 库本身。
  • react-dom：React 的 DOM 渲染库。

4.3 安装 Babel 和 Webpack

为了使 React 代码能够运行并通过浏览器正确渲染，你需要安装 Babel 和 Webpack，这些工具可以将 JSX 转换成浏览器能理解的 JavaScript。

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin
  • babel-loader：Babel 的 Webpack 加载器，用于编译 JavaScript 文件。
  • @babel/preset-env：Babel 预设，用于编译现代 JavaScript。
  • @babel/preset-react：Babel 预设，用于编译 React 的 JSX。
  • webpack：模块打包工具。
  • webpack-cli：Webpack 命令行工具。
  • webpack-dev-server：Webpack 开发服务器。
  • html-webpack-plugin：用于生成 HTML 文件的插件。

4.4 配置 Babel

在项目根目录创建一个 .babelrc 文件，配置 Babel：

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

4.5 配置 Webpack

在项目根目录创建一个 webpack.config.js 文件，配置 Webpack：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

4.6 配置 npm 脚本

在 package.json 文件中添加以下 npm 脚本来启动 Webpack 开发服务器和构建应用：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

4.7 创建基础文件

在 src 目录中创建一个 index.js 文件，并添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello, React!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

创建一个 public/index.html 文件，并添加一个包含 root 元素的 HTML 模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

4.8 启动应用

现在，你可以启动开发服务器：

npm start

这会启动 Webpack 开发服务器，并且会自动在浏览器中打开应用。

5. 常见问题

5.1 问题：安装失败或网络问题

在安装时遇到问题，可以尝试清除 npm 缓存，重新安装依赖：

npm cache clean --force
npm install

5.2 问题：Babel 配置错误

如果 Babel 配置不正确，React 代码可能无法正常运行。确保 .babelrc 文件中的配置正确，且已正确安装所有 Babel 依赖包。

6. 参考资料

出站链接

站内链接

通过以上步骤，你可以轻松安装 React，并根据需求选择使用 Create React App 或手动配置的方式开始构建 React 应用。