react 如何编写app
React 开发 App 的基本步骤
创建 React 项目
使用 create-react-app 或 Vite 快速初始化项目：
npx create-react-app my-app
# 或
npm create vite@latest my-app --template react项目结构 主要目录和文件包括：
src/：核心代码目录App.js：根组件index.js：入口文件
public/：静态资源
编写组件 函数组件示例：
import React from 'react';
function MyComponent() {
return <div>Hello React App</div>;
}
export default MyComponent;类组件示例：
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return <div>Hello React App</div>;
}
}
export default MyComponent;状态管理
使用 useState Hook：
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>
);
}路由配置
安装 react-router-dom：
npm install react-router-dom基本路由示例：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}样式处理 CSS Modules 示例：
import styles from './App.module.css';
function App() {
return <div className={styles.container}>Content</div>;
}API 调用
使用 fetch 或 axios：
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data));
}, []);
return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}构建与部署 生产环境构建：
npm run build部署到静态主机服务（如 Vercel、Netlify）或配置服务器。
进阶开发建议
状态管理库 复杂应用可考虑 Redux 或 Context API：
// Context API 示例
const MyContext = React.createContext();
function App() {
return (
<MyContext.Provider value={/* 共享值 */}>
<ChildComponent />
</MyContext.Provider>
);
}性能优化
使用 React.memo 和 useCallback：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});
function Parent() {
const memoizedCallback = React.useCallback(() => {
// 回调函数
}, []);
}测试策略 Jest + React Testing Library 组合：
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
