Logo

React courses and guides

React is a powerful JavaScript library for building user interfaces, developed by Facebook. It uses a component-based architecture and virtual DOM for efficient rendering, making it the most popular choice for modern web applications. React's ecosystem includes tools like Next.js, React Native for mobile development, and extensive community support.

React

Explore Everything React

使用 Postman 和 WebdriverIO 测试 React 应用程序

使用 Postman 和 WebdriverIO 测试 React 应用程序

在当今的数字世界中,测试工程师必须具备高效且有效的策略与技能,以在快速迭代的敏捷环境中测试软件。Postman 是一款广为人知的 API 测试工具,可用于构建、测试和发布 API,它允许你执行临时测试以及完全自动化的测试套件。WebdriverIO 是一个现代的 JavaScript 测试框架,适用于浏览器和移动设备的自动化测试。 你将从传统与新兴的软件构建与测试方法的基础知识开始。接着,学习测试规划与设计策略,帮助测试工程师为任何应用选择最佳的测试用例执行方式。然后,你将了解如何从终端用户的角度使用 Postman 测试应用程序。最后,你将通过 Postman 和 WebdriverIO 对一个工单管理器进行测试。 完成本课程后,你将掌握在测试工程领域或其他需要测试活动的角色中取得成功并实现职业发展的关键技能。

12h

Beginner

Default course image

使用 TypeScript 构建多态 React 组件

TypeScript 已成为构建现代 Web 应用的行业标准。随着设计系统和可复用组件的兴起,为现代 Web 工程师掌握构建强类型多态组件的能力变得尤为重要。 本课程采用自底向上的方法,教你如何构建强类型的多态组件。你将从一个简单的多态组件实现开始,分析其存在的问题。接着,利用 TypeScript 构建一个可用于生产环境的组件接口。最后,通过支持组件引用等高级用例,开发出一个可在多个组件中复用的实用工具。 完成本课程后,你将具备构建适用于设计系统的组件的能力,并超越基础的可复用需求。

8h

Intermediate

使用 Python 和 Transcrypt 构建完整的 Web 应用

使用 Python 和 Transcrypt 构建完整的 Web 应用

Python 已被广泛用于大多数 Web 应用的后端,但遗憾的是,它无法直接在浏览器中运行来驱动前端。Transcrypt 可以帮助解决这一问题,通过使用 Python 同时编写前后端代码,构建更加统一的 Web 项目。 本课程基于《使用 Python Transcrypt 编译器进行前端开发》一课的内容,实现一个完整的 React 与 Python 结合的 Web 项目。在每一章中,我们将对现有代码进行重构,添加新功能,逐步完善应用程序。每章结束后,都会得到一个可运行的应用程序,包含截至目前为止所添加的所有功能。

66h 15m

Beginner

使用 Jest 和 React Testing Library 测试 React 应用

使用 Jest 和 React Testing Library 测试 React 应用

通过本课程,你将掌握使用 Jest 和 React Testing Library 对 React 应用进行自动化测试的技能,这两者是 React 项目事实上的测试工具。这些测试能让你更有信心地发布应用的新版本,同时提升发布频率,更快地将功能交付给用户。 你将学会编写稳健的测试,即使在代码优化和重构时也能保持稳定,从而降低维护成本。 课程还将教你如何模拟用户与应用的交互行为,并深入掌握对应用中异步逻辑部分的可靠测试方法。 课程中穿插的定期测验和练习将帮助你不断巩固所学知识。

16h

Intermediate

使用 React 进行测试驱动开发

使用 React 进行测试驱动开发

本课程深入探讨 React 中的测试。你将学习使用 Jest 和 Enzyme 等工具进行单元测试和集成测试。你还将了解 ESlint、Prettier、Babel、Webpack 和 Travis CI 等其他工具,它们能为编码和测试带来便利。

17h 30m

Beginner

使用 JavaScript 通过 Ticketmaster APIs 获取活动数据

使用 JavaScript 通过 Ticketmaster APIs 获取活动数据

Ticketmaster 是全球领先的活动票务管理和销售平台。Ticketmaster API 提供多种集成方式,帮助用户了解票价信息,并在 Ticketmaster 市场中便捷地购买或出售门票。 本课程将带你了解 Ticketmaster 的 Discovery API 和库存状态 API 的基础知识。你将学习如何使用这些 API 获取与活动相关的信息,通过端点搜索场馆和演出项目。此外,你还将掌握如何检查 Ticketmaster API 中门票库存状态这一关键功能。 同时,你将学习如何在 React 应用中集成这些 API 的功能。完成本课程后,你将具备使用这些 API 构建网页应用的实际经验。

4h

Beginner

在 React Native 中简化状态管理

在 React Native 中简化状态管理

状态管理是管理应用程序数据的过程。作为开发者,确保数据在应用的不同部分之间保持一致和同步至关重要。 你将首先学习如何在 React Native 中使用状态(state)和属性(props)来实现状态管理,并仅通过 React Native 内置方案构建一个真实的 Funbook 应用。接着,你将了解 Redux 和 MobX 两个库,以及如何利用它们在应用中实现点赞按钮功能。然后,你将使用 XState 库来实现点赞按钮,该库将状态视为有限状态机。你还将学习 Jotai 库,它采用原子化状态进行状态管理。最后,你将掌握 React Query 如何提供便捷的服务器端数据获取与数据变更操作,从而替代全局状态管理的需求。 完成本课程后,你将具备实现复杂状态管理功能的能力,确保应用各部分之间的数据一致性与同步。

27h

Intermediate

在 React 中使用 TypeScript

在 React 中使用 TypeScript

如果你是一名 React 开发者,希望更快、更稳健地构建 React 应用,那么这门课程正适合你。你将学习如何将 TypeScript 集成到 React 中,提升开发效率,并创建更易于维护的应用程序。 在本课程中,你将学习如何利用 TypeScript 强大的类型系统,让 React 开发更高效、代码更清晰易读。你将掌握如何为组件的属性(props)、状态(state)和事件(events)设置强类型,从而快速了解可传递的内容,并有效避免错误。 最后,你将学习如何使用 TypeScript 搭建 React 项目。首先,你会掌握如何使用 Create React App 工具进行配置,然后学习如何通过 Webpack 和 Babel 创建一个支持 TypeScript 的 React 项目。

9h

Intermediate

通往 React 的道路:Hooks 篇

通往 React 的道路:Hooks 篇

这是对我现有课程《通往学习 React 之路》的重新推出。自从我首次创建该课程以来,React 已经发生了诸多变化,因此我在此为你提供使用现代 React 所需的全部知识。(如果你需要了解传统 React 的内容,旧版课程仍然可以获取。) 在本课程中,你将深入学习 React 的基础知识,涵盖包括 Hooks 在内的所有新特性。虽然我也会讲解一些传统特性,以便你在维护旧代码库时能够应对,但课程的重点仍集中在现代 React 的应用上。你将学习如何为应用添加样式、应用维护技巧,以及性能优化等更高级的概念。 在整个课程中,你将通过构建一个 Hacker News 应用获得实际开发经验。完成本课程后,你将具备独立开发应用的能力,并拥有可用于作品集展示的实际项目。

25h

Beginner

React 深入详解:从入门到精通

React 深入详解:从入门到精通

本课程的主要目标是为你提供出色的 React 入门指导及其生态系统的全面介绍,深入探讨高级特性,并尽可能多地传授最佳实践。此外,课程还将深入剖析当前最流行、最新且最直接的 React 使用方法。

16h 40m

Beginner

Next.js — 构建 React 应用的终极方式

Next.js — 构建 React 应用的终极方式

React 是一个出色的框架,能够帮助你构建在速度、功能和易用性方面无与伦比的前端应用。然而,React 在搜索引擎优化方面存在不足,而这正是 Next.js 的优势所在。 在本课程中,你将学习如何使用 giphy.com 的 API 构建一个 Giphy 搜索应用。课程开始时,你将掌握如何对 Next.js 页面进行静态优化,为用户带来极快的加载体验。随后,你将深入学习构建 Giphy 搜索应用的核心机制。 在课程的后半部分,你将学习如何进行 SEO 优化。学完本课程后,你不仅能够将这一优秀的框架添加到简历中,还能为自己的作品集增添一个亮眼的新应用。

5h

Intermediate

使用 Ionic 和 React 开发移动应用

使用 Ionic 和 React 开发移动应用

Ionic Framework 是一个用于混合移动应用开发的开源 SDK。它通过提供适用于 iOS 和 Android 的原生组件库,能够呈现符合各平台特性的 UI 元素,因而广受认可。 在本课程中,你将全面学习使用 Ionic 和 React 进行开发的各项核心内容。在整个学习过程中,你将逐步构建一个功能完整的考勤应用程序,并可将其加入个人作品集。 完成课程后,你将具备充分的信心和能力,独立创建并部署面向 iOS 或 Android 的移动应用。

10h

Advanced

Delve into any sector with React

  • Single-page applications (SPAs)
  • Progressive web apps (PWAs)
  • Mobile development (React Native)
  • Server-side rendering (Next.js)

React's component-based architecture and virtual DOM make it the go-to choice for building scalable, maintainable user interfaces. From startups to Fortune 500 companies, React powers some of the world's most popular applications.

Get started with React

Begin your React journey by mastering components, state management, and the React ecosystem. Learn to build interactive user interfaces that scale from simple websites to complex enterprise applications. Our courses cover everything from React fundamentals to advanced patterns and best practices.

Explore everything: React

Become a React expert with hands-on courses designed for real-world development!

  • Component mastery: Learn to build reusable, maintainable components with modern React patterns.
  • State management: Master React hooks, Context API, and popular libraries like Redux and Zustand.
  • Performance optimization: Understand React's rendering process and optimization techniques.
  • Ecosystem exploration: Dive into Next.js, React Router, testing libraries, and development tools.
  • Industry projects: Build production-ready applications that showcase your React expertise.

Experience a learning journey where every lesson is interactive, every project is exciting, and every challenge is a chance to level up your skills. Get ready to code, create, and conquer the world of programming—because your future in tech starts now!

Frequently Asked Questions

React uses a virtual DOM for efficient updates, component-based architecture for reusability, and unidirectional data flow for predictable state management. Its large ecosystem, strong community support, and backing by Facebook make it a reliable choice for modern web development.

Yes, solid JavaScript knowledge is essential before learning React. You should understand ES6+ features like arrow functions, destructuring, modules, and promises. React builds upon JavaScript concepts, so a strong foundation will make learning React much easier and more effective.

React is versatile for building single-page applications (SPAs), progressive web apps (PWAs), mobile apps with React Native, desktop applications with Electron, and even static sites with Gatsby. Companies like Netflix, Airbnb, and Instagram use React for their user interfaces.