如何查看react是否搭建好了

检查 React 项目是否成功搭建

运行以下命令检查 React 项目的版本信息。如果成功安装，会显示当前 React 的版本号。

npm view react version

验证项目结构

一个标准的 React 项目通常包含以下文件和目录：

• node_modules/：存放项目依赖的文件夹
• public/：包含静态文件如 index.html
• src/：包含 React 组件和主入口文件 index.js 或 index.tsx
• package.json：定义项目依赖和脚本

运行开发服务器

在项目根目录执行启动命令，如果项目配置正确，开发服务器会正常启动。

npm start

成功启动后，终端会显示本地开发服务器的访问地址（通常是 http://localhost:3000）。在浏览器中打开该地址，应该能看到 React 的默认欢迎页面或你的应用界面。

检查依赖安装

查看 package.json 文件中的 dependencies 部分，确认包含以下核心依赖：

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1"
}

创建测试组件

在 src 目录下新建一个测试组件文件 Test.js，添加简单代码验证 React 能否正常渲染组件。

import React from 'react';

function Test() {
  return <h1>React is working!</h1>;
}

export default Test;

然后在主入口文件（如 index.js）中导入并渲染这个测试组件，刷新浏览器查看是否显示预期内容。

检查构建功能

执行生产构建命令，验证项目是否能成功打包：

npm run build

成功构建后会生成 build 目录，包含优化后的静态文件。这表示项目的构建系统配置正确。