安装 React18 开发环境与配置

在本节课中，我们将学习如何搭建一个 React 18 开发环境，并进行必要的配置。React 是一个流行的 JavaScript 库，用于构建用户界面，React 18 引入了一些新的特性和优化，本节课的重点是帮助大家快速配置开发环境，以便能高效地开始开发 React 项目。

1. React18 介绍

React 18 是 React 的最新版本，带来了以下一些重要更新：

并发模式（Concurrent Mode）：可以让 React 更智能地分配资源，从而使界面更新更流畅。
自动批量更新（Automatic Batching）：React 18 可以自动将多个状态更新合并为一个批量更新，提高性能。
Suspense 的支持：提供了对异步数据加载和组件懒加载的更好支持。
React Server Components：使得 React 应用可以在服务器端渲染并传输到客户端，进一步提升性能。

2. React 18 开发环境的安装

2.1 安装 Node.js 和 npm

在开发 React 应用之前，首先需要确保开发环境中已安装了 Node.js 和 npm（Node.js 的包管理器）。React 18 需要 Node.js 版本 14 或更高版本。

安装步骤：

下载 Node.js：
- 前往 Node.js 官网下载并安装适合操作系统的版本。
- 安装完成后，通过终端（命令行）输入以下命令确认安装是否成功：
```
node -v
npm -v
```
检查安装结果：如果 Node.js 和 npm 安装成功，会输出它们的版本号，例如：
```
v16.13.0
8.1.0
```

2.2 使用 Create React App 创建项目

React 官方推荐使用 Create React App 脚手架工具来快速初始化一个 React 项目。通过该工具可以自动完成一系列配置，包括 Babel 转译、Webpack 打包等。

2.2.1 安装 Create React App

npx create-react-app my-react-app

详细中文注释：

npx 是 npm 5.2 之后版本自带的工具，它可以临时执行 npm 包。
create-react-app 是 React 官方提供的项目脚手架工具，可以帮助我们快速创建 React 项目。
my-react-app 是你要创建的项目文件夹名称，创建后会自动安装 React 和相关的开发依赖。

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

cd my-react-app
npm start

详细中文注释：

cd my-react-app 进入刚刚创建的项目文件夹。
npm start 启动开发服务器，默认会在浏览器中打开 http://localhost:3000，并显示 React 应用的欢迎页面。

3. React 18 配置

3.1 升级到 React 18

默认情况下，Create React App 创建的项目使用的是较老的 React 版本。如果想使用 React 18 的特性，必须升级到 React 18。

升级命令：

npm install react@18 react-dom@18

详细中文注释：

npm install react@18 react-dom@18 命令用于将 React 和 React DOM 的版本升级到 18。

3.2 启用并发模式（Concurrent Mode）

React 18 的并发模式是一个实验性特性，可以通过 ReactDOM.createRoot 启用。

修改 `index.js` 文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

// 使用 React 18 并发模式的创建方式
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

详细中文注释：