【react】基础教程

目录

[一、React 简介](#一、React 简介)

二、环境搭建

[1. 创建 React 项目](#1. 创建 React 项目)

[2. 项目结构](#2. 项目结构)

三、核心概念

[1. JSX 语法](#1. JSX 语法)

[2. 组件 (Component)](#2. 组件 (Component))

[3. 状态 (State) 与属性 (Props)](#3. 状态 (State) 与属性 (Props))

[4. 事件处理](#4. 事件处理)

[5. 条件渲染](#5. 条件渲染)

[6. 列表渲染](#6. 列表渲染)

四、Hooks（函数组件的核心）

[1. useState](#1. useState)

[2. useEffect](#2. useEffect)

[3. 其他常用 Hooks](#3. 其他常用 Hooks)

五、组件通信

[1. 父传子：通过 Props](#1. 父传子：通过 Props)

[2. 子传父：通过回调函数](#2. 子传父：通过回调函数)

[六、路由管理（使用 React Router）](#六、路由管理（使用 React Router）)

[1. 安装](#1. 安装)

[2. 基础配置](#2. 基础配置)

[七、状态管理（使用 Context API）](#七、状态管理（使用 Context API）)

[1. 创建 Context](#1. 创建 Context)

八、进阶学习方向

九、官方资源

---

一、React 简介

React 是一个用于构建用户界面的 JavaScript 库（专注于视图层），由 Facebook 开发。其核心特性包括：

组件化：将 UI 拆分为独立可复用的组件。

虚拟 DOM：高效更新界面，优化性能。

声明式编程：通过描述 UI 的最终状态，而非具体操作步骤。

二、环境搭建

1. 创建 React 项目

使用官方脚手架工具 create-react-app 快速初始化项目：

npx create-react-app my-app
cd my-app
npm start

2. 项目结构

my-app/
  ├── public/          # 静态资源
  ├── src/             # 源代码
  │    ├── App.js      # 根组件
  │    └── index.js    # 入口文件
  └── package.json     # 依赖配置

三、核心概念

1. JSX 语法

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的结构：

const element = <h1>Hello, React!</h1>;

2. 组件 (Component)

函数组件（推荐）：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

3. 状态 (State) 与属性 (Props)

Props：父组件传递给子组件的数据（只读）。

State ：组件内部管理的动态数据（通过 useState 或 setState 更新）。

function Counter() {
  const [count, setCount] = useState(0); // 使用 useState Hook

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

4. 事件处理

<button onClick={() => alert('Clicked!')}>Click Me</button>

5. 条件渲染

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Login.</h1>;
}

6. 列表渲染

使用 map() 和 key 属性：

function TodoList() {
  const todos = ['Learn React', 'Build a Project', 'Deploy'];
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

四、Hooks（函数组件的核心）

1. useState

管理组件状态：

const [state, setState] = useState(initialValue);

2. useEffect

处理副作用（如数据请求、DOM 操作）：

useEffect(() => {
  // 组件挂载或更新时执行
  fetchData();
  return () => {
    // 组件卸载时清理（如取消订阅）
  };
}, [dependencies]); // 依赖数组控制执行时机

3. 其他常用 Hooks

useContext：访问 React 上下文。

useRef：获取 DOM 引用或保存可变值。

useReducer：复杂状态管理。

五、组件通信

1. 父传子：通过 Props

function Parent() {
  return <Child message="Hello from Parent" />;
}

function Child({ message }) {
  return <p>{message}</p>;
}

2. 子传父：通过回调函数

function Parent() {
  const handleChildClick = (data) => {
    console.log('Child sent:', data);
  };
  return <Child onClick={handleChildClick} />;
}

function Child({ onClick }) {
  return <button onClick={() => onClick('Data from Child')}>Click</button>;
}

六、路由管理（使用 React Router）

1. 安装

npm install react-router-dom

2. 基础配置

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

七、状态管理（使用 Context API）

1. 创建 Context

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Themed Button</button>;
}

八、进阶学习方向

1. 性能优化 ：React.memo, useMemo, useCallback

2. 状态管理库：Redux, MobX

3. 服务端渲染：Next.js

4. UI 库：Material-UI, Ant Design

九、官方资源

• React 官方文档

• React 中文文档

• Create React App 指南

通过实践小项目（如 Todo List、博客系统）巩固知识，逐步深入复杂应用开发！

码字不易，欢迎各位大佬点赞