HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

ReactJS 教程

ReactJS - 主页 ReactJS - 简介 ReactJS - 路线图 ReactJS - 安装 ReactJS - 功能 ReactJS - 优势和缺点 ReactJS - 架构 ReactJS - 创建 React 应用程序 ReactJS - JSX ReactJS - 组件 ReactJS - 嵌套组件 ReactJS - 使用组件 ReactJS - 集合组件 ReactJS - 样式 ReactJS - 属性 (props) ReactJS - 使用属性创建组件 ReactJS - props 验证 ReactJS - 构造函数 ReactJS - 组件生命周期 ReactJS - 事件管理 ReactJS - 创建事件感知组件 ReactJS - Expense Manager 事件 ReactJS - 状态管理 ReactJS - 状态管理 API ReactJS - 无状态组件 ReactJS - Hooks 进行状态管理 ReactJS - Hooks 的组件生命周期 ReactJS - 布局组件 ReactJS - 分页 ReactJS - Material UI ReactJS - Http 客户端编程 ReactJS - 表单编程 ReactJS - 受控组件 ReactJS - 非受控组件 ReactJS - Formik ReactJS - 条件渲染 ReactJS - 列表 ReactJS - Key 键 ReactJS - 路由 ReactJS - Redux ReactJS - 动画 ReactJS - Bootstrap ReactJS - Map ReactJS - 表格 ReactJS - 使用 Flux 管理状态 ReactJS - 测试 ReactJS - CLI 命令 ReactJS - 构建和部署 ReactJS - 示例

Hooks

ReactJS - Hooks 简介 ReactJS - 使用 useState ReactJS - 使用 useEffect ReactJS - 使用 useContext ReactJS - 使用 useRef ReactJS - 使用 useReducer ReactJS - 使用 useCallback ReactJS - 使用 useMemo ReactJS - 自定义 Hooks

ReactJS 高级

ReactJS - 可访问性 ReactJS - 代码拆分 ReactJS - 上下文 ReactJS - 错误边界 ReactJS - 转发 Refs ReactJS - 片段 ReactJS - 高阶组件 ReactJS - 与其他库集成 ReactJS - 优化性能 ReactJS - Profiler API ReactJS - Portals ReactJS - 不使用 ES6 ECMAScript ReactJS - 不使用 JSX 的 React ReactJS - Reconciliation ReactJS - Refs 和 DOM ReactJS - 渲染道具 ReactJS - 静态类型检查 ReactJS - 严格模式 ReactJS - Web 组件

其他概念

ReactJS - 日期选择器 ReactJS - Helmet ReactJS - 内联样式 ReactJS - PropTypes ReactJS - BrowserRouter ReactJS - DOM ReactJS - 轮播 ReactJS - 图标 ReactJS - 表单组件 ReactJS - 参考 API

ReactJS 有用资源

ReactJS - 快速指南 ReactJS - 备忘录 Axios - 备忘录 ReactJS - 有用资源 ReactJS - 讨论

ReactJS 教程
❮ 上一节 下一节 ❯

ReactJS 教程

本 ReactJS 教程包含截至 18.2.0 版本的所有最新更新，涵盖从基础到高级的所有主题。React 是目前最值得学习的 JavScript 库，因为它拥有核心功能基础和庞大的社区。

什么是 ReactJS?

ReactJS 是一个用于构建动态和交互式用户界面 (UI) 的开源 JavaScript 库。React 由 Facebook 开发和发布。 Facebook 不断致力于 React 库的开发，并通过修复错误和引入新功能来增强它。

谁应该学习 ReactJS?

本教程面向初学者和有志于在开发前端 Web 应用程序领域开创事业的专业人士。本教程旨在通过示例帮助您轻松掌握 React 概念。

为什么要学习 ReactJS?

学习 ReactJS 的原因有很多，根据开发行业对 React 开发人员的需求以及 React 提供的功能，这些功能无法被其他框架或库取代。

  • 易于使用:ReactJS 不需要编写冗长的代码，因为它支持组件概念，因此可以创建少量代码并将其用于多个地方。
  • 多模块支持:ReactJS 中有许多模块可用于使您的开发更具可扩展性，并可快速管理。
  • 多应用程序开发:通过使用 React 知识，我们可以创建网页、Web 应用程序、移动应用程序和 VR 应用程序。有很多网站都在使用 ReactJS，比如 Airbnb、Cloudflare、Facebook、Instagram 等。
  • 轻松迁移:由于其学习曲线简单，从其他技术迁移变得非常容易。有大量资源可供学习 ReactJS，从基础到高级。
  • 大型社区:ReactJS 拥有最大的社区之一，可在您遇到代码调试问题或学习新事物时为您提供帮助。

ReactJS 示例代码

由于这是没有环境设置的示例代码，此代码将无法设置 ReactJS 环境，请查看ReactJS 安装文章。

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greeting(props) {
return <h1>Welcome to TutorialsPoint</h1>;
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Greeting />);

ReactJS 的功能

ReactJS 在前端生态系统中扮演着重要角色。ReactJS 具有许多重要功能，是前端开发中最苛刻的库。

  • 虚拟 DOM:虚拟 DOM 是 ReactJS 中使用的一种特殊 DOM。虚拟 DOM 表示当前 HTML 文档的真实 DOM。每当 HTML 文档发生变化时，React 都会使用虚拟 DOM 的先前状态检查更新后的虚拟 DOM，并仅更新实际/真实 DOM 中的差异。
  • 可重用组件:组件只需编写一次，只需在需要该组件的地方调用该组件即可多次使用。
  • 单向数据绑定:单向数据绑定可防止组件中的数据向后流动。组件只能将数据传递给其子组件。这将简化数据处理并降低复杂性。

要了解有关 ReactJS 功能的更多信息，请查看 ReactJS 功能 文章。

学习 ReactJS 的先决条件

在继续本教程之前，我们假设读者具有 HTML、CSS 和 JavaScript 概念的基本知识。

开始使用 ReactJS

要开始使用 ReactJS，我们需要先明确基础知识，然后再进入复杂的主题。我们建议您在阅读每篇文章的同时编写代码，这将有助于您理解这些概念。如果您可以在学习的同时创建一个项目，那将会更有帮助。

ReactJS 基础知识

ReactJS 组件

组件是 ReactJS 的核心，它是 React 应用程序的构建块。 React 组件代表网页中的一小块用户界面。

ReactJS 状态

状态表示给定实例中 React 组件的动态属性的值。 React 为每个组件提供动态数据存储。

ReactJS Hooks

Hooks 是普通的 JavaScript 函数，可以访问使用它的组件的状态和生命周期事件。一般来说，Hooks以 use 关键字开头。

ReactJS Props

Props 用于在组件之间传递数据。在实际项目中，我们需要组件相互交互，而状态无法实现，因为状态是特定组件的私有属性。

ReactJS 的其他重要主题

您还需要了解有关 ReactJS 的其他一些信息，因为它正在快速更新，因此您也必须跟上新功能。您可以在此链接上查看我们最近发布的 ReactJS 文章。这些文章不属于我们的教程。

ReactJS 职位和薪资

ReactJS 是当今流行的前端库。有很多公司雇佣 ReactJS 开发人员，例如 facebook、instagram、airbnb 等。

  • ReactJS 开发人员 - 薪资范围在 ₹ 1.5 Lakhs 到 ₹ 16.0 Lakhs 之间，平均年薪为 ₹ 7.3 Lakhs

关于 ReactJS 的常见问题

它是一个专注于前端的 JavaScript 库，主要用于构建单页或多页 Web 应用程序接口。

ReactJS 与 React 之间没有区别，两者都是相同的。

React 的数据流比 Angular 容易得多，因为它也遵循单向数据绑定。React 还提供了一些例外没有库提供的功能。正因为如此，React 的社区更大，所以你可以立即获得帮助。

正如我们在本文开头所说，本课程既适合初学者也适合高级用户。

React.js 文章

你可以在 React.js 文章 中探索一组 React.js 文章。

❮ 上一节 下一节 ❯