React 安装(NPM)

React 本身是发布在 npm 上的几个 JavaScript 包，最核心的是 react 与 react-dom。npm 是 Node.js 自带的包管理器，通过它可以下载、管理项目依赖。本节介绍用 npm 安装 React 所需的全部步骤。

第一步：安装 Node.js 与 npm

先安装 Node.js：到官网下载 LTS（长期支持）版本，双击安装包一路"下一步"即可，npm 会随 Node.js 一起装好。

装好后打开终端（命令行），检查版本是否正常：

node -v
npm -v

如果能看到版本号（如 v20.11.0、10.2.4），说明环境就绪。

第二步：初始化项目

新建一个目录并进入，然后执行 npm init 生成 package.json：

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

其中 -y 表示全部使用默认值。package.json 用于记录项目名称、版本与依赖清单。

第三步：安装 React

在项目目录执行以下命令：

npm install react react-dom

安装成功后，package.json 中会多出 dependencies 字段：

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

• react：React 核心库，负责组件与虚拟 DOM。
• react-dom：负责把组件渲染到浏览器的真实 DOM 中。

第四步：使用安装好的 React

在项目里新建 src/index.js，引入 React 并渲染到页面（以 React 18 的 createRoot 为例）：

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>React 安装成功！</h1>);
// 渲染效果：页面中 id 为 root 的节点内显示"React 安装成功！"

注意：浏览器无法直接识别 JSX，还需要配合 Vite 等构建工具编译，后面的章节会介绍。

npm 常用命令一览

命令	作用
npm install 包名	安装某个包
npm install	按 package.json 安装全部依赖
npm uninstall 包名	卸载某个包
npm list	查看已安装的包
npm update	更新依赖

小结

安装 React 只需三步：安装 Node.js（自带 npm）、npm init 初始化项目、npm install react react-dom。装好后还需构建工具才能运行 JSX，下一节介绍更快的 Vite 方式。