React 项目环境如何安装使用？

✅  React 项目环境如何创建

🔧 第一步：安装开发工具

1. 安装 Node.js（包含 npm） 👉 官网下载

2. 打开终端 / 命令提示符，输入：

node -v
npm -v

确认是否安装成功。

---

🏗️ 第二步：创建一个 React 项目（如果你还没有）

npx create-react-app nengtanbao-frontend
cd nengtanbao-frontend

---

📁 第三步：放入页面组件

将你已有的两个文件：

• LoginPage.jsx

• Dashboard.jsx

拷贝到目录：

nengtanbao-frontend/src/pages/

---

🧠 第四步：修改入口文件 App.js 来使用页面

编辑 src/App.js 为如下内容：

import React, { useState } from 'react';
import LoginPage from './pages/LoginPage';
import Dashboard from './pages/Dashboard';function App() {const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));return (<>{isLoggedIn ? (<Dashboard />) : (<LoginPage onLogin={() => setIsLoggedIn(true)} />)}</>);
}export default App;

---

🚀 第五步：安装依赖并启动项目

npm install
npm start

打开浏览器访问：

http://localhost:3000

你将看到登录页面，输入账号密码，登录成功后自动跳转到 Dashboard 页面，加载碳排数据。

---

⚠️ 注意：后台服务还未生成

你的 Dashboard.jsx 中调用了这个接口：

http://localhost:8000/api/carbon-data

它是 FastAPI 提供的数据服务，我们下一步要开始生成这个后端接口。

---

✅ 总结

你当前完成了前端部分：

✅ 登录页面
✅ 数据展示页面
✅ 页面组件运行逻辑