你好，React

在本学习体验的第一部分，我们将介绍 React 的基础知识，之后会创建第一个 React 项目。接着，我们将通过实现真实功能来探索 React 的新特性，就像开发一个实际的 Web 应用程序一样。最终，我们将拥有一个具备客户端和服务器端搜索、远程数据获取以及高级状态管理等功能的可运行 React 应用。

你好，React

单页应用（SPA）随着第一代 SPA 框架（如 Google 的 Angular、Ember、Knockout 和 Backbone）的出现而变得越来越流行。使用这些框架可以更轻松地构建超越原生 JavaScript 和 jQuery 的复杂 Web 应用。React 是 Facebook 在 2013 年晚些时候推出的又一种 SPA 解决方案。所有这些框架都可用于完全使用 JavaScript 构建整个 Web 应用。

让我们暂时回到 SPA 出现之前的时代：过去，网站和 Web 应用都是由服务器端渲染的。用户在浏览器中访问一个 URL，向 Web 服务器请求一个 HTML 文件及其相关的 HTML、CSS 和 JavaScript 文件。经过一定的网络延迟后，用户在浏览器（客户端）中看到渲染完成的 HTML，并开始与其交互。每次额外的页面跳转（即访问另一个 URL）都会重新触发这一系列流程。在这种早期模式中，几乎所有关键逻辑都由服务器处理，而客户端仅承担极小的角色，只是逐页显示内容。虽然基本的 HTML 和 CSS 被用来组织应用结构，但只会加入少量 JavaScript 来实现一些交互（例如切换下拉菜单）或高级样式效果（例如定位工具提示）。当时这类任务常用的 JavaScript 库是 jQuery。

相比之下，现代 JavaScript 将重心从服务器转移到了客户端。最极端的情况是：用户访问一个 URL，仅请求一个最小化的 HTML 文件和一个关联的 JavaScript 文件。经过短暂的网络延迟后，用户在浏览器中看到的是由 JavaScript 渲染出的 HTML，并开始与之交互。后续的每一次页面跳转都不会再次向服务器请求更多文件，而是利用最初加载的 JavaScript 在本地渲染新页面。用户的每一次操作也都在客户端进行处理。在这种现代模式中，服务器主要通过网络传输 JavaScript 和一个最小化的 HTML 文件。该 HTML 文件随后在客户端执行所有链接的 JavaScript，从而完整地渲染出整个应用程序，并支持各种交互行为。

React 正是使这种模式成为可能的 SPA 方案之一。本质上，SPA 是一大块 JavaScript 代码，通过良好的目录和文件结构组织起来，形成完整的应用，而 SPA 框架则提供了构建整体架构所需的全部工具。这种以 JavaScript 为核心的应用只需在网络上传输一次，当用户首次访问你的 Web 应用 URL 时就会被下载到浏览器中。此后，React 或其他任何 SPA 框架将接管所有浏览器内的渲染工作，并处理所有的用户交互。

随着 React 的兴起，“组件”这一概念也变得流行起来。每个组件都使用 HTML、CSS 和 JavaScript 定义其外观和行为。一旦定义好组件，就可以将其嵌套在组件层级结构中，用于构建完整的应用。尽管 React 本身是一个高度关注组件的库，但其丰富的周边生态使其成为一个灵活的框架。React 拥有简洁的 API、稳定且活跃的生态系统，以及友好的社区。我们很高兴欢迎你加入！

React 项目的前置要求

要学习本课程，你需要掌握 Web 开发的基础知识，即能够熟练使用 HTML、CSS 和 JavaScript。了解 API 的概念也会有所帮助，因为课程中会对它进行详细讲解。

编辑器与终端

在整个课程中，你无需在本地安装集成开发环境（IDE），可以使用 Educative 的 SPA 小部件 来实时查看代码执行效果。

📜 虽然 Educative 的 SPA 小部件非常适合在线分享代码，但在本地搭建环境更适合学习多种创建 Web 应用的方式。此外，如果你想专业地开发应用，本地开发环境是必不可少的。附录章节中提供了本地环境搭建步骤。

Node 与 NPM

在开始之前，你需要先安装 Node.js 和 npm。它们用于管理你在开发过程中所需的各种库（即 Node 包），这些包可能是独立的库，也可能是完整的框架。

📜 我们将通过 npm（Node 包管理器）来安装外部的 Node 包。

你可以在下方终端中输入以下命令，检查 Node 和 npm 的版本：

1node --version
2
3npm --version

练习

• 阅读更多关于我为何从 Angular 转向 React的内容。
• 阅读更多关于如何学习一个框架的建议。
• 阅读更多关于如何学习 React的方法。
• 阅读更多关于为何框架很重要的观点。
• 浏览React 所需的 JavaScript 基础知识，不必过于关注 React 本身，重点在于检验自己对 React 中常用 JavaScript 特性的掌握程度。