React 安装(NPM)（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发领域，React 已成为构建用户界面的主流框架之一。无论是构建简单的单页应用，还是复杂的大型系统，React 的声明式语法、组件化架构以及高效的性能优化能力，都让它成为开发者青睐的选择。然而，对于编程初学者而言，如何正确安装 React 并开始开发，可能是他们迈出的第一步中最具挑战性的部分。

本文将通过 NPM（Node Package Manager） 这一工具，深入浅出地讲解 React 的安装流程。无论你是刚接触前端开发的新人，还是有一定基础但希望系统梳理知识的开发者，都能通过本文掌握 React 安装的核心方法，并理解背后的技术原理。

NPM 的基础概念与工作原理

什么是 NPM？

NPM 是 Node.js 的默认包管理工具，它提供了一个庞大的开源代码库，允许开发者快速安装、管理项目所需的第三方库和框架（如 React）。你可以将 NPM 想象为一个“工具仓库管理员”：它能根据你的需求，自动下载并配置好所有依赖项，甚至处理它们之间的版本兼容性问题。

NPM 的核心功能

1. 包管理：通过 npm install 命令下载并安装包。
2. 版本控制：支持指定包的版本范围（如 ^1.0.0 表示兼容更新）。
3. 依赖树：自动维护项目依赖关系，确保不同包之间的兼容性。
4. 脚本执行：通过 package.json 中的 scripts 字段定义命令（如启动开发服务器）。

比喻：
如果把开发一个项目比作搭建一座舞台，NPM 就像一位经验丰富的道具管理员。你只需要告诉它需要哪些道具（包），它就会从仓库（NPM Registry）中找到合适的版本，并将它们整齐地摆放在你的工作台上（项目目录）。

通过 create-react-app 快速搭建项目

React 安装(NPM)的最简方式

对于大多数开发者来说，使用 create-react-app 是开始 React 项目的最快捷方式。它由 React 团队维护，内置了最佳实践配置（如 Webpack、Babel 等），开发者无需手动配置开发环境。

步骤详解

1. 安装 Node.js 和 NPM
   确保你的电脑已安装 Node.js（包含 NPM）。访问 Node.js 官网 下载并安装最新长期支持（LTS）版本。

2. 使用 npx 创建项目

   npx create-react-app my-first-react-app
   

   • npx 是 Node.js 自带的包运行工具，用于临时执行命令。
   • my-first-react-app 是你的项目名称，可根据需要自定义。

3. 进入项目目录并启动开发服务器

   cd my-first-react-app  
   npm start
   

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

为什么选择 create-react-app？

• 零配置：无需关心 Webpack 或 Babel 的配置细节。
• 热更新（Hot Reloading）：修改代码后，页面会实时更新，无需手动刷新。
• 生产环境优化：通过 npm run build 自动压缩代码、优化资源。

案例演示
假设你想创建一个名为 todo-list 的 React 应用，只需运行以下命令：

npx create-react-app todo-list  
cd todo-list  
npm start

此时，你可以在 src/App.js 中修改代码，实时查看效果。

手动安装 React 的步骤详解

尽管 create-react-app 极为便捷，但在某些场景下（如需要自定义配置），开发者可能选择手动安装 React。以下是分步指南：

1. 初始化项目

在空目录中运行以下命令，生成 package.json 文件：

npm init -y

该命令会自动生成一个基础的 package.json，记录项目依赖和配置。

2. 安装 React 和 ReactDOM

npm install react react-dom

• React：核心库，提供组件化开发能力。
• ReactDOM：将 React 组件渲染到浏览器的 DOM 中。

3. 配置 Babel

React 使用了 JavaScript 的新语法（如 JSX），而并非所有浏览器都支持这些语法。因此需要安装 Babel 进行转译：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react  
npm install --save-dev babel-loader  

4. 配置 Webpack

Webpack 是一个模块打包工具，负责将代码、资源等打包成浏览器可识别的格式：

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin

5. 编写配置文件

在项目根目录创建以下文件：

• webpack.config.js：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
      }),
    ],
    devServer: {
      contentBase: './dist',
      port: 3000,
    },
  };
  

• .babelrc：

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

6. 编写代码并运行

在 src/index.js 中编写你的第一个 React 组件：

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

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

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

运行开发服务器：

npx webpack serve --mode development

访问 http://localhost:3000，即可看到“Hello, React!”的文本。

对比与总结
手动安装虽然步骤繁琐，但能完全掌控配置细节。而 create-react-app 则更适合快速验证想法或小型项目。

常见问题与解决方案

1. Node.js 版本过低

现象：安装时提示 node 版本低于 14.x。
解决：

• 升级 Node.js 到 LTS 版本（推荐使用 nvm 管理多版本）。
• 或在 package.json 中指定兼容版本：

  "engines": {
    "node": ">=14.0.0"
  }
  

2. 端口被占用

现象：运行 npm start 时报错 Port 3000 is already in use。
解决：

• 终止占用端口的进程（如在 macOS 上运行 lsof -i :3000 查找进程并终止）。
• 或修改 package.json 中的端口：

  "scripts": {
    "start": "react-scripts start --port 3001"
  }
  

3. 依赖安装失败

现象：下载过程中出现 ETIMEDOUT 或 EAI_AGAIN 错误。
解决：

• 配置 npm 的代理或镜像源：

  npm config set registry https://registry.npmmirror.com
  

• 或使用 cnpm（国内镜像工具）：

  npm install -g cnpm  
  cnpm install
  

进阶技巧：优化 React 安装体验

使用 Yarn 替代 NPM

Yarn 是另一款流行的包管理工具，其性能和安全性表现更优：

yarn create react-app my-project  

通过 pnpm 管理依赖

pnpm 通过扁平化的依赖结构减少磁盘占用，适合大型项目：

pnpm create react-app my-project  

自定义脚本

在 package.json 中添加自定义命令：

"scripts": {
  "build:prod": "react-scripts build && echo 'Production build done!'",
  "lint": "eslint src/**/*.js"
}

运行 npm run build:prod 或 npm run lint 即可执行对应操作。

结论

通过本文的讲解，你已经掌握了 React 安装(NPM)的两种核心方法：快速上手的 create-react-app 和灵活可控的手动配置。无论是选择“开箱即用”的方案，还是深入探索底层配置，NPM 都是开发者不可或缺的工具。

记住，安装只是开始。接下来，你可以尝试在 React 项目中添加路由（react-router-dom）、状态管理（Redux 或 Context API），或接入第三方 UI 库（如 Ant Design）。每一项技能的积累，都将帮助你构建更复杂、更强大的应用。

现在，打开你的终端，输入 npx create-react-app，开始你的 React 之旅吧！