react 如何编写app
使用 React 编写 App 的基本流程
环境准备 确保已安装 Node.js（建议版本 16+）和 npm/yarn。通过以下命令创建 React 项目：
npx create-react-app my-app
cd my-app
npm start项目结构
src/App.js：主组件入口src/index.js：渲染根组件public/index.html：HTML 模板
核心开发步骤
组件开发 创建函数组件或类组件：
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 类组件
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>
);
}路由配置 安装 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>
);
}构建与部署
生产构建 运行构建命令生成优化后的代码：
npm run build部署选项
- 静态服务器：将
build文件夹内容上传至 Netlify/Vercel - Node.js 服务器：使用 Express 托管静态文件
- CDN：上传至云存储并配置 CDN
进阶功能扩展
状态管理库 Redux 或 MobX 可用于复杂状态管理：
npm install @reduxjs/toolkit react-reduxUI 组件库 集成 Material-UI 或 Ant Design：
npm install @mui/material @emotion/reactAPI 交互
使用 fetch 或 Axios 进行数据请求：
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data));
}, []);
