React 入门指南

一、环境搭建与项目创建

1. 使用 Vite 快速初始化

# 创建 React 项目（以 react-basic 为例）
npm create vite@latest react-basic -- --template react

# 进入项目目录并安装依赖
cd react-basic
npm install

# 启动开发服务器
npm run dev

此时访问 http://localhost:5173 即可看到初始页面。

---

二、核心文件解析

1. 项目结构概览

react-basic
├── node_modules      # 依赖包
├── public            # 静态资源
├── src
│   ├── assets        # 图片等资源
│   ├── App.css       # 组件样式
│   ├── App.jsx       # 根组件
│   ├── main.jsx      # 入口文件
│   └── index.css     # 全局样式
├── index.html        # HTML 模板
├── package.json      # 项目配置
└── vite.config.js    # Vite 构建配置

2. 入口文件 main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

// 创建根节点并挂载组件
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

• createRoot：将 <div id="root"></div> 转换为 React 的根容器。
• StrictMode：严格模式，帮助检测潜在问题。

---

三、组件开发基础

1. 函数组件定义

// App.jsx
function App() {
  return (
    <div className="App">
      <h1>Hello React!</h1>
    </div>
  );
}
export default App;

• 组件要求 ：首字母大写，必须有返回值（JSX 或 null）。
• 空标签 ：使用 <></> 包裹多个元素，避免额外 DOM 嵌套。

---

四、数据渲染与动态处理

1. 循环渲染（列表渲染）

const list = [
  { id: 1, name: 'React' },
  { id: 2, name: 'Vue' }
];

function App() {
  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

• key 的作用：优化虚拟 DOM 的 Diff 算法，避免列表项错乱。
• 注意 ：key 必须是唯一且稳定的（如数据库 ID）。

---

2. 条件渲染

const isReactFun = true;

function App() {
  return (
    <div>
      {/* 三元表达式 */}
      {isReactFun ? <h1>React 真好玩</h1> : <h2>Vue 更有趣</h2>}

      {/* 逻辑与运算符 */}
      {isReactFun && <p>快来学习 React 吧！</p>}
    </div>
  );
}

---

3. 动态样式绑定

// 行内样式（对象写法）
const styleObj = { color: 'red', fontSize: '20px' };

function App() {
  return (
    <div>
      {/* 静态类名 */}
      <div className="box">静态样式</div>

      {/* 动态类名 */}
      <div className={isActive ? 'active' : 'inactive'}>动态类名</div>

      {/* 行内样式 */}
      <div style={{ color: 'blue' }}>行内样式写法1</div>
      <div style={styleObj}>行内样式写法2</div>
    </div>
  );
}

---

五、事件绑定与参数传递

1. 基本事件绑定

function handleClick() {
  console.log('按钮被点击了！');
}

function App() {
  return (
    <button onClick={handleClick}>点击我</button>
  );
}

2. 传递参数

function handleDelete(id, event) {
  console.log('删除 ID:', id);
  event.preventDefault(); // 阻止默认行为
}

function App() {
  return (
    <button onClick={(e) => handleDelete(123, e)}>删除</button>
  );
}

• 注意 ：若直接写 onClick={handleDelete(123)}，函数会立即执行，需用箭头函数包裹。

---

六、组件通信与状态管理

1. 父子组件通信

// 父组件
function Parent() {
  const message = "来自父组件的数据";
  return <Child msg={message} />;
}

// 子组件
function Child({ msg }) {
  return <div>{msg}</div>;
}

2. 使用 useState 管理状态

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <span>{count}</span>
    </div>
  );
}

---

七、常见问题与解决方案

1. 为什么需要 key 属性？

• Diff 算法优化：帮助 React 识别列表项的唯一性，减少不必要的 DOM 操作。
• 错误用法 ：避免使用数组索引作为 key（可能导致渲染错误）。

2. 如何解决函数立即执行？

// 错误写法：函数立即执行
<button onClick={handleClick()}>按钮</button>

// 正确写法：传递函数引用
<button onClick={handleClick}>按钮</button>

// 需要参数时使用箭头函数
<button onClick={() => handleDelete(id)}>删除</button>

---

八、下一步学习建议

1. 路由管理 ：学习 react-router-dom 实现多页面跳转。
2. 状态管理 ：掌握 Redux 或 Context API 处理全局状态。
3. Hooks 进阶 ：探索 useEffect、useRef 等核心 Hook。
4. 组件库集成 ：使用 Ant Design 或 Material-UI 加速开发。

通过以上步骤，你已经掌握了 React 的基础开发能力。接下来，通过实际项目实践，逐步深入 React 的高级特性！