web项目如何使用react
使用 React 构建 Web 项目的关键步骤
环境准备
安装 Node.js 和 npm（或 yarn），确保开发环境支持现代 JavaScript。通过以下命令创建 React 项目：
npx create-react-app my-app
cd my-app
npm start这会生成一个基础项目结构并启动开发服务器。
组件化开发
React 的核心是组件。创建一个简单的函数组件：
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>
);
}复杂应用可引入 Redux 或 Context API。
路由配置
通过 react-router-dom 实现多页面导航：
npm install react-router-dom示例配置：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Route exact path="/" component={Home} />
</Router>
);
}样式处理
支持 CSS Modules、Styled-components 或 Sass：
import styles from './App.module.css';
function App() {
return <div className={styles.container}>Content</div>;
}数据获取
使用 fetch 或 axios 进行 API 调用：
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
}, []);构建与部署
运行 npm run build 生成优化后的生产代码，可部署到 Netlify、Vercel 或静态服务器。
