在搭建react环境中报错的问题及解决过程

一、检查问题

1. 检查 Node.js 和 npm 版本

确保你的 Node.js 和 npm 版本是最新的。可以使用以下命令检查版本：

node -v  
npm -v  

（不是由于版本问题引起）

2.ERR_SOCKET_TIMEOUT 网络问题

chatgpt给出解决办法：

运行以下命令将 npm 源更改为淘宝镜像：npm config set registry https://registry.npmmirror.com/

清除 npm 缓存：npm cache clean --force

之后重新输入：npx create-react-app my-app 

然后又出现：

3.遇到 ERESOLVE 依赖冲突错误的情况，

表示在安装依赖时，npm 无法解决不同版本之间的冲突。在你的错误信息中，具体问题是 @testing-library/react 需要 react 的版本为 ^18.0.0，但你当前安装的是 react@19.0.0

解决方法 1: 降级 React

如果你希望保持 @testing-library/react 的当前版本，可以将 react 和 react-dom 降级到 18.x 版本。运行以下命令：

npm install react@^18.0.0 react-dom@^18.0.0

二、检查react安装环境已经创建完成

1. 确认项目目录

如果你已经使用 create-react-app 创建了一个新的 React 项目，首先进入该项目的目录。可以使用以下命令：（将 my-app 替换为你的项目文件夹的名称。）

cd my-app

2.启动开发服务器

在项目目录下，使用以下命令启动开发服务器：

npm start

这将会：

• 编译项目并启动本地开发服务器。
• 默认情况下，浏览器会自动打开并访问 http://localhost:3000，你应该能看到一个默认的 React 应用界面，通常是一个显示 "Edit src/App.js and save to reload" 的页面。

3. 检查 npm 和 Node.js 版本

在项目目录外、命令行中，你可以检查 Node.js 和 npm 的版本，以确保它们符合 React 的要求。运行以下命令：（确保使用的 Node.js 版本是最新的（推荐使用 LTS 版本，通常是 14.x 或 16.x）。npm 版本通常在 6.x 及以上是可以正常工作的。）

node -v

npm -v

4. 检查项目结构

检查项目目录结构，确保有以下文件和文件夹：

（绿色点标记通常表明该文件夹或其子文件夹已经被 Git 版本控制，具体来说，它表示该文件夹已经在 Git 仓库中并且所有文件都是已提交状态，或者是一个由 Git 控制的工作区。）