Learning Path
浏览 React 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
51
React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 −React采用声明范..
React AJAX 在 React 应用中实现 AJAX 请求，通常可以使用 fetch API 或者第三方库如 axios、jquery 等库来进行网络请求。 以下是使用这两种方法的基本说明： 使用 fetch API 进行 AJAX 请求 fetch 是一个在浏览器中内置的 API，用于发起网络请求。以下是使用 fetch 在 React 组件中发起 AJAX 请求的基本步骤： 引入 fetch - 如果你使用的是现代浏览..
全局状态 — Context + useReducer 本章你将学会用 React Context + useReducer 管理跨组件、跨页面的共享数据，并实现「收藏文章」功能。 为什么需要全局状态？ 到目前为止，数据通过 Props 层层传递。但有些数据需要被多个不相关的组件访问： 收藏列表需要在首页、详情页、导航栏之间共享 用户登录状态所有页面都要知道 购物车数据需要跨页面访问 Props 逐层传递（Prop Dri..
自定义 Hook — 封装可复用逻辑 本章你将学会 React 最佳实践——用自定义 Hook 封装可复用的逻辑，让组件更简洁、更易维护。 什么是自定义 Hook？ 随着功能增多，useState 和 useEffect 散落在组件中，不同组件间有重复逻辑。 自定义 Hook 就是把多个 Hook 的组合逻辑提取到一个以 use 开头的函数中。 它的本质：一个内部使用了 React Hook 的普通 JS 函数。 为什么需要..
打包上线 — 部署到 Vercel 本章你将学会如何把本地开发的博客项目打包，并免费部署到互联网上，获得公开的访问链接。 构建生产包 开发时运行 npm run dev，Vite 在本地启动开发服务器，支持热更新。 部署时需要的是优化压缩后的生产包。 $ npm run build 执行后，项目根目录下生成 dist/ 文件夹： dist/ ├── index.html # 入口 HTML..
React 博客项目 本章带你从零开始，用 Vite 创建一个 React 博客项目，并理解 JSX 语法和项目结构。 环境准备 在开始之前，确保电脑上已安装 Node.js（建议 v16 以上）。 Node.js 是 JavaScript 的运行时环境，npm 是其自带的包管理器。 检查 Node.js 是否已安装 $ node -v v20.10.0 如果显示版本号，说明已安装。 如果没有，去 nodejs.org ..
拆分组件 — Props 与事件回调 组件化是 React 最核心的设计思想。本章你将学会把页面拆成可复用的小组件，通过 Props 和回调函数实现父子通信。 为什么要拆组件？ App.jsx 写得越来越长，上百行代码挤在一起，难以维护和复用。 拆组件的原则：每个组件只负责一件事，组合起来完成复杂功能。 什么粒度合适？ 页面区域是否该拆成组件理由 导航栏是每个页面都需要，独立功能 文章卡片是列表里每篇都是同一个结构 分类筛..
路由跳转 本章你将学会用 React Router v6 实现无刷新的页面跳转，包括动态路由和参数读取。 为什么要用路由？ 传统的多页面网站，每次点击链接都要向服务器请求新页面，有白屏闪烁。 前端路由 让 URL 变化时由 JS 控制显示哪个组件，不向服务器发请求。 好处：切换流畅，体验像原生 APP。 React Router v6 核心概念 概念作用对应代码 路由表定义 URL 与组件的映射<Route..
useEffect 进阶 — 实时搜索 本章你将深入 useEffect 的依赖变化机制，实现搜索框实时过滤和防抖优化。 useEffect 依赖变化触发 当 useEffect 的依赖数组中某个值变化时，React 会重新执行 effect。 实例 [mycode4 type='javascript'] import { useState, useEffect } from 'react�..
JSX 渲染文章列表 本章你将学会用 JSX 表达式把 JS 数据渲染成界面，让博客首页展示文章卡片列表。 {} 在 JSX 中嵌入表达式 在 JSX 中，花括号 {} 是进入 JavaScript 世界的入口。 任何 JS 表达式都可以放在花括号里：变量、运算、函数调用、三元表达式等。 实例 [mycode4 type='javascript'] function HomePage() { cons..
副作用与数据请求 — useEffect 本章你将学会 React 最重要的副作用 Hook——useEffect，并在恰当的时机用 fetch 从 JSON 文件加载博客数据。 什么是副作用？ 在 React 中，副作用（Side Effect） 指的是那些与渲染无关的操作： 向服务器请求数据 操作 localStorage 设置定时器 setInterval 手动修改 DOM 订阅外部事件 副作用不能在组件函数体里直接..
响应式数据 — useState useState 是 React 最重要的 Hook。本章你将理解 React 的状态管理机制，并实现分类筛选功能。 React 的「响应式」与 Vue3 有何不同？ Vue3 用 ref/reactive 创建响应式数据，数据变了视图自动更新。 React 的思路不同：当你修改 state，React 会用新的 state 重新执行一遍组件函数，渲染出新的视图。 这就是 React 名字的由来..
React 组件 API React 组件 API 涉及多个重要的方面，包括生命周期方法、状态管理、属性传递和事件处理。 以下是 React 组件 API 的详细说明： 生命周期方法 React 组件的生命周期方法分为三个主要阶段：挂载、更新和卸载，详细说明参见：React 组件的生命周期 。 挂载阶段 constructor(props): 构造函数，用于初始化状态或绑定方法。 ..
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting(挂载)：已插入真实 DOM Updating(更新)：正在被重新渲染 Unmounting(卸载)：已移出真实 DOM 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor(): 在 React 组件挂载之前，会调用它的构造函数。 getDerivedStat..
React 组件 React 组件是构建 React 应用的基本单元，可以把组件理解为可复用的、独立的 UI 单元，每个组件封装了自己的结构、样式、逻辑和状态。 React 组件是构建应用的基石，组件可以小到一个按钮，也可以大到整个页面。 组件可以分为：函数组件和类组件。 从技术角度讲，React 组件就是一个返回 React 元素（通常是 JSX）的 JavaScript 函数或类。 // 最简单的组件 function H..
React 条件渲染 在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。 先来看两个组件: function UserGreeting(props) { return 欢迎回来!; }..
React 条件判断 在 React 中，可以通过 JavaScript 的条件语句来动态渲染组件或元素。以下是几种常用的在 React 中处理条件渲染的方法： 1. 使用 if 语句 在 render 方法或函数组件的返回值中使用 if 语句来决定渲染内容。 实例 [mycode4 type='js'] import React from 'react'; import ReactDOM ..
React 创建第一个项目 本章节我们将详细介绍如何使用 React 创建第一个项目。 在开始之前，你需要确保已经安装了以下工具： Node.js 和 npm（Node 包管理器）：React 项目依赖于 Node.js 和 npm 来管理依赖和启动开发服务器。 你可以通过以下命令检查版本，确保已经安装成功： node -v npm -v 代码编辑器推荐使用 VS Code，VS Code 使用可以详细参考： VS Code 教..
React 使用 CSS 样式 在 React 应用程序中使用 CSS 有多种方法。以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。 内联样式 在 React 中直接在元素内使用 CSS 样式是通过内联样式来实现的。内联样式是将 CSS 样式直接作为一个对象传递给元素的 style 属性。每个样式属性都以驼峰命名法表示，而不是传统的 CSS 属性名称。 直接在元素内部使用： 实例 [mycode4 type=&..
React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) HTML 通常写法是： 激活按钮 React 中写法为： 激活按钮 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你..
React 表单与事件 本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。 在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存..
React Hooks React Hooks 是 React 16.8 引入的一项重要特性，它使函数组件能够拥有类组件的一些特性，例如状态管理和生命周期方法的使用。通过 Hooks，可以更加简洁和灵活地编写 React 组件。 1. 什么是 React Hooks？ React Hooks 是一种函数式组件的增强机制，它允许你在不编写类组件的情况下使用 React 的特性。主要的 Hooks 包括 useState, u..
React 安装(CDN) React 可以直接下载使用，下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 18.2.0，你可以在官网 https://reactjs.org/ 下载最新版。 使用字节跳动的 React CDN 库，地址如下： [mycode4 type='html'] [/mycode4] 使用 Staticfile CDN 的 React CDN 库，地址如下： ..
React 安装(NPM) 在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装： node -v npm -v 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。 我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。 国内使用 npm 速度很慢，你可以使用淘宝定制..