Learning Path

React tutorials

Browse tutorials and chapters for React.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TAXONOMYFrontendFetched/React

React 教程

React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 −React采用声明范..

TUTORIALFrontendFetched/React

React AJAX

React AJAX 在 React 应用中实现 AJAX 请求，通常可以使用 fetch API 或者第三方库如 axios、jquery 等库来进行网络请求。以下是使用这两种方法的基本说明：使用 fetch API 进行 AJAX 请求 fetch 是一个在浏览器中内置的 API，用于发起网络请求。以下是使用 fetch 在 React 组件中发起 AJAX 请求的基本步骤：引入 fetch - 如果你使用的是现代浏览..

TUTORIALFrontendFetched/React

全局状态 — Context + useReducer

全局状态 — Context + useReducer 本章你将学会用 React Context + useReducer 管理跨组件、跨页面的共享数据，并实现「收藏文章」功能。为什么需要全局状态？到目前为止，数据通过 Props 层层传递。但有些数据需要被多个不相关的组件访问：收藏列表需要在首页、详情页、导航栏之间共享用户登录状态所有页面都要知道购物车数据需要跨页面访问 Props 逐层传递（Prop Dri..

TUTORIALFrontendFetched/React

自定义 Hook — 封装可复用逻辑

自定义 Hook — 封装可复用逻辑本章你将学会 React 最佳实践——用自定义 Hook 封装可复用的逻辑，让组件更简洁、更易维护。什么是自定义 Hook？随着功能增多，useState 和 useEffect 散落在组件中，不同组件间有重复逻辑。自定义 Hook 就是把多个 Hook 的组合逻辑提取到一个以 use 开头的函数中。它的本质：一个内部使用了 React Hook 的普通 JS 函数。为什么需要..

TUTORIALFrontendFetched/React

打包上线 — 部署到 Vercel

打包上线 — 部署到 Vercel 本章你将学会如何把本地开发的博客项目打包，并免费部署到互联网上，获得公开的访问链接。构建生产包开发时运行 npm run dev，Vite 在本地启动开发服务器，支持热更新。部署时需要的是优化压缩后的生产包。 $ npm run build 执行后，项目根目录下生成 dist/ 文件夹： dist/ ├── index.html # 入口 HTML..

TUTORIALFrontendFetched/React

React 博客项目

React 博客项目本章带你从零开始，用 Vite 创建一个 React 博客项目，并理解 JSX 语法和项目结构。环境准备在开始之前，确保电脑上已安装 Node.js（建议 v16 以上）。 Node.js 是 JavaScript 的运行时环境，npm 是其自带的包管理器。检查 Node.js 是否已安装 $ node -v v20.10.0 如果显示版本号，说明已安装。如果没有，去 nodejs.org ..

TUTORIALFrontendFetched/React

拆分组件 — Props 与事件回调

拆分组件 — Props 与事件回调组件化是 React 最核心的设计思想。本章你将学会把页面拆成可复用的小组件，通过 Props 和回调函数实现父子通信。为什么要拆组件？ App.jsx 写得越来越长，上百行代码挤在一起，难以维护和复用。拆组件的原则：每个组件只负责一件事，组合起来完成复杂功能。什么粒度合适？页面区域是否该拆成组件理由导航栏是每个页面都需要，独立功能文章卡片是列表里每篇都是同一个结构分类筛..

TUTORIALFrontendFetched/React

路由跳转

路由跳转本章你将学会用 React Router v6 实现无刷新的页面跳转，包括动态路由和参数读取。为什么要用路由？传统的多页面网站，每次点击链接都要向服务器请求新页面，有白屏闪烁。前端路由让 URL 变化时由 JS 控制显示哪个组件，不向服务器发请求。好处：切换流畅，体验像原生 APP。 React Router v6 核心概念概念作用对应代码路由表定义 URL 与组件的映射<Route..

TUTORIALFrontendFetched/React

useEffect 进阶 — 实时搜索

useEffect 进阶 — 实时搜索本章你将深入 useEffect 的依赖变化机制，实现搜索框实时过滤和防抖优化。 useEffect 依赖变化触发当 useEffect 的依赖数组中某个值变化时，React 会重新执行 effect。实例 [mycode4 type='javascript'] import { useState, useEffect } from 'react�..

TUTORIALFrontendFetched/React

JSX 渲染文章列表

JSX 渲染文章列表本章你将学会用 JSX 表达式把 JS 数据渲染成界面，让博客首页展示文章卡片列表。 {} 在 JSX 中嵌入表达式在 JSX 中，花括号 {} 是进入 JavaScript 世界的入口。任何 JS 表达式都可以放在花括号里：变量、运算、函数调用、三元表达式等。实例 [mycode4 type='javascript'] function HomePage() { cons..

TUTORIALFrontendFetched/React

副作用与数据请求 — useEffect

副作用与数据请求 — useEffect 本章你将学会 React 最重要的副作用 Hook——useEffect，并在恰当的时机用 fetch 从 JSON 文件加载博客数据。什么是副作用？在 React 中，副作用（Side Effect）指的是那些与渲染无关的操作：向服务器请求数据操作 localStorage 设置定时器 setInterval 手动修改 DOM 订阅外部事件副作用不能在组件函数体里直接..

TUTORIALFrontendFetched/React

响应式数据 — useState

响应式数据 — useState useState 是 React 最重要的 Hook。本章你将理解 React 的状态管理机制，并实现分类筛选功能。 React 的「响应式」与 Vue3 有何不同？ Vue3 用 ref/reactive 创建响应式数据，数据变了视图自动更新。 React 的思路不同：当你修改 state，React 会用新的 state 重新执行一遍组件函数，渲染出新的视图。这就是 React 名字的由来..

TUTORIALFrontendFetched/React

React 组件 API

React 组件 API React 组件 API 涉及多个重要的方面，包括生命周期方法、状态管理、属性传递和事件处理。以下是 React 组件 API 的详细说明：生命周期方法 React 组件的生命周期方法分为三个主要阶段：挂载、更新和卸载，详细说明参见：React 组件的生命周期。挂载阶段 constructor(props): 构造函数，用于初始化状态或绑定方法。 ..

TUTORIALFrontendFetched/React

React 组件生命周期

React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting(挂载)：已插入真实 DOM Updating(更新)：正在被重新渲染 Unmounting(卸载)：已移出真实 DOM 挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor(): 在 React 组件挂载之前，会调用它的构造函数。 getDerivedStat..

TUTORIALFrontendFetched/React

React 组件

React 组件 React 组件是构建 React 应用的基本单元，可以把组件理解为可复用的、独立的 UI 单元，每个组件封装了自己的结构、样式、逻辑和状态。 React 组件是构建应用的基石，组件可以小到一个按钮，也可以大到整个页面。组件可以分为：函数组件和类组件。从技术角度讲，React 组件就是一个返回 React 元素（通常是 JSX）的 JavaScript 函数或类。 // 最简单的组件 function H..

TUTORIALFrontendFetched/React

React 条件渲染

React 条件渲染在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。先来看两个组件: function UserGreeting(props) { return 欢迎回来!; }..

TUTORIALFrontendFetched/React

React 条件判断

React 条件判断在 React 中，可以通过 JavaScript 的条件语句来动态渲染组件或元素。以下是几种常用的在 React 中处理条件渲染的方法： 1. 使用 if 语句在 render 方法或函数组件的返回值中使用 if 语句来决定渲染内容。实例 [mycode4 type='js'] import React from 'react'; import ReactDOM ..

TUTORIALFrontendFetched/React

React 创建第一个项目

React 创建第一个项目本章节我们将详细介绍如何使用 React 创建第一个项目。在开始之前，你需要确保已经安装了以下工具： Node.js 和 npm（Node 包管理器）：React 项目依赖于 Node.js 和 npm 来管理依赖和启动开发服务器。你可以通过以下命令检查版本，确保已经安装成功： node -v npm -v 代码编辑器推荐使用 VS Code，VS Code 使用可以详细参考： VS Code 教..

TUTORIALFrontendFetched/React

React 使用 CSS 样式

React 使用 CSS 样式在 React 应用程序中使用 CSS 有多种方法。以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。内联样式在 React 中直接在元素内使用 CSS 样式是通过内联样式来实现的。内联样式是将 CSS 样式直接作为一个对象传递给元素的 style 属性。每个样式属性都以驼峰命名法表示，而不是传统的 CSS 属性名称。直接在元素内部使用：实例 [mycode4 type=&..

TUTORIALFrontendFetched/React

React 事件处理

React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) HTML 通常写法是：激活按钮 React 中写法为：激活按钮在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你..

TUTORIALFrontendFetched/React

React 表单与事件

React 表单与事件本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存..

TUTORIALFrontendFetched/React

React Hooks

React Hooks React Hooks 是 React 16.8 引入的一项重要特性，它使函数组件能够拥有类组件的一些特性，例如状态管理和生命周期方法的使用。通过 Hooks，可以更加简洁和灵活地编写 React 组件。 1. 什么是 React Hooks？ React Hooks 是一种函数式组件的增强机制，它允许你在不编写类组件的情况下使用 React 的特性。主要的 Hooks 包括 useState, u..

TUTORIALFrontendFetched/React

React 安装(CDN)

React 安装(CDN) React 可以直接下载使用，下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 18.2.0，你可以在官网 https://reactjs.org/ 下载最新版。使用字节跳动的 React CDN 库，地址如下： [mycode4 type='html'] [/mycode4] 使用 Staticfile CDN 的 React CDN 库，地址如下： ..

TUTORIALFrontendFetched/React

React 安装(NPM)

React 安装(NPM) 在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装： node -v npm -v 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。国内使用 npm 速度很慢，你可以使用淘宝定制..