如何开始写react
开始写React的步骤
安装Node.js和npm
确保系统已安装Node.js（包含npm）。可在终端运行node -v和npm -v验证版本。推荐使用Node.js 16+和npm 8+。
创建React项目
使用官方工具create-react-app快速搭建项目。运行命令：
npx create-react-app my-app
cd my-app
npm start这会生成项目结构并启动开发服务器（默认访问http://localhost:3000）。
理解项目结构
关键文件和目录：
src/App.js：主组件入口src/index.js：渲染根组件public/index.html：HTML模板package.json：依赖和脚本配置
编写第一个组件
创建函数组件示例：
// src/components/Hello.js
function Hello() {
return <h1>Hello React!</h1>;
}
export default Hello;在App.js中引入：
import Hello from './components/Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}添加交互性
使用useState实现状态管理：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}样式处理
支持CSS模块化（创建Component.module.css）：
/* Button.module.css */
.button {
background: #61dafb;
padding: 10px 20px;
}组件中引入：
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Styled</button>;
}构建和部署
生产环境构建命令：
npm run build生成优化后的build目录，可部署到静态服务器或云服务（如Vercel、Netlify）。
学习资源推荐
- 官方文档：reactjs.org/docs
- 实践项目：从Todo List开始
- 社区资源：React Patterns、Awesome React
