如何用react构建用户界面
安装 React 环境
使用 Create React App 快速搭建项目环境，运行以下命令：
npx create-react-app my-app
cd my-app
npm start这会生成一个基础项目结构并启动开发服务器。
创建组件
React 的核心是组件化开发。函数组件是推荐的方式：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}或使用 ES6 类组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}管理状态
使用 useState Hook 在函数组件中添加状态：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}类组件通过 this.state 和 this.setState 管理状态。
处理事件
通过 onClick、onChange 等属性绑定事件处理器：
function AlertButton() {
const handleClick = () => alert('Button clicked!');
return <button onClick={handleClick}>Click me</button>;
}数据传递
使用 props 实现父组件向子组件传递数据：
function Parent() {
const data = "Hello from parent";
return <Child message={data} />;
}
function Child(props) {
return <p>{props.message}</p>;
}列表渲染
通过 map 方法动态渲染列表，需为每项添加唯一 key：
function TodoList() {
const todos = ['Task 1', 'Task 2', 'Task 3'];
return (
<ul>
{todos.map((item, index) =>
<li key={index}>{item}</li>
)}
</ul>
);
}样式处理
可通过内联样式、CSS 模块或第三方库（如 styled-components）添加样式：
// 内联样式
const style = { color: 'red' };
function StyledText() {
return <p style={style}>Red text</p>;
}
// CSS 模块
import styles from './App.module.css';
function ModuleStyled() {
return <p className={styles.error}>Error text</p>;
}生命周期管理
函数组件使用 useEffect Hook 处理副作用：
import { useEffect } from 'react';
function Timer() {
useEffect(() => {
const timer = setInterval(() => console.log('Tick'), 1000);
return () => clearInterval(timer); // 清理函数
}, []);
return <div>Check console</div>;
}类组件使用 componentDidMount、componentWillUnmount 等方法。
路由配置
使用 React Router 实现页面导航：
npm install react-router-dom配置路由示例：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}状态管理进阶
复杂应用可使用 Context API 或 Redux：
// Context API 示例
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <Button />;
}
function Button() {
const theme = useContext(ThemeContext);
return <button className={theme}>Themed button</button>;
}
