如何react页面
创建 React 页面
使用 create-react-app 快速初始化项目：
npx create-react-app my-app
cd my-app
npm start基础页面结构
在 src/App.js 中编写基础组件：
import React from 'react';
function App() {
return (
<div className="App">
<h1>Hello React</h1>
</div>
);
}
export default App;添加路由功能
安装 React Router 并配置多页面：
npm install react-router-dom修改 App.js 实现路由：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}状态管理
使用 Hooks 管理组件状态：
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>
);
}样式处理
使用 CSS Modules 实现组件作用域样式：
- 创建
Button.module.css：.button { background: blue; color: white; } - 在组件中引入：
import styles from './Button.module.css';
function Button() { return Styled Button; }
### 数据获取
使用 `fetch` 或 `axios` 获取 API 数据：
```jsx
import React, { useEffect, useState } from 'react';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}组件优化
使用 React.memo 避免不必要的渲染：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 只在 props 变化时重新渲染 */
});生产环境构建
生成优化后的生产版本：
npm run build构建结果将输出到 build 目录，可直接部署到 Web 服务器。
