如何react页面
创建React页面
安装Node.js和npm，确保开发环境准备就绪。通过命令行工具创建一个新的React项目，使用Create React App脚手架工具。
npx create-react-app my-app
cd my-app
npm start项目结构
进入项目目录后，主要文件结构包括src文件夹，其中App.js是主组件，index.js是入口文件。页面内容通常在App.js中编写或通过组件拆分实现。
编写组件
在src文件夹中创建新组件文件，例如HomePage.js。使用函数组件或类组件方式定义，并导出组件供其他文件使用。
import React from 'react';
function HomePage() {
return (
<div>
<h1>Welcome to My React Page</h1>
</div>
);
}
export default HomePage;路由配置
对于多页面应用，安装React Router管理路由。通过npm安装后，在App.js中配置路由规则。
npm install react-router-domimport { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
</Routes>
</Router>
);
}样式处理
使用CSS模块或内联样式为组件添加样式。创建HomePage.module.css文件并在组件中引入，确保样式作用域限于当前组件。
.title {
color: blue;
}import styles from './HomePage.module.css';
function HomePage() {
return (
<div>
<h1 className={styles.title}>Welcome to My React Page</h1>
</div>
);
}状态管理
对于复杂状态逻辑，使用React的useState钩子或引入Redux等状态管理库。在函数组件中管理局部状态。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}数据获取
使用fetch或axios从API获取数据。在useEffect钩子中处理异步请求，避免直接放在渲染函数中。
import React, { useState, useEffect } from 'react';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}构建与部署
完成开发后，运行构建命令生成优化后的生产版本。使用npm run build创建build文件夹，包含静态文件可部署到任何Web服务器。
npm run build部署选项
将构建好的文件部署到Netlify、Vercel或GitHub Pages等平台。对于GitHub Pages，安装gh-pages包并配置package.json中的部署脚本。
npm install gh-pages --save-dev"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}运行部署命令将项目发布到GitHub Pages。
npm run deploy
