在这篇文章中，我将引导你了解使用浏览器访问网站时发生的整个过程。

无论你是刚接触 web 开发还是已经有一些经验，这篇文章都将帮助你更好地理解网络及其核心技术的工作原理。

目录

• 资源定位：URL

• 匹配 IP 和 URL：DNS 解析

  • 什么是 DNS 解析器？
  • 什么是根 DNS 服务器？
  • 什么是顶级域名服务器？
  • 权威域名服务器

• 建立连接：TCP/IP 模型

  • TCP 连接如何工作？
  • TCP 三次握手

• 开始交换：客户端-服务器通信

  • 什么是 HTTP 协议？
  • HTTP 请求/响应
  • HTTPS
  • 第一字节时间

• 从数据到像素：关键渲染路径

  • 构建 DOM 树
  • 构建 CSSOM 树
  • Javascript 编译和执行
  • 构建可访问性树
  • 渲染树
  • 布局
  • 绘制
  • 关于 JavaScript 水合的说明

• 结论

在深入介绍过程中的每个步骤细节之前，让我们先回顾一下将会涉及的基本概念。

互联网是一个由相互连接的计算机组成的庞大网络。万维网（又称 web）建立在这项技术之上，还有电子邮件、聊天系统或文件共享等其他服务。

连接到互联网的计算机分为：

• 客户端，web 用户的设备和这些设备用来访问 web 的软件。

• 服务器，存储网页、网站或应用程序以及在用户的 web 浏览器或设备中显示所需文件的计算机。

资源定位：URL

每个存储在服务器上的资源都可以通过其对应的 URL 被客户端定位。以下是一个有效 URL 的示例：

你可能已经知道 URL 是什么，但让我们详细看看它的每个组成部分:

• 协议类型： URL 的第一部分表明应该使用哪种协议来获取资源。网站可以使用 HTTP 和 HTTPS 协议，我们稍后会详细介绍。协议类型后面的 : 用来分隔 URL 的下一部分。

• 授权： 这部分由域名和端口号组成，用冒号分隔。只有当 web 服务器不使用 HTTP 协议的标准端口(HTTP 用 80，HTTPS 用 443)时，端口才是必需的。域名前的 // 表示授权的开始。

• 资源路径： 这是 web 服务器上资源的抽象或物理路径。

• 参数： 一组键/值对，为返回请求的资源添加额外选项。它们用 & 分隔，每个 web 服务器都有自己处理参数的方式。这部分以 ? 开始。

• 锚点： 如果存在，以 # 开始，由浏览器处理以显示返回文档的特定部分。例如，它可以指向 HTML 文档中的特定部分。

当你在浏览器地址栏中输入 URL 时，会发生一些让你能够访问网站并与其内容交互的事情。让我们详细了解每一个过程。

匹配 IP 和 URL：DNS 解析

虽然作为人类我们更喜欢由单词组成的域名，但计算机之间使用 IP 地址进行通信。IP 地址由数字组成，对人类来说更难记忆。域名系统（DNS）就是将域名和 IP 地址关联起来的系统。

当你输入 URL 时，浏览器首先会查看本地缓存，检查是否已存储 DNS 查询结果。然后，它还会检查操作系统缓存。

如果没有存储结果，浏览器将调用 DNS 解析器来尝试找到域名对应的 IP 地址。

什么是 DNS 解析器？

解析器通常由你的互联网提供商的 DNS 定义。尽管这是大多数人使用的默认设置，但你可以将其更改为 Google、Cloudflare 或其他任何你想要的服务。

同样，提供商的 DNS 可能在其缓存中存储了域名的结果，如果没有，它会询问根 DNS 服务器。

什么是根 DNS 服务器？

根 DNS 服务器是实际驱动整个互联网的系统。它由分布在全球的十三个服务器组成。它会用请求域名的相关顶级域服务器来响应解析器的查询。

此时，DNS 解析器会缓存该顶级域服务器的 IP，这样就不必再次向根 DNS 服务器询问。

什么是顶级域名服务器？

顶级域（TLD）服务器存储用户所查找域名的权威域名服务器的 IP 地址。

在 URL www.exampleurl.com 中，顶级域是 .com。有不同类型的顶级域，如通用顶级域（.com 或 .org）、通常由两个字母 ISO 国家代码表示的国家代码顶级域等。

TLD 返回请求域名的权威域名服务器。DNS 解析器会再次缓存结果，这样以后就不必再回来请求。

权威域名服务器

此服务器包含将域名映射到 IP 地址的 DNS 记录。每个域名都有多个域名服务器。

此时不涉及缓存，因为权威域名服务器是最高权威机构，也是 DNS 解析链的最后一环。

如果 IP 地址可用，权威域名服务器会用域名的 IP 地址响应 DNS 解析器查询。如果不可用，则会返回错误。然后，DNS 解析器存储 IP 并将其发送回客户端浏览器。

一旦 DNS 查询完成且浏览器获得 IP 地址，它就可以尝试与服务器建立连接。

建立连接：TCP/IP 模型

客户端和服务器之间的连接使用传输控制协议（TCP）和互联网协议（IP）建立。这些协议是万维网和其他互联网技术（如电子邮件）背后的主要协议，它们决定了数据如何在网络上传输。

TCP/IP 模型是一个用于组织互联网和其他网络通信中不同协议的框架。TCP/IP 的主要责任是将数据分成数据包并将其发送到最终目的地，确保数据包可以在通信的另一端重新组装。

这个过程遵循四层模型，数据在一个方向上传输，到达目的地后再反向传输：

传输层确保应用程序可以通过建立数据通道来交换数据。它还建立了网络端口的概念，这是一个为应用程序需要的特定通信通道分配的编号数据通道系统。

TCP/IP 模型的传输层包括互联网上最常用的两个协议：TCP 和用户数据报协议（UDP）。

TCP 包含一些功能，使其在大多数基于互联网的应用程序中普遍存在，所以我们重点讨论它。

TCP 连接如何工作？

TCP 允许数据可靠且有序地传输到目的地。它是一个面向连接的协议，这意味着发送者和接收者必须在实际建立连接之前就连接参数达成一致。这个过程被称为握手程序。

TCP 三次握手

握手是客户端和服务器建立安全连接并确保双方同步和准备好开始交换消息的方式。

TCP 握手包括三个步骤：

1. 客户端通过发送 SYN（同步）数据包通知服务器它想建立连接。这个数据包指定后续段将开始的序列号。

2. 服务器收到 SYN 并用 SYN-ACK（同步-确认）段响应。它包括服务器的序列号和对客户端序列号的确认(加一)。

3. 客户端用 ACK 消息响应，确认服务器的序列号。此时，连接已建立。

开始交换：客户端-服务器通信

一旦建立 TCP 连接，客户端和服务器就可以使用 HTTP 协议开始交换消息。

什么是 HTTP 协议？

超文本传输协议（HTTP）是 TCP/IP 套件中最广泛使用的应用层协议，但它被认为是不安全的，导致向 HTTPS 转变，HTTPS 在 TCP 之上使用 TLS 进行数据加密。稍后你会看到更多相关细节。

浏览器将首先向服务器发送 HTTP 请求消息，请求以 HTML 文件形式获取网站的副本。HTTP 协议可以传输 HTML、CSS、JS、SVG 等文件。

HTTP 请求/响应

HTTP 消息有两种类型：

• 请求：由客户端发送到服务器以触发操作。

• 响应：由服务器发送到客户端作为对先前请求的答复。

消息是纯文本文档，按照通信协议（在本例中是 HTTP）确定的精确方式构建。

HTTP 请求包含三个部分：

1. 请求行： 包括请求方法，这是定义要执行的操作的动词。在我们这篇博文中讨论的情况下，浏览器将发出 GET 请求从服务器获取页面。请求行还将包括资源位置(在本例中是 URL)和使用的协议版本。

2. 请求头： 一组键值对。其中两个是必需的。Host 表示目标域名，Connection 除非必须保持打开，否则总是设置为 close。请求头总是以空行结束。

3. 请求正文： 是一个可选字段，允许向服务器发送数据。

服务器将用 HTTP 响应回复请求。响应包括有关请求状态的信息，可能包括请求的资源或数据。

HTTP 响应的结构包括以下部分：

1. 状态行： 包括使用的协议版本、状态代码和状态文本，以及状态代码的人类可读描述。

2. 响应头： 一组键值对，可以是应用于整个消息的通用标头、提供服务器状态附加信息的响应标头或描述消息数据格式和编码（如果存在）的表示标头。

3. 响应正文： 包含请求的数据或资源。如果客户端不期望数据或资源，响应通常不会包含主体。

当服务器批准网页请求时，响应将包含 200 OK 消息。其他现有的 HTTP 响应代码包括：

• 404 未找到
• 403 禁止
• 301 永久移动
• 500 内部服务器错误
• 304 未修改
• 401 未授权

响应还将包含 HTTP 标头列表和响应主体，包括请求页面对应的 HTML 代码。

HTTPS

超文本传输协议安全版（HTTPS）并不是一个不同的协议，而是 HTTP 的扩展。它通常被称为基于传输层安全（TLS）的 HTTP。让我们看看这具体是什么意思。

HTTP 是浏览器和服务器之间大多数通信使用的协议，但它缺乏安全性。通过 HTTP 发送的任何数据都可能被网络上的任何人看到。当连接涉及敏感数据时，这尤其危险，比如登录凭证、财务信息、健康信息等。

HTTPS 的主要目的是确保数据隐私、完整性和身份识别。这意味着确保数据只能被预期的接收者访问，不能被中间人截获或修改。同时，发送者和接收者都可以通过合法的权威机构确认其身份。

在 HTTPS 中，通信使用 TLS 协议加密，该协议依赖于非对称公钥基础设施。它结合了两个密钥：一个公钥和一个私钥。服务器共享其公钥，客户端可以用它加密消息，而这些消息只能用服务器的私钥解密。

为建立加密通信，客户端和服务器必须启动另一次握手。在握手期间，它们就使用的 TLS 版本以及在连接期间如何加密数据和相互认证达成一致，这一组规则被称为密码套件。

这个握手或 TLS 协商在建立 TCP 连接后开始，包括以下步骤：

• 客户端问候： 浏览器发送一个包含所有支持的 TLS 版本和密码套件的问候消息。

• 服务器问候： 服务器回应选定的密码套件和 TLS 版本，以及包含服务器公钥的 SSL 证书。

• 认证和预主密钥： 客户端通过相应的可信机构验证服务器的 SSL 证书，然后使用服务器的公钥（之前在证书中共享）创建预主密钥并与服务器共享。

• 预主密钥解密： 预主密钥只能使用服务器的私钥解密。如果服务器能够解密它，客户端和服务器就可以就会话使用的共享主密钥达成一致。

• 客户端更改密码规范： 客户端使用共享主密钥创建会话密钥，并向服务器发送所有先前交换的记录，这次使用会话密钥加密。

• 服务器更改密码规范： 如果服务器生成正确的会话密钥，它就能解密消息并验证收到的记录。然后服务器发送记录以确认客户端也有正确的密钥。

• 安全连接建立： 握手完成。

一旦握手完成，客户端和服务器之间的所有通信都由会话密钥进行对称加密保护，浏览器就可以发出网站的第一个 HTTP GET 请求。

第一字节时间

一旦浏览器的请求被批准，服务器将发送 200 OK 消息以及响应头和请求的内容。因为是网站，内容很可能是 HTML 文档。

数据在客户端和服务器之间传输时被分成一系列小数据块，称为数据包。这使得在需要时很容易替换损坏的数据块，也允许数据往返于不同位置，使多个用户能够更快且同时访问数据。

当客户端发出第一个请求时，作为响应到达的第一个数据包标志着第一字节时间（TTFB），它表示从请求发起到接收到第一块数据作为响应所经过的时间。这包括 DNS 查询、建立连接的 TCP 握手，以及如果请求通过 HTTPS 发送则包括 TLS 握手所需的时间。

从数据到像素：关键渲染路径

关键渲染路径（CRP）是浏览器执行的一系列步骤，用于将从服务器接收回来的数据转换为屏幕上的像素。它包括创建文档对象模型（DOM）和 CSS 对象模型（CSSOM、渲染树和布局。

构建 DOM 树

当第一块数据到达时，浏览器开始解析 HTML。解析意味着分析并将一段输入代码转换为特定运行时可以解释的语法和表示。在这种情况下，浏览器组装接收到的数据包并解析 HTML，构建文档的节点树表示，称为 DOM 树。

文档中的每个 HTML 标签都在 DOM 树中表示为一个节点。节点根据它们在文档中的层次位置连接到 DOM 树，每个节点的表示包含关于该标签的所有相关信息。

对于以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What Really Happens When You Navigate to a Website</title>
</head>
<body>
    <main>
        <header>
            <h1>What Really Happens When You Navigate to a Website</h1>
        </header>

        <section>
            <h2>Intro</h2>
            <p>
                Before entering into the details of every step included in the process let's review some of the basic concepts we will be discussing throughout the blog.
            </p>
            <p>
                The Internet is a huge network of interconnected computers. The World Wide Web (aka web) is built on top of that technology, as well as other services such as email, chat systems, or file sharing.
            </p>

            <p>Computers connected to the internet are either:</p>
            <ul>
                <li>
                    <p>Clients, the web user's devices and the software that those devices use to access the web.</p>
                </li>
                <li>
                    <p>Servers, computers that store web pages, sites, or apps and the files they need to be displayed in the user's web browser or devices.</p>
                </li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2024</p>
    </footer>
</body>
</html>

生成的 DOM 树如下所示：

在解析 HTML 时，浏览器会对遇到的资源发出额外请求。CSS 文件和图片是非阻塞资源，这意味着解析器会在等待请求资源的同时继续其任务。但如果遇到 <script> 标签，HTML 解析将暂停，这会影响首次渲染时间。

构建 CSSOM 树

DOM 包含页面内容及其层次结构的所有信息，而 CSSOM 包含如何设置页面样式的信息。

在 CSSOM 中，每个 HTML 元素都与其对应的 CSS 样式匹配。结果是一个树，它不包含有关元素内容的信息，而是包含它们应该如何显示的信息。

给定以下 CSS 代码：

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

header {
    background-color: #005bbb;
    color: #ffffff;
    padding: 10px;
    text-align: center;
}

h1 {
    font-size: 24px;
}

section {
    margin-top: 20px;
}

h2 {
    font-size: 20px;
    color: #005bbb;
    display: none;
}

p {
    margin-bottom: 10px;
}

ul {
    margin-left: 20px;
    list-style-type: disc;
}

footer {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    color: #555;
}

当浏览器处理它时，生成的 CSSOM 会如下所示：

它的创建不是增量式的，这意味着浏览器会停止渲染页面，直到处理完所有 CSS。

之所以这样工作是因为，顾名思义，层叠样式表(CSS)从上到下应用样式，这意味着后面定义的类会覆盖文档开头的类。CSS 文档需要在屏幕上渲染任何内容之前完全处理，因为可能有类会改变。

JavaScript 编译和执行

在创建 CSSOM 时，渲染被阻塞，但浏览器会继续下载它遇到的任何 JavaScript 文件。

JavaScript 也由浏览器解析、编译和解释，但如前所述，它在默认情况下是一个解析器阻塞资源。这意味着当浏览器遇到 <script> 标签时，它会停止 HTML 解析并在继续之前执行该文件。可以使用 async 或 defer 属性来避免这种行为，允许在获取资源时继续解析。

一旦浏览器完成解析并执行所有可能修改 DOM 和 CSSOM 的 JavaScript 文件，下一步就是构建渲染树。但在详细了解这一步之前，让我们先关注一下无障碍树。

构建可访问性树

基于 DOM 树创建的站点结构，浏览器还创建了一个可访问性树。

可访问性树是网站内容的另一种表示形式，专门设计用于通过辅助技术进行网站导航。

在可访问性树中，每个 DOM 元素都表示为一个可访问对象，包含以下信息：

• 名称： 用于引用元素的标识符。

• 描述： 关于元素的附加信息。

• 角色： 它是什么类型的元素，与其预期用途有关。

• 状态和其他属性： 如果元素可能发生变化，它可能包含其当前状态。它还可以包含指定其他功能的其他属性。

在主要的网络浏览器中，你可以通过在 DOM 树查看器中选择一个节点并导航到"无障碍"选项卡来访问可访问对象及其信息。

拥有一个结构良好的可访问性树，是决定网站能否通过辅助技术进行导航的关键，这直接关系到网站是具有包容性还是排他性。

渲染树

在构建完 DOM、CSSOM 和无障碍树之后，浏览器构建渲染树。

这个树是 DOM 和 CSSOM 树的组合。浏览器处理所有节点并只保留可见的节点。然后，它将它们与对应的 CSSOM 规则组合。结果是所有可见元素与其计算样式的集合。

非可见节点，如 <script> 或 <meta> 标签，以及使用 display： none CSS 属性隐藏的元素，不会包含在这个树中。

布局

一旦计算出渲染树，浏览器就会运行布局。在这个过程中，浏览器计算每个元素在页面中将占用的确切位置和大小。

这些计算基于视口大小，即实际显示网站内容的浏览器区域。视口的大小根据设备屏幕大小、浏览器窗口大小、系统设置等条件而变化。

布局输出是一个盒模型，它捕获渲染树中每个元素和对象对应的大小和位置。浏览器通常从 <body> 标签开始处理文档，然后遍历其所有后代。

布局计算之后，文档中一个或多个元素的大小或位置的任何变化都会触发新的计算。这些后续计算称为重排。

绘制

现在，最后一步是在用户屏幕上显示布局输出。在绘制或栅格化阶段，浏览器将每个布局盒子元素转换为屏幕上对应的像素。

整个页面的可视化表示最初在屏幕上渲染，然后只重新渲染受更改影响的区域。

许多因素会影响浏览器执行这一步骤所需的时间，有一些工具可以帮助开发者测量和优化这个时间。

绘制之后，在用户开始与网站交互之前，浏览器可能会执行任何使用 defer 或 async 属性延迟的 JavaScript，以避免阻塞初始 HTML 解析。

关于 JavaScript 水合的说明

上面描述的步骤展示了在浏览器中渲染所有网站的 HTML、CSS 和 JavaScript 代码的过程。这被称为客户端渲染(CSR)。你可能也听说过服务器端渲染(SSR)。

SSR 包括在每个请求上渲染网站内容，并将其作为可在浏览器中显示的 HTML 交付给客户端。

当使用 CSR 渲染网站时，所有 JavaScript 在页面渲染之前执行。在 SSR 中，服务器渲染的 HTML 在浏览器中快速加载和显示，但仍需要将 JavaScript 发送到客户端以启用用户交互。

JavaScript 水合是将 JavaScript 添加到服务器渲染的 HTML 页面以使其交互的过程。一旦初始 HTML 被提供并在浏览器中显示，JavaScript 就会"水合"静态内容，附加事件监听器并启用交互功能。

结论

通过本文，你加深了对从在浏览器地址栏输入网址到访问所需网站内容这整个过程的理解。

你了解了 URL 以及浏览器执行的 DNS 查询以查找网站的 IP 地址。你还了解了浏览器和服务器之间如何建立连接以及它们如何通信。

最后，你探索了从服务器接收第一块数据到网站在屏幕上显示之间发生的事情，以及无障碍树和 JavaScript 水合过程等关键概念。

希望你觉得这个指南有用。感谢阅读！

在毕业后因为对于软件开发的兴趣，他成为一名 Web 全栈工程师，参与移动互联网产品的开发。现在他就职于一家跨国银行。在节目中，他聊到职场新人如何成长、技术专家的思维方式以及银行业 IT 技术转型升级等等话题。

相信他保持开放心态、持续学习、终身学习的态度也会给你启发和动力，期待你关注我们的播客，并把节目分享给更多朋友。也欢迎你发邮件分享自己的故事，也许我们会邀请你作为 freeCodeCamp 播客的嘉宾。你可以在这篇文章中找到邮箱地址。

freeCodeCamp 最近上线了很多关于编程和英语的新课程，接下来 Miya 会专注于英语课程的编写，同时将新课程翻译为中文，中文播客会暂停一段时间，谢谢大家支持，期待第二季再见。也期待你把节目分享给朋友们，我们一起带给更多人启发和动力。

如果你感兴趣和我一起翻译新课程，请查看贡献指南。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

主要话题

• 04:17 对于编程从兴趣到职业
• 15:15 移动互联网行业 Web 开发
• 21:20 职场新人如何提升实践能力
• 31:58 银行业 IT 技术转型
• 39:23 微服务
• 47:10 跨国银行中的技术更新
• 1:01:10 安全与合规
• 1:07:12 数据库
• 1:16:31成为技术专家
• 1:28:41 外企的企业文化
• 1:35:02 养垂耳兔和练咏春拳
• 1:39:43 什么时候提问
• 1:44:42 保持开放心态和虚心学习

提到的资源

• 《MVC 架构详解》
• 微服务
• MySQL
• PostgreSQL：PostgreSQL 系列 4 篇文章
• UniApp
• JEECG

术语“全栈开发者”指的是同时处理Web应用的前端和后端组件。

前台是用户与之交互的东西，而后台是Web应用的逻辑。

在这篇文章中，我将介绍一些可以帮助你成为全栈开发者的资源：

• freeCodeCamp
• CS50's Web Programming with Python and JavaScript
• The Odin Project

我还将提供更多的YouTube课程链接，你可以通过创建更多的项目继续练习你的技能。

• freeCodeCamp
• The Odin Project
• CS50's Web Programming with Python and JavaScript
• Suggested YouTube full stack project tutorials

freeCodeCamp

freeCodeCamp是一个免费的在线交互式学习平台，你可以在这里学习网络开发，并顺便获得认证。每个课程都有一系列的挑战，你将学习这些课程，然后完成5个认证项目。

前四门课程涵盖前端技术，包括HTML、CSS、Vanilla JavaScript、React和D3。后端开发、关系数据库课程和质量保证认证涵盖Node、Express、SQL、用Chai测试、MongoDB等。

以下是你将建立的一些项目的列表。

• 产品登陆页
• 随机报价机
• 25+5时钟
• 世界杯数据库
• 数独解题器

完成这些认证后，你将知道如何构建全栈Web应用程序。从那里你可以为你的作品集创建自己的项目，并开始申请初级工作。

其余的认证包括Python和机器学习。这些都是比较中高级的认证，并假定你已经完成了之前的JavaScript认证。

如果你在课程上需要帮助，请联系freeCodeCamp论坛，世界各地的开发者可以在代码上帮助你。

The Odin Project

这是一个免费的基于项目的在线平台，在这里你可以学习全栈式JavaScript或全栈式Ruby on Rails。

你将首先通过基础课程，学习HTML、CSS、JavaScript基础知识、Git、命令行以及如何使用文本编辑器。这些课程有建议的读物、作业和项目，以便在学习过程中完成。

以下是你将在基础课程中建立的一些项目的清单。

• Rock Paper Scissors
• Etch-a-Sketch
• Landing page

从那里你可以选择JavaScript或Ruby on Rails课程。如果你需要帮助决定选择哪一个，请阅读The Odin Project的这一指南。

Ruby on Rails课程包括Ruby编程、中高级HTML和CSS、Ruby on Rails框架等。

以下是你将在Ruby on Rails课程中建立的一些项目。

• Tic Tac Toe
• SQL Zoo
• Personal Portfolio

JavaScript课程涵盖了中高级HTML和CSS、JavaScript、MongoDB、Node、Express等内容。他们还包括一份关于如何被雇用的有用指南，以便找到你的第一份工作。

以下是你将在JavaScript课程中建立的一些项目：

• restaurant page
• weather app
• blog API

如果你在课程上需要帮助，请访问The Odin Project discord channel。

CS50 Python和JavaScript Web编程

这个CS50 Web编程课程将教你HTML、CSS、JavaScript、Git、Python、Django、SQL等。你首先需要学习CS50的计算机科学入门。

计算机科学导论将通过一系列问题集和一个最终项目教给你编程的基础知识。然后你可以进入Web编程课程，进一步发展你的技能。

该课程由David Malan和Brian Yu教授，他们是哈佛大学的顶级讲师。在你完成这些课程后，你将在全栈Web开发方面有一个坚实的起步基础。

这两门课程都可以在edX上找到，可以免费审核。

如果你在CS50课程中需要帮助，请通过他们的任何一个社交媒体平台联系。

YouTube上的全栈项目教程

在你建立了全栈Web开发的基本基础后，你可以研究这些额外的资源，以创建更多的项目来加强你的技能。

• Flutter & Firebase课程--建立一个全栈式的仿Instagram
• 云计算中的全栈网络开发课程 - Svelte、Postgres、Vercel、Gitpod
• 全栈MERN项目 - 构建和部署一个应用程序 | React + Redux、Node、Express、MongoDB[Part 1/2]
• 全栈MERN项目 - 构建和部署一个应用程序 | React + Redux、Node、Express、MongoDB[Part 2/2]
• 使用Django和Vue的电子商务网站教程（Django Rest 框架）
• Python微服务网络应用（使用React、Django、Flask）--完整课程
• PERN Stack 课程 - 仿 Yelp(Postgres、Express、React、Node.js)

如果你是一个使用 Node JS 和 React、Vue 和 Angular 等 JavaScript 库和框架的开发者，那么你可能遇到过 “Error: cannot find module” 报错。

在这篇文章中，我将告诉你如何解决这个错误。

为什么会出现 “Error: cannot find module”

这个错误的发生是由于以下原因：

• 你正试图从你的项目目录中没有安装的模块中导入一个项目
• 你正在从一个过时的软件包中导入一些东西
• 你指向了一个不存在的文件

在下面的截图中，你可以看到我得到了这个错误：

我得到这个错误是因为我试图从 react-icons 软件包中导入 freeCodeCamp 图标，而我没有安装这个软件包。

import { FaFreeCodeCamp } from "react-icons/fa";

如何修复 “cannot find module” 的错误

如果你遇到这个错误，解决办法总是在错误中。未找到的模块（包）总是以 “Module not found: Error: Can't resolve 'package name' in 'project directory'” 的形式出现，可以在报错中找到它的名称。

在我的例子中，我得到的是这样的：“Module not found: Error: Can't resolve 'react-icons/fa' in 'C:\Users\user\Desktop\Projects\Address Locator\address-locator\src'”。

为了修复这个错误，你需要安装你的项目目录中没有的软件包—— npm install package-name or yarn add package-name.

在我的例子中，我需要安装 react-icons 包，这样 freeCodeCamp 的图标就可以被解决。我将通过运行 yarn add react-icons 来做到这一点。

一旦我安装了软件包并运行应用程序，一切都应该成功编译：

如果你安装了该软件包，但还是出现了错误，那么请按照以下步骤操作：

• 通过运行 rm -rf node_modules 删除 node 模块文件夹
• 通过运行 rm -f package-lock.json 删除 package.lock.json 文件
• 通过运行 npm cache clean --force 来清理 NPM 缓存
• 通过运行 npm install 重新安装所有软件包

这应该能为你修复错误。

总结

当你遇到 “cannot find module” 报错，或者 “module not found”，这意味着你没有安装你要使用的软件包。

如果即使你已经安装了该软件包，也发生错误，那么本文建议的修复方法可以帮助你解决这个问题。

谢谢你阅读本文。

今天，世界各地的计算机和网络通讯速度都变得越来越快。这有利于提升 Web 开发和用户体验。人们通过互联网能够实现的可能性也向前迈了一大步。

显著进步的另一面也意味着有一些人掉队了。在这个数字分化的年代，如何提高网络体验，以触达到更多网络和设备条件没有那么好的用户，是一个难题。

要解决这个难题，必须先理解浏览器上渲染网页的方法。

本文涉及的术语

在开始之前，我需要确保你熟悉本文涉及的术语。其中一些对于新开发者来说可能难以理解。如果你对这部分已经很了解了，可以跳过。

• 服务器：服务器是位于远程（互联网意义上的）电脑，它的职责就是处理客户端发来的请求并且做出响应。
• 客户端：客户端是用于和服务器通信的设备，以此来访问资源。在绝大多数情况下，客户端是可以访问网络的设备。在本文中，网络浏览器充当了客户端的角色。
• CDN：Content Delivery Network（内容分发网络）的首字母缩写。CDN 是“一个互连服务器网络，可加快数据密集型应用程序的网页加载速度”（引用自 AWS）。
• 构建时：在构建时，应用程序代码为另一个环境做准备。这里的另一个环境大多数时候指的是互联网上的托管环境。

现在让我们学习渲染网站的不同方式。

什么是客户端渲染（CSR）？

客户端渲染完全依赖 JavaScript 代码在浏览器中生成网页。在页面内容加载完毕，供用户浏览之前，浏览器预先处理 JS 代码。

JavaScript 在下载时就动态辅助定义网站架构。这里的架构指的是从 API 获取数据、 网站导航和一些网站内简单的业务逻辑。

客户端渲染和 JavaScript 框架

客户端渲染因为一些 JavaScript 框架或者库，如：React、 Vue 和 Angular 的发布而变得越来越流行。仅当在 HTML 页面的头部（head）引入一个 CDN，这些架构才生效——通常这些 CDN 包含大量的 JS 代码。

毫无疑问大文件意味着更久的下载时间，同时，在首次加载就下载好大文件意味着之后访问网站其他页面的加载时间会大幅下降。

网站首先从 API 获取数据，然后数据被用于填充在客户端渲染的页面。

许多我们现实生活中的渐进式应用（PWA）就是使用 CSR 的示例，如：Spotify、Figma 和 Google Drive。

什么是服务端渲染（SSR）？

客户端渲染改变了游戏规则，并且这种改变仍在持续。但是，如果细看 CSR 的性能，会发现想要网站具备更多的功能，就需要更多的 JS 代码。也就是上文提到的越多的 JS 代码意味着更久的下载时间。

牺牲首次加载时间来换取网页的快速访问，对于一些人来并不划算。服务器端渲染就应运而生。

SSR 并未解决网页渲染的所有问题，但确实解决了使用 CSR 会面临的问题，如首次加载的时间，更多优势会在后文提到。

服务器端在接收到浏览器的请求后就在服务器渲染生成网页。服务器通过 SSR 渲染整个 HTML、CSS 和资源需求的必要 JavaScript，并且返回给浏览器。

也就意味着网站内容始终是来自服务器的最新的信息。你可以把这个类比为 REST API——后端内容实时更新。

和其他渲染手段一样，SSR 也有一些弊端。其中一个就是因为需要通过向服务发送请求才能加载网页，所以网络带宽小的用户会收到影响。同时，SSR 也对计算机的算力有要求。

什么是静态网站生成（SSG）？

静态网站生成是渲染网页一个常用的手段，在 JavaScript 框架诞生之前，大部分的网站都是静态生成的。

静态网站很受欢迎，但是有更好的生成它们的方式。这主要取决于网站是否看重性能。

但是，静态网站是什么？

静态网站的渲染和生成是一致的，也就是说静态网站的内容基本上不会被浏览的用户影响，不像使用 CSR 或者 SSR 渲染的 web 应用，用户看到的内容取决于认证和授权。

静态网站是展现不会改变，或者只需要定期更新内容的理想手段。

静态网站生成详解

静态网页生成主要设计到自动化构建网页的过程。今天的 JavaScript 框架（如 Nuxt.js、Next.js 等）提供模版引擎，可使用一个模板来构建多个静态页面，可以想像这样可以解决时间。

在 SSR 和 CSR 中，HTML 网页是在构建时须髯安和生成，但是静态网站生成截然不同。在你尝试访问网页之间，SSG 就生成了网站。这就是为什么 SSG 被认为是预渲染，苦差事都在渲染前做完了。

看上去 SSG 可以春风化雨，但使用 SSG 渲染页面有一个大缺点就是必须为网站的每一个可以访问的 URL 生成一个页面，如果你使用动态页面，就会更复杂。

这就回到上文提到的，静态网站的理想使用场景是展现不怎么更新的内容，也就是静态网站并不是万金油。

不同渲染方式优势和折衷

在分别了解这些渲染方式之后，让我们把知识整合到一起做一下对比。

我们将看三个指标——性能、SEO 和花销。

性能

搭建可以兼容不同网络和电脑速度的网站，需要考虑到网站的性能。这里的性能指的是网站的加载速度和从 API 获取数据的速度。

接下来将分析 CSR、SSR 和 SSG 在这方面的表现

客户端渲染性能

客户端渲染网站相对较慢。因为一开始需要加载 JS 代码，才能生成用户可以看到的内容。

通常情况下，JS 下载都很慢，特别是使用 JS 框架的时候。客户端渲染网页也调用 API 以从后端获取数据，这样也会增加用户的加载时间。

服务器端渲染性能

SSR 渲染网页可以非常快。这主要取决于服务器的速度以及用户电脑的速度，如果两者都达到预期，SSR 在性能方面可以轻松取胜。

静态网站生成性能

使用 SSG 生成页面相对较快，因为实际渲染并没有在浏览器发生。

SSG 不需要额外的工作就可以向浏览器提供内容。和 CSR 一样，SSG 可能也需要调用 API 来获取后端数据，这样也会增加用户的加载时间。

最终性能是由网页中使用的 JavaScript 的数量决定的。

搜索引擎优化（SEO）

页面如果需要曝光的话，就应当重视搜索引擎优化。SEO 决定了内容在如 Google 这样的搜索引擎上的可访问性，同时也决定了网站在搜索引擎结果页面（SERP）上的排名。

让我们看看当这些网站被搜索引擎索引的时候，它们的 SEO 表现如何。

CSR 搜索引擎优化

使用 CSR 渲染的页面并没有语义化的内容，内容主要靠 JS 生成。这样的弊端是不是所有网络爬虫都支持 JS，因此你的网站可能不能被搜索引擎正确索引。

SSR 搜索引擎优化

SSR 渲染通过由服务器发出的最新的内容生成页面，由 SS 渲染的页面可以被爬虫识别也可以被搜索引擎索引。

SSG 搜索引擎优化

由 SSG 生成的页面极易被网络爬虫爬取，因为它不完全依赖 JS 渲染。

花销

给用户提供最佳的体验很重要，但账单不会自我消化，所以由体验带来的花销约精简越好。

三种渲染手段的经济花销并不相同。让我们仔细分析一下：

CSR 花销

客户端渲染 100% 在浏览器运行，也就意味着没有额外产生花销。

SSR 花销

客户端渲染由远程的服务器生成功能完整的页面，所以为生成额外的计算资源和花销。

SSG 花销

没有花销。静态网站生成在构建时完成。因此，生成的网页被托管，不需要服务器额外的渲染。

总结

当选择渲染方式的时候，请考虑好你的用例，可以根据本文所学来做判断。不同的渲染方式适用于不同的网站。

电子商务网站的开发者可能会选择 SSR 路线，或者选择更安全的静态网站。同时，web 应用的开发可能不在乎首次加载的时长，只要长远看的用户体验够好。

不论你选用哪种渲染方式，都要确保网站的可访问性——跳出自身经历。最后，千万别忘了 JS 代码的精炼。

性能是留住用户的关键，
性能直接影响公司的命运。
-- Pinterest

介绍

互联网发展至今，网页性能始终是一个重要的问题，各大互联网公司都在不遗余力地优化自己的 Web 页面，为的就是更快地让用户更快的看到用户想看到的内容。

互联网在近几十年的发展过程中，度量 Web 性能各个指标、术语已经稳定了，各个产品的度量方式都趋于一致。

BBC 发现其网站的加载时间每增加 1 秒，便会多失去 10% 的用户。

DoubleClick by Google 发现，如果页面加载时间超过 3 秒，53% 的移动网站访问活动将遭到抛弃。

DoubleClick by Google 研究表明，与加载时间约为四倍（19 秒）的网站相比，加载时间在 5 秒以内的网站会话加长 70%、跳出率下降 35%、广告可见率上升 25%。

Mobify 的首页加载时间每减少 100 毫秒，基于会话的转化率增加 1.11%，年均收入增长近 380,000 美元。

AutoAnything 的页面加载时间减少一半后，其销售额提升 12-13%。

可见，Web 页面的性能在现今万物互联的时代有多重要。

Web 性能在度量方面存在的问题

不可本地运行，以尽可能早地发现性能问题

很多工具都不可以在本地运行； 如果 Web 性能测试工具可以在本地运行，开发人员可以更早地发现问题，并尽可能早的在本地解决，避免了在 CI 上跑了一会了才发现问题，在 CI/CD 的敏捷开发过程中这样可以节省很多时间，提高生产效率。Web 性能测试左移 必定为 Web 产品性能带来更多好处，甚至为公司带来更多盈利。

不能持续度量性能指标

目前市场上 Web 性能度量的产品大多都是 Sass 产品，使用其产品我们只能得到一个运行完性能测试的可视化结果页面，但是不能持续的记录 Web 网页性能的改进记录，不能很好的量化一个 Web 产品性能的生命周期。当然也有实现历史记录的 Web 性能测试工具，例如 treo。

费用

开源免费的 Web 性能测试工具有不少，但是用起来可能没有那么爽；如果需要更多的特性，如持续记录 Web 网页性能，一般只有商业产品会支持，而且收费还不低。

CI 集成困难

如前面所说，很多工具要么是本地不能运行，要么就是 Sass 产品，不能很好的与 Pipeline 集成， 导致 Web 性能结果反馈周期长、工程效率低等问题。

Lighthouse

Lighthouse 是一个开源的、自动化的工具，用以提高网页质量。你可以在任何网页上运行它，公开的或需要认证的。它对性能、可访问性、渐进式web应用程序、SEO 等进行审计。
你可以在 Chrome DevTools、 命令行甚至是 Node 模块中运行 Lighthouse。 向 Lighthouse 提供一个要审计的 URL，它会对页面运行一系列审计，随即会生成一个关于页面运行情况的报告。对于失败的审计项，可以使用对应项的改进方案。每个审计项都有一个参考文档，解释为什么审核很重要，以及如何修复它。

使用方法非常简单，可以看一下我对我的开源项目 Powerboard 审计的结果。

Lighthouse CI 及 Lighthouse Server 的使用

Lighthouse CI （LHCI）

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
为每个提交自动化运行Lighthouse，查看更改，并防止回归
-- GoogleChrome/lighthouse-ci

Lighthouse CI 是 Google Chrome 团队开发的一套可以让持续运行、保存、检索和对 Lighthouse 结果进行断言变得尽可能简单的工具,可以很方便的集成在 CI 上。

使用

LHCI 提供 npm 安装包，可以很好的在 Pipeline 上集成，只需要在对应目录下运行 autorun 命令即可，命令如下

npm install -g @lhci/cli
lhci autorun

运行完成后，LHCI 会将结果存放在 .lighthouseci 目录下，用浏览器打开对应的报告即可。

Lighthouse Server

The LHCI server saves historical Lighthouse data, displays trends in a dashboard, and offers an in-depth build comparison UI to uncover differences between builds.
LHCI Server 保存 Lighthouse 历史数据，并可在仪表板中显示趋势，并提供深入的构建比较 UI，以揭示构建之间的差异。

LHCI Server 的安装和使用

LHCI Server 的安装有多种方式，具体可参考这里，推荐使用 Docker 的方式运行。需要注意的是，第一次运行需要创建 Lighthouse App，需要在容器中运行 lhci wizard 并填入相应的信息，最后记录下生成的 Build token 和 Admin token。

Lighthouse CI 和 Lighthouse Server 集成

前面已经讲了 lhci 和 lhci server 如何安装了，接下来就是需要将两者结合起来一起使用了。这里我们以 GitHub Actions 为例来搞一个 Demo。

构建 GitHub workflow，具体实践可参考 Powerboard 的实现细节。

.github/workflows/Lighthouse.yml

name: Lighthouse CI
on:
  push:
    branches:
      - main
jobs:
  lhci:
    name: Lighthouse
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 16.14.2
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: Upload Lighthouse Report
        run: |
          npm install -g @lhci/cli
          lhci autorun --config=.github/config/lighthouserc-no-condition.json
          lhci upload --serverBaseUrl=${{ secrets.LHCI_SERVER_URL }} --token=${{ secrets.LHCI_BUILD_TOKEN }}
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      - name: Check Lighthouse Report
        run: |
          lhci autorun --config=.github/config/lighthouserc.json

.github/config/lighthouserc-no-condition.json

{
  "ci": {
    "collect": {
      "staticDistDir": "./dist",
      "settings": {
        "formFactor": "desktop",
        "screenEmulation": {
          "mobile": false,
          "width": 1920,
          "height": 1080,
          "deviceScaleFactor": 1,
          "disabled": false
        }
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": "off",
        "categories:accessibility": "off",
        "categories:best-practices": "off",
        "categories:seo": "off",
        "categories:pwa": "off"
      }
    }
  }
}

.github/config/lighthouserc.json

{
  "ci": {
    "collect": {
      "staticDistDir": "./dist",
      "settings": {
        "formFactor": "desktop",
        "screenEmulation": {
          "mobile": false,
          "width": 1920,
          "height": 1080,
          "deviceScaleFactor": 1,
          "disabled": false
        }
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.8 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["error", { "minScore": 1 }],
        "categories:seo": ["error", { "minScore": 0.9 }],
        "categories:pwa": ["warn", { "minScore": 0.99 }]
      }
    }
  }
}

需要将 lhci Server 生成的 Build token 和 lhci Server 的地址存放在 GitHub 项目的 Secrets 中。

这里执行了两次 lhci 命令。因为 lhci autorun 运行完成后会运行默认的断言(Assertion)，第一次用没有断言的命令，目的是将当前的网页性能可以上到 Server 端；第二次配置了各项指标的阈值，如果不满足要求，Pipeline 将会阻断，实现 Web 性能测试左移。

总结

开发人员、技术领导或者市场营销人员想持续量化并展示 Web 页面的性能，Lighthouse CI 是由 Google 编写的一套工具，可以持续运行、保存、检索并使对 Lighthouse 结果进行断言变得尽可能简单。它可以评估 Web 应用和页面，以及从开发的最佳实践中收集性能指标和洞见等信息。

它可以测试你的 Web 页面，得到 Web 页面的 Performance 、 Accessibility 、 Best Practices、SEO 和 PWA 在不同设备上的分数，这些分数可以用于分析产品性能，帮助提升用户转化率等。

不同于 treo 或者其他一些 Web 性能测试工具，它的优势是开源（Open-Source）、免费（Free）、自托管数据和服务器（Self-hosted data and Server）以及易于集成（Easy to integrate）。

Refs

• Get Down to Business: Why the Web Matters (Chrome Dev Summit 2018)
• 为什么速度很重要？
• Lighthouse
• 博客

作为一名 web 开发者，你一定清楚调试代码的必要性。我们经常使用外部库来记录日志，并在某些情况下格式化并/或显示它们。但浏览器的控制台，远比我们想象的强大。

当提到控制台时，我们会首先想到 console.log，没错吧？但它还拥有许多其他的方法。 现在，我们将了解如何充分利用控制台。我还会给出一些提示，以便你更好地理解这些方法。

什么是控制台？

JavaScript 控制台是现代浏览器中内置的开箱即用的开发工具，其界面类似 Shell。 它允许开发人员执行以下操作：

• 查看网页上发生的错误和警告的日志。
• 使用 JavaScript 命令与网页进行交互。
• 调试应用程序并直接在浏览器中遍历 DOM。
• 检查并分析网络活动。

简言之，它使你得以在浏览器中编写，管理和监视 JavaScript。

Console.log，Console.error，Console.warn 和 Console.info

这些可能是最常用的方法，它们允许你传递多个参数。每个参数都将被评估，并以空格分隔连接成字符串，但对于对象或数组，你可以查看其内在属性。

Console.group

该方法允许你将一系列控制台日志（也包括错误信息等）归纳在可折叠的小组下。语法非常简单：只需在 console.group() 后输入所需的 console.log（或输入 console.groupColladed() 来让其以默认方式关闭），然后在末尾添加 console.groupEnd() 来结束分组。

结果如下所示：

Console.table

自从发现 console.table，我的生活发生了改变。在 console.log 中显示 JSON 或超大的 JSON 数组是一种令人恐惧的体验。console.table 使我们可以在漂亮的表格中可视化这些结构，它允许通过传递参数的方式命名列。

结果非常令人满意，并且对于调试非常有用：

Console.count，Console.time 和 Console.timeEnd

对于每一名需要调试的开发人员，这三种方法都如同瑞士军刀。 console.count 能计数并输出在同一行和相同标签上调用 count() 的次数。console.time 能启动以指定输入参数为名的计时器，并且最多能在给定页面上同时运行一万个计时器。 一旦启动，我们可以通过调用 console.timeEnd 来停止计时器，并将经过的时间打印到控制台。

输出如下所示：

Console.trace 和 Console.assert

这些方法的功能只是从其被调用的位置打印堆栈跟踪。 假设你正在创建一个 JS 库，并且想告知用户错误发生的位置。 在这种情况下，这些方法可能会非常有用。console.assert 类似于 console.trace，但仅在条件未通过时才会打印。

如你所见，输出正是产生异常时 React（或任何其他库）向我们所展示的内容。

删除所有的 Consoles?

使用控制台通常会迫使我们消除它们。有时我们会忘记是生产版本（并且几天后才粗心地注意到这些控制台输出）。当然，我不建议任何人在不需要控制台的时候滥用它（在看到输入更改生效后就可以删除控制台命令）。你应该将错误日志或跟踪日志保留在开发模式下，以帮助你调试。不论是在工作中还是在我自己的项目中，我都经常使用 Webpack。它允许你使用 [uglifyjs-webpack-plugin] 1 从生产版本中（按类型）删除所有不想保留的控制台。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: {        minimizer: !debug ? [            new UglifyJsPlugin({                // Compression specific options                uglifyOptions: {                    // Eliminate comments                    comments: false,                    compress: {                       // remove warnings                       warnings: false,                       // Drop console statements                       drop_console: true                    },                }           })] : []}

这个配置确实很简单，且简化了工作，所以愉快地使用控制台吧（但不要滥用它！）

组件的黄金法则

用更自然的方式创建和定义组件，组件只包含它们必需的代码

这是很短的一句话，可能你觉得已经理解了，但却很容易违反这一原则。

比如，有如下组件：

如果自然的定义这个组件你可能会这样写：

PersonCard.propTypes = {
  name: PropTypes.string.isRequired,
  jobTitle: PropTypes.string.isRequired,
  pictureUrl: PropTypes.string.isRequired,
};

代码很简单，每个属性都是它所必需的，如 name、job title 和 picture URL。

假设现在需要添加用户可更改的另一个更正式的图片。可能最容易想到的就是：

PersonCard.propTypes = {
  name: PropTypes.string.isRequired,
  jobTitle: PropTypes.string.isRequired,
  officialPictureUrl: PropTypes.string.isRequired,
  pictureUrl: PropTypes.string.isRequired,
  preferOfficial: PropTypes.boolean.isRequired,
};

看起来这些 props 是组件必需的，实际上，组件没有这些 props 也不会受到影响。而且添加了 preferOfficial 看似增加了灵活性，其实逻辑本来不该添加在这里，考虑复用的时候会发现这样做很不优雅。

如何改进

那么转换图片 URL 的逻辑不属于组件本身，那它属于哪里呢？

放在 index 里怎么样？

我们采用如下的目录结构，每个组件都有自己名字命名的文件夹，index 文件是沟通优雅组件和外部世界的桥梁。我们把这个文件叫做 “容器”（container）(参考了React Redux 的 “container” 组件概念）。

/PersonCard
  -PersonCard.js ------ the "natural" component
  -index.js ----------- the "container"

我们将容器（container）定义为连接优雅组件和外部世界的桥梁。正因为此，我们有时候又称之为 “注入（injectors）”。

优雅组件（natural component） 代表你的代码只包含必需的部分（没有诸如怎样获取数据或者位置等细节—所有代码都是必需的）。

外部世界（outside world）可以将数据转换成符合优雅组件所需的 props。

这篇文章讨论的：怎样让组件不受外部世界的污染，以及这样做的好处。

注意：虽然灵感来自 Dan’s Abramov 和 React Redux’s 的理念，但我们的容器和它们的略微不同。
Dan Abramov 的容器 和我们区别是在概念层面上。Dan 认为有两种组件：展示组件和容器组件。我们在这个基础上更进一步，认为先有组件，后有容器。
虽然我们用组件实现容器，但我们不认为容器是传统意义的组件。这就是为什么我们建议你把容器放在 index 文件里—因为它是优雅组件和外部世界的桥梁。并不独立存在。

所以这篇文章会有大量的组件、容器字眼。

为什么？

创建一个优雅组件–很容易、甚至还很有趣。

连接组件和外部世界–有点难。

依我之见，外部世界对优雅组件的污染，主要是这三种方式：

1. 古怪的数据结构
2. 组件 scope 之外的需求 (就像上面的代码那样)
3. 在 update 或者 mount 时触发 event

接下来的几节将会说明这些情况，并用例子展示不同情况下的容器实现。

处理古怪的数据结构

有时候为了呈现需要的信息，需要把数据连在一起然后将其转换成特定的格式。由于没有更好的设计模式，“古怪的” 数据结构是最容易想到的的也是最不优雅的方式。

把古怪的数据结构直接传入组件然后在组件内部转换很诱人，但是这会让组件更复杂、更难测试。

我最近就掉进了这个坑里，我创建了一个组件，从一个特殊的数据结构获取数据，然后让它支持特殊的表单。

ChipField.propTypes = {
  field: PropTypes.object.isRequired,      // <-- the "weird" data structure
  onEditField: PropTypes.func.isRequired,  // <-- and a weird event too
};

然后就诞生了这玩意，古怪的 field 数据结构做为 prop。另外，如果以后不需要在处理它了还好，但是当我们想要在另一个完全不相干的数据结构里复用它时，噩梦来了。

由于这个组件需要一个复杂的数据结构，复用几乎不可能，重构起来也很头大。之前写的测试也会很难看懂，因为它们 mock 了一个古怪的数据结构。在持续重构时测试逻辑很难懂也很难重写。

很不幸，古怪的数据结构很难避免，但是使用容器可以很好的驯服它。好处之一是你可以很好的复用组件了。之前直接把古怪的数据结构传入组件，是难复用的罪魁祸首。

注意： 我并不是说在创造组件的开始所有的组件就都应该是通用的。建议是好好考虑考虑组件的基本功能，然后在开始编码。回报是，通过少量工作写出一些高度可复用的组件。

使用函数组件实现容器

如果你 mapping props 上要求很严格，容器的一个简单的实现是使用另一个函数组件：

import React from 'react';
import PropTypes from 'prop-types';

import getValuesFromField from './helpers/getValuesFromField';
import transformValuesToField from './helpers/transformValuesToField';

import ChipField from './ChipField';

export default function ChipFieldContainer({ field, onEditField }) {
  const values = getValuesFromField(field);
  
  function handleOnChange(values) {
    onEditField(transformValuesToField(values));
  }
  
  return <ChipField values={values} onChange={handleOnChange} />;
}

// external props
ChipFieldContainer.propTypes = {
  field: PropTypes.object.isRequired,
  onEditField: PropTypes.func.isRequired,
};

组件的目录结构如下：

/ChipField
  -ChipField.js ------------------ the "natural" chip field
  -ChipField.test.js
  -index.js ---------------------- the "container"
  -index.test.js
  /helpers ----------------------- a folder for the helpers/utils
    -getValuesFromField.js
    -getValuesFromField.test.js
    -transformValuesToField.js
    -transformValuesToField.test.js

你可能会说，这也太麻烦了。看起来是多了一些文件，绕了很多弯，但是别忘了：

在组件外面转换数据和在组件内工作量是一致的。区别是，在组件外面转换数据时，你给了你自己一个更明确的点来测试转换是否正确，分离了关注点。

在组件 scope 的外部满足需要

和上面的 Person Card 一样，当你用 “黄金法则” 来思考的时候，很可能你会意识到需求是超出了组件的实际范围。该怎么实现呢？

没错，就是容器。

可以创建容器，通过少量的工作来保持组件的优雅。这样做的时候，你会解锁一个更专业的组件，这个组件也简单的多，同时容器也更易于测试。

让我们来写一个 PersonCard 容器来举栗说明。

使用高阶组件实现容器

React Redux 就是使用了 高阶组件 ，实现了从 Redux store 里 push、map props 的容器。由于我们是从 React Redux 借鉴的这个理念，毫无疑问 React Redux 的 connect 就是这个容器。

无论你是使用函数组件来映射 props，还是使用高阶组件来连接 Redux strore，组件的黄金法则还是不变的。首先，编写优雅组件，然后用高阶组件连接二者。

import { connect } from 'react-redux';

import getPictureUrl from './helpers/getPictureUrl';

import PersonCard from './PersonCard';

const mapStateToProps = (state, ownProps) => {
  const { person } = ownProps;
  const { name, jobTitle, customPictureUrl, officialPictureUrl } = person;
  const { preferOfficial } = state.settings;
  
  const pictureUrl = getPictureUrl(preferOfficial, customPictureUrl, officialPictureUrl);
  
  return { name, jobTitle, pictureUrl };
};

const mapDispatchToProps = null;

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PersonCard);

文件结构如下：

/PersonCard
  -PersonCard.js ----------------- natural component
  -PersonCard.test.js
  -index.js ---------------------- container
  -index.test.js
  /helpers
    -getPictureUrl.js ------------ helper
    -getPictureUrl.test.js

注意：在这里，给 getPictureUrl 提供一个助手。这个逻辑很简单。你可能已经注意到了，无论 container 实现如何，文件结构几乎没变。

如果你之前用过 Redux，上面的例子你一定不陌生。再次重申，这个黄金法则不只是一个点子，它还提供了一个新思路。

另外，当使用高阶函数实现容器时，还可以把它们连在一起–把一个高阶组件做为 props 传递给下一个。我就曾经把多个高阶组件连在一起构成了一个单个的容器。

2019 注意：React 社区似乎正在让高阶组件规范成设计模式。

我也如此建议。我的经验是，对于那些不理解 functional composition 的人来说写代码很容易引发 “wrapper 地狱”，组件嵌套太多层从而引发了严重的性能问题。

这里是一些相关文章：Hooks talk (2018)， Recompose talk (2016)， Use a Render Prop! (2017)，When to NOT use Render Props (2018)

说好的钩子来了

使用钩子实现容器

为什么在这里会讨论钩子呢？因为使用钩子实现容器真的很简单呀。

如果你对 React 钩子陌生，建议你看一看 Dan Abramov 和 Ryan Florence 在 2018 React Conf 上的谈话。

要点是，钩子是 React 团队为了解决高阶组件和类似模式的问题引入的。React 想要在类似的场景用钩子替代它们。

这意味着容器既可以用函数组件实现也可以用钩子来实现。

在下面的例子里，我们使用 useRoute 和 useRedux 钩子来代表"外部世界"，使用工具类 getvalue 把外部世界映射为优雅组件的 props。我们还使用了 transformValues 来将组件转换为外部世界的 dispatch 。

import React from 'react';
import PropTypes from 'prop-types';

import { useRouter } from 'react-router';
import { useRedux } from 'react-redux';

import actionCreator from 'your-redux-stuff';

import getValues from './helpers/getVaules';
import transformValues from './helpers/transformValues';

import FooComponent from './FooComponent';

export default function FooComponentContainer(props) {
  // hooks
  const { match } = useRouter({ path: /* ... */ });
  // NOTE: `useRedux` does not exist yet and probably won't look like this
  const { state, dispatch } = useRedux();

  // mapping
  const props = getValues(state, match);
  
  function handleChange(e) {
    const transformed = transformValues(e);
    dispatch(actionCreator(transformed));
  }
  
  // natural component
  return <FooComponent {...props} onChange={handleChange} />;
}

FooComponentContainer.propTypes = { /* ... */ };

下面是对应的目录结构：

/FooComponent ----------- the whole component for others to import
  -FooComponent.js ------ the "natural" part of the component
  -FooComponent.test.js
  -index.js ------------- the "container" that bridges the gap
  -index.js.test.js         and provides dependencies
  /helpers -------------- isolated helpers that you can test easily
    -getValues.js
    -getValues.test.js
    -transformValues.js
    -transformValues.test.js

在容器里触发事件

最后一类导致组件难以复用的情况，是在 props 改变、组件 mounting 的时候触发事件。

比如，以仪表盘为例。设计团队给了你原型图，需要你把它们转换成 React 组件。现在面临的问题是如何用数据填充仪表盘。

可能你已经意识到了可以在组件 mount 时调用函数（比如：dispatch(fetchAction)） 来触发事件。

在类似的这种场景中，普遍做法是添加 componentDidMount 和 compoentDidUpdate 生命周期方法，以及 onMount 和 onDashboardIdChanged props，因为我需要触发外部事件，才能建立组件和外部世界之间的连接。

根据黄金法则，这些 onMount 和 onDashboardIdChanged props 很不优雅的，应该把它们放在容器里。

钩子厉害之处是它能让 onMount 或者 props 改变时的 dispatch 事件变得更容易实现！

在 mount 里触发事件

传入空数组调用 useEffect 来触发 mount 时的 event。

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useRedux } from 'react-redux';

import fetchSomething_reduxAction from 'your-redux-stuff';
import getValues from './helpers/getVaules';
import FooComponent from './FooComponent';

export default function FooComponentContainer(props) {
  // hooks
  // NOTE: `useRedux` does not exist yet and probably won't look like this
  const { state, dispatch } = useRedux();
  
  // dispatch action onMount
  useEffect(() => {
    dispatch(fetchSomething_reduxAction);
  }, []); // the empty array tells react to only fire on mount
  // https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

  // mapping
  const props = getValues(state, match);
  
  // natural component
  return <FooComponent {...props} />;
}

FooComponentContainer.propTypes = { /* ... */ };

组件 mount 时通过钩子在容器里触发事件

在 prop 改变时触发事件

useEffect 可以在重新渲染和函数调用时，监视 property 的改变。

在用 useEffect 前我发现我自己添加了冗余的生命周期函数方法和 onPropertyChanged 属性，因为我不知如何在组件外面扩展属性。

import React from 'react';
import PropTypes from 'prop-types';

/**
 * Before `useEffect`, I found myself adding "unnatural" props
 * to my components that only fired events when the props diffed.
 *
 * I'd find that the component's `render` didn't even use `id`
 * most of the time
 */
export default class BeforeUseEffect extends React.Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    onIdChange: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.props.onIdChange(this.props.id);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.props.onIdChange(this.props.id);
    }
  }

  render() {
    return // ...
  }
}

老方法：当 props 改变的时候触发事件

有了 useEffect 更轻量级的方法来改变 prop ，组件也不必添加多余的 props 了。

mport React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useRedux } from 'react-redux';

import fetchSomething_reduxAction from 'your-redux-stuff';
import getValues from './helpers/getVaules';
import FooComponent from './FooComponent';

export default function FooComponentContainer({ id }) {
  // hooks
  // NOTE: `useRedux` does not exist yet and probably won't look like this
  const { state, dispatch } = useRedux();
  
  // dispatch action onMount
  useEffect(() => {
    dispatch(fetchSomething_reduxAction);
  }, [id]); // `useEffect` will watch this `id` prop and fire the effect when it differs
  // https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

  // mapping
  const props = getValues(state, match);
  
  // natural component
  return <FooComponent {...props} />;
}

FooComponentContainer.propTypes = {
  id: PropTypes.string.isRequired,
};

现在的方法：当 props 改变的时候使用 useEffect 来触发事件

免责声明：在 useEffect 调用前会对比容器里 prop 的异同，还可以使用其它方式，比如高阶组件（比如 recompose 的生命周期 ），或者像 react router 那样在内部 创建一个生命周期组件，但是这些方法要么就是很麻烦要么就是很难理解。

好处是什么

组件保持有趣

对于我来说，创建组件是前端开发中很有趣的部分。能把团队的想法实现感觉很棒，这种感觉值得我们分享。

在也不要让外部世界把组件 API 搞砸了。组件应该和想象中一样没有额外的 props—这也是我从黄金法则里所学到。

更多的机会测试和复用

当你采用一个像这样的模式时，引入了一个新的 data-y 层。在这个层里你可以按需的把数据转换成组件需要的形式。

不管你在不在乎，这个层已经在你的应用里存在了，但是这也可能会加重代码的逻辑。我的经验是当我关注到这一层时，我可以做大量的代码优化，可以复用大量的逻辑，现在当我知道组件之间有共性时我是不会重造轮子的。

我觉得这点在定制钩子上尤为明显。定制钩子给我们一个更简单的方式来抽出逻辑、监测外部的变化—更多时候靠 helper 函数是无法做到的。

最大化团队的输出

在团队协作里，你可以把组件和容器分开。如果事前沟通好 API，你可以同时开启如下工作：

1. Web API (如 后端)
2. 从 Web API 里获取数据（或者其它途径）然后转换数据以符合组件的 API
3. 组件

有没有例外？

就像真正的黄金法则一样，这条黄金法则也有例外。有某些的场景下，在组件里编写冗余的 API 以减少复杂性很有必要。

一个简单的例子就是 props 的命名。如果不在优雅的组件下面重新命名 data key 会让事情变得更复杂。

迷信金科玉律可能会更规范，但是同时也封杀了创造力。

分隔线

不管怎样，黄金法则只是简单的以一个新的角度重申了表现组件和容器组件。总之，在编码前增加基本的组件需求评估，会更容易写出优雅的代码。

感谢阅读。

原文：How the “Golden Rule” of React components can help you write better code，作者：Rico Kahler

一个简单的 “Get Started” 按钮

.btn {
  background: #eb94d0;
  /* 创建渐变 */
  background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
  /* 给按钮添加圆角 */
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #9daef5;
  -webkit-box-shadow: 6px 5px 24px #666666;
  -moz-box-shadow: 6px 5px 24px #666666;
  box-shadow: 6px 5px 24px #666666;
  font-family: Arial;
  color: #fafafa;
  font-size: 27px;
  padding: 19px;
  text-decoration: none;
}
/* 悬停样式 */
.btn:hover {
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
  background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
  background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
  text-decoration: none;
}

透明背景色

.btn {
      /* 文字颜色 */
      color: #0099CC; 
      /* 清除背景色 */
      background: transparent; 
      /* 边框样式、颜色、宽度 */
      border: 2px solid #0099CC;
      /* 给边框添加圆角 */
      border-radius: 6px; 
      /* 字母转大写 */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      text-decoration: none;
      text-transform: uppercase;
}
.btn1 {
      background-color: white; 
      color: black; 
      border: 2px solid #008CBA;
}
/* 悬停样式 */
.btn1:hover {
      background-color: #008CBA;
      color: white;
}

应用 CSS Entities

这里是 CSS entities 的详细介绍。

也可以使用 HTML entities，但是只支持部分功能。

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
content: '\00bb';  /* CSS Entities. 如果用的是 HTML Entities, 请改成 →*/
position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

添加点击动画

CSS: (SCSS)

$gray: #bbbbbb;
* {
  font-family: 'Roboto', sans-serif;
}
.container {
  position: absolute;
  top:50%;
  left:50%;
  margin-left: -65px;
  margin-top: -20px;
  width: 130px;
  height: 40px;
  text-align: center;
}
.btn {
      color: #0099CC; /* 文字颜色 */
      background: transparent; /* 清除背景色 */
      border: 2px solid #0099CC; /* 边框样式、颜色、宽度 */
      border-radius: 70px; /* 给边框添加圆角 */
      text-decoration: none;
      text-transform: uppercase; /* 字母转大写 */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* 兼容 Safari */
      transition-duration: 0.4s;
      cursor: pointer;
}
.btn1 {
      background-color: white; 
      color: black; 
      border: 2px solid #008CBA;
}
 .btn1:hover {
      background-color: #008CBA;
      color: white;
 }
b {
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:100px;
  background: #fff;
  border: 2px solid #008CBA;
  color: #008CBA;
  letter-spacing:1px;
  text-shadow:0;
  font:{
    size:12px;
    weight:bold;
  }
  cursor: pointer;
  transition: all 0.25s ease;
&:active {
    letter-spacing: 2px ;
  }
  &:after {
    content:"";
  }
}
.onclic {
  width: 10px !important;
  height: 70px !important;
  border-radius: 50% !important;
  border-color:$gray;
  border-width:4px;
  font-size:0;
  border-left-color: #008CBA;
  animation: rotating 2s 0.25s linear infinite;
  &:hover {
    color: dodgerblue;
    background: white;
  }
}
.validate {
  content:"";
  font-size:16px;
  color: black;
  background: dodgerblue;
  border-radius: 50px;
  &:after {
    font-family:'FontAwesome';
    content:" done \f00c";
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Javascript: (JQuery)

$(function() {
  $("#button").click(function() {
    $("#button").addClass("onclic", 250, validate);
  });
function validate() {
    setTimeout(function() {
      $("#button").removeClass("onclic");
      $("#button").addClass("validate", 450, callback);
    }, 2250);
  }
  function callback() {
    setTimeout(function() {
      $("#button").removeClass("validate");
    }, 1250);
  }
});

图片按钮

.btn {
 background: #92c7eb;
 background-image: url(“http://res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-pv.png");
 background-size: cover;
 background-position: center;
 display: inline-block;
 border: none;
 padding: 20px;
 width: 70px;
 border-radius: 900px;
 height: 70px;
 transition: all 0.5s;
 cursor: pointer;
}
.btn:hover
{
 width: 75px;
 height: 75px;
}

Icons 按钮

index.html:

<div class="main"><button class="button" style="vertical-align:middle"><a href="#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></button></a>
  <div class="text"><strong>TWEET!</strong></div>
</div>

Style.css:

button{
  border: none;
  border-radius: 50px;
}
html,
body {
  font-size: 20px;
  min-height: 100%;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
}
.text {
  padding-top: 50px;
  font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.text:hover
{
  cursor: pointer;
  color: #1565C0;
}
.main {
  padding: 0px 0px 0px 0px;
  margin: 0;
  background-image: url("https://someimg");
  text-align: center;
  background-size: 100% !important;
  background-repeat: no-repeat;
  width: 900px;
  height: 700px;  
}
.icon-button {
  background-color: white;
  border-radius: 3.6rem;
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  height: 3.6rem;
  line-height: 3.6rem;
  margin: 0 5px;
  position: relative;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 3.6rem;
}
.icon-button span {
  border-radius: 0;
  display: block;
  height: 0;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 0;
}
.icon-button:hover span {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 3.6rem;
  margin: -1.8rem;
}
.twitter span {
  background-color: #4099ff;
}
/* Icons */
.icon-button i {
  background: none;
  color: white;
  height: 3.6rem;
  left: 0;
  line-height: 3.6rem;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 3.6rem;
  z-index: 10;
}
.icon-button .icon-twitter {
  color: #4099ff;
}
.icon-button:hover .icon-twitter {
  color: white;
}

总结

在这个教程里，我们学习了通过 CSS 和一点 JavaScript（如果需要点击后的效果）来美化 CSS 按钮。也可以使用 CSS3ButtonGenerator 来生成一个简单的按钮。有问题欢迎留言。

原文链接：A quick guide to styling buttons using CSS，作者：Ashwini Sheshagiri

我将使用 ReactiveSearch Native，这是一个提供 React Native UI 组件并快捷搭建数据驱动应用程序的开源库。

我会在这个案例中搭建以下待办事项应用程序：

你可以在 snack 或者 expo 上了解这个待办事项应用程序。

什么是 React Native？

以下是文档的描述：

React Native 允许仅使用 JavaScript 搭建移动应用程序，它在设计原理上和 React 一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

即使你刚开始使用 React 或 React Native，你应该也能够跟着这篇文章来搭建自己的实时待办事项应用程序。

为什么我们要使用 ReactiveSearch⚛

ReactiveSearch 是一款我和一群很棒的伙伴合作为 Elasticsearch 开发的 React 和 React Native UI 开源组件库，它提供了各种可以连接到任何的 Elasticsearch 集群的 React Native 组件。

我写了另一篇文章，介绍如何使用 React 和 Elasticsearch 搭建一个 GitHub 仓库浏览器。你可以在那篇文章里查看关于 Elasticsearch 的简要介绍。即使你没有 Elasticsearch 的相关经验，你应该也能够很好地理解这篇文章。

先做一些设置准备⚒

我们将在这里使用的 React Native 版本库。

在开始搭建 UI 之前，我们需要在 Elasticsearch 中创建一个数据存储区。ReactiveSearch 可以与任何 Elasticsearch 索引一起使用，你可以轻松地将它与你自己的数据集一起使用。

在此处查看我的应用数据集，你也可以将其克隆到你自己的应用中。

为了简洁起见，你可以直接使用我的数据集或者使用可以让你创建一个 Elasticsearch 索引数据集（也称为应用程序）的 appbase.io。

所有待办事项的结构都采用以下格式：

{
  "title": "react-native",
  "completed": true,
  "createdAt": 1518449005768
}

启动项目

在开始之前，我建议安装 yarn。 在 Linux 上，只需添加 yarn 存储库并通过包管理器运行 install 命令即可完成。 在 Mac 上，你需要首先安装 Homebrew 以使事情变得更简单。 这里是 yarn 详细的安装文档。 接下来你需要安装 watchman，它是一个文件监听服务，它将帮助 react-native 包顺利运行。

我在这里使用 GitHub 分支中的 create-react-native-app 设置了启动项目。 你可以通过运行以下命令来下载 zip 或克隆基础分支：

git clone -b base https://github.com/appbaseio-apps/todos-native

接下来安装依赖项并启动包：

cd todos-native && yarn && yarn start

在包启动后，你可以使用 Expo 应用程序或使用 Android 或 IOS 模拟器在手机上运行这个应用程序：

嵌入代码

从基础分支克隆代码后，你应该看到如下目录结构：

navigation
├── RootComponent.js         // Root component for our app
├── MainTabNavigator.js      // Tab navigation component
screens
├── TodosScreen.js           // Renders the TodosContainer
components        
├── Header.js                // Header component         
├── AddTodo.js               // Add todo input        
├── AddTodoButton.js         // Add todo floating button
├── TodoItem.js              // The todo item         
├── TodosContainer.js        // Todos main container api
├── todos.js                 // APIs for performing writes
constants                    // All types of constants used in app
types                        // Todo type to be used with prop-types
utils                        // Streaming logic goes here

让我们来解析一下基本的设置。

导航

• 连接到 Elasticsearch 的所有必要配置都在 constants / Config.js 中。
• 我们使用来自 react-navigation 的 TabNavigator 显示 todos 的 All、Active 和 Completed 界面，通过 navigation / RootComponent.js 渲染。 你会注意到 RootComponent 将 [ReactiveBase] 组件中的所有内容封装在 ReactiveSearch 中。 此组件为子 ReactiveSearch 组件提供所有必需的数据。 你可以通过更新 constants / Config.js 中的配置来连接你自己的 Elasticsearch 索引。

导航的逻辑放在 navigation / MainNavigator.js 中。让我们来看看它是如何工作的。如果你想要引用任何内容，这个是选项卡导航的文档。

import React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom } from 'react-navigation';

import Colors from '../constants/Colors';
import CONSTANTS from '../constants';
import TodosScreen from '../screens/TodosScreen';

const commonNavigationOptions = ({ navigation }) => ({
    header: null,
    title: navigation.state.routeName,
});

// we just pass these to render different routes
const routeOptions = {
    screen: TodosScreen,
    navigationOptions: commonNavigationOptions,
};

// different routes for all, active and completed todos
const TabNav = TabNavigator(
    {
        [CONSTANTS.ALL]: routeOptions,
        [CONSTANTS.ACTIVE]: routeOptions,
        [CONSTANTS.COMPLETED]: routeOptions,
    },
    {
        navigationOptions: ({ navigation }) => ({
            // this tells us which icon to render on the tabs
            tabBarIcon: ({ focused }) => {
                const { routeName } = navigation.state;
                let iconName;
                switch (routeName) {
                    case CONSTANTS.ALL:
                        iconName = 'format-list-bulleted';
                        break;
                    case CONSTANTS.ACTIVE:
                        iconName = 'filter-center-focus';
                        break;
                    case CONSTANTS.COMPLETED:
                        iconName = 'playlist-add-check';
                }
                return (
                    <MaterialIcons
                        name={iconName}
                        size={28}
                        style={{ marginBottom: -3 }}
                        color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                    />
                );
            },
        }),
        // for rendering the tabs at bottom
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        animationEnabled: true,
        swipeEnabled: true,
    },
);

export default TabNav;

TabNavigator 函数接受两个参数，第一个是路由配置，第二个是TabNavigator 配置。在上面的代码片段中，我们传递的配置是在底部显示选项卡导航栏并为每个选项卡设置不同的图标。

TodosScreen 和 TodosContainer

screens / TodosScreen.js 中的 TodosScreen 组件将我们的主要 TodosContainer 组件包装在 components / TodosContainer.js中，我们将为应用程序添加各种组件。TodosContainer 将根据我们是否在 All、Active 或者 Completed 选项卡上来显示已过滤的数据。

用于创建，更新和删除待办事项的 API

用于 Elasticsearch 上的 CUD 操作的 API 存储在 api / todos.js 中，它包含三个简单的方法 add，update 和 destroy，它们与 constants / Config.js 中指定的任何 Elasticsearch 索引一起使用。需要记住的一点是，我们创建的每个待办事项都将具有唯一的 _id 字段。我们可以使用此 _id 字段来更新或删除现有的待办事项。

对于我们的 app，我们只需要添加、创建或删除待办事项这三个方法。但是，你可以在文档中找到有关 API 方法的详细说明。

搭建组件和 UI

让我们开始添加一些组件来完成应用程序的功能。

添加 Todos

我们将使用 [native-base] 的 [Fab] 来渲染用于添加待办事项的浮动按钮。

const AddTodoButton = ({ onPress }) => (
  <Fab
      direction="up"
      containerStyle={{}}
      style={{ backgroundColor: COLORS.primary }}
      position="bottomRight"
      onPress={onPress}
  >
      <Icon name="add" />
  </Fab>
);

现在，你可以在 components / TodosContainer.js 中使用此组件。

import AddTodoButton from './AddTodoButton';
...
export default class TodosContainer extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        ...
        <AddTodoButton />
      </View>
    );
  }
}

添加按钮之后，我们就会看到如下内容：

现在，当有人点击此按钮时，我们需要显示添加待办事项的输入框。让我们在 components / AddTodo.js 中添加这个代码。

class AddTodo extends Component {
  constructor(props) {
    super(props);
    const { title, completed, createdAt } = this.props.todo;
    this.state = {
      title,
      completed,
      createdAt,
    };
  }

  onSubmit = () => {
    if (this.state.title.length > 0) this.props.onAdd(this.state);
    return null;
  };

  setStateUtil = (property, value = undefined) => {
    this.setState({
      [property]: value,
    });
  };

  render() {
    const { title, completed } = this.state;
    const { onBlur } = this.props;
    return (
      <View
        style={{
          flex: 1,
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
          paddingRight: 10,
          paddingBottom: 5,
          paddingTop: 5,
        }}
      >
        <CheckBox checked={completed} onPress={() => this.setStateUtil('completed', !completed)} />
        <Body
          style={{
            flex: 1,
            justifyContent: 'flex-start',
            alignItems: 'flex-start',
            paddingLeft: 25,
          }}
        >
          <TextInput
            style={{ width: '90%' }}
            placeholder="What needs to be done?"
            autoFocus
            underLineColorAndroid="transparent"
            underlineColor="transparent"
            blurOnSubmit
            onSubmitEditing={this.onSubmit}
            onChangeText={changedTitle => this.setStateUtil('title', changedTitle)}
            value={title}
            autoCorrect={false}
            autoCapitalize="none"
            onBlur={onBlur}
          />
        </Body>
        <TouchableOpacity
          onPress={() => this.props.onCancelDelete}
          style={{ paddingLeft: 25, paddingRight: 15 }}
        >
          <Ionicons
            name="ios-trash-outline"
            color={`${title.length > 0 ? 'black' : 'grey'}`}
            size={23}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

这里使用的主要组件是 [TextInput]，[Checkbox] 和 `[Ionicons]和 props 属性。我们通过 state 使用 title 和 completed。 我们将从 components / TodosContainer.js 传递 props 属性 todo、onAdd、onCancelDelete 和 onBlur。 这些将有助于添加新待办事项，或在取消添加待办事项的时候重置视图。

现在我们可以更新 components / TodosContainer.js：

...
import AddTodoButton from './AddTodoButton';
import AddTodo from './AddTodo';
import TodoModel from '../api/todos';
...

// will render todos based on the active screen: all, active or completed
export default class TodosContainer extends React.Component {
  state = {
    addingTodo: false,
  };

  componentDidMount() {
    // includes the methods for creation, updation and deletion
    this.api = new TodoModel('react-todos');
  }

  render() {
    return (
      <View style={styles.container}>
        <Header />
        <StatusBar backgroundColor={COLORS.primary} barStyle="light-content" />
        <ScrollView>
          {this.state.addingTodo ? (
            <View style={styles.row}>
              <AddTodo
                onAdd={(todo) => {
                  this.setState({ addingTodo: false });
                  this.api.add(todo);
                }}
                onCancelDelete={() => this.setState({ addingTodo: false })}
                onBlur={() => this.setState({ addingTodo: false })}
              />
            </View>
          ) : null}
        </ScrollView>
        <AddTodoButton onPress={() => this.setState({ addingTodo: true })} />
      </View>
    );
  }
}

AddTodo 组件在 ScrollView 组件中渲染。 我们还将一个 onPress 传递给 AddTodoButton 来切换状态并根据 this.state.addingTodo 显示 AddTodo 组件。传递给 AddTodo 的 onAdd 还使用 api / todos.js 中的 add API 创建了一个新的待办事项。

单击添加按钮后，我们将看到添加这样的待办事项输入框：

显示待办事项

添加待办事项后，将其添加到 Elasticsearch 中。可以使用 ReactiveSearch Native 组件实时查看所有这些数据。

库提供了超过 10 个本地 UI 组件。 对于我们的待办事项应用程序，我们将主要使用 ReactiveList 组件来显示待办事项的状态。

添加 ReactiveList 组件以显示待办事项。 我们将在 components / TodosContainer.js 中添加此组件。 以下是 ReactiveList 的使用方法：

...
import { ReactiveList } from '@appbaseio/reactivesearch-native';
...

export default class TodosContainer extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header />
        <StatusBar backgroundColor={COLORS.primary} barStyle="light-content" />
        <ScrollView>
          <ReactiveList
            componentId="ReactiveList"
            defaultQuery={() => ({
              query: {
                match_all: {},
              },
            })}
            stream
            onAllData={this.onAllData}
            dataField="title"
            showResultStats={false}
            pagination={false}
          />
          ...
        </ScrollView>
        <AddTodoButton onPress={() => this.setState({ addingTodo: true })} />
      </View>
    );
  }
}

我们还没有添加 onAllData 方法，先来了解一下这里使用的 props：

• componentId：组件的唯一标识符。
• defaultQuery：最初应用于列表的查询。 我们将使用 match_all 显示默认情况下的所有待办事项。
• stream：是否流式传输新结果更新或仅显示历史结果。 通过将此设置为 true，我们现在还可以实时监听 Todo 的更新。 稍后会添加与流相关的逻辑。
• onAllData - 一个回调函数，它接收当前待办事项列表和数据流（新的待办事项和任何更新），并返回一个 React 组件或 JSX 进行渲染。 这是语法大概的样子：

<ReactiveList
  onAllData(todos, streamData) {
    // return the list to render
  }
  ...
/>

你可以在 ReactiveList 的文档页面上详细了解所有这些 props。

要查看内容，我们需要从 onAllData 返回 JSX 或 React 组件。为此，我们将使用由 Text 组件组成的 React Native 的 FlatList 。在下一步中，我们将添加自定义的 TodoItem 组件。

...
import { ScrollView, StyleSheet, StatusBar, FlatList, Text } from 'react-native';
import CONSTANTS from '../constants';
...

export default class TodosContainer extends React.Component {
  ...
  onAllData = (todos, streamData) => {
    // filter data based on "screen": [All | Active | Completed]
    const filteredData = this.filterTodosData(todos);

    return (
      <FlatList
        style={{ width: '100%', top: 15 }}
        data={filteredData}
        keyExtractor={item => item._id}
        renderItem={({ item: todo }) => (
            <Text>{todo.title}</Text>
        )}
      />
    );
  };

  filterTodosData = (todosData) => {
    const { screen } = this.props;

    switch (screen) {
      case CONSTANTS.ALL:
        return todosData;
      case CONSTANTS.ACTIVE:
        return todosData.filter(todo => !todo.completed);
      case CONSTANTS.COMPLETED:
        return todosData.filter(todo => todo.completed);
    }

    return todosData;
  };

  render() {
    ...
  }
}

添加 TodoItem(s)

接下来，我们将创建一个单独的组件 TodoItem，用于显示每个待办事项，其中包含 Todo 项目的所有必要标记，如 CheckBox、Text 和一个删除 Icon。这包含在 components / TodoItem.js 中：

class TodoItem extends Component {
  onTodoItemToggle = (todo, propAction) => {
    propAction({
      ...todo,
      completed: !todo.completed,
    });
  };

  render() {
    const { todo, onUpdate, onDelete } = this.props;

    return (
      <View style={styles.row}>
        <View
          style={{
            flex: 1,
            width: '100%',
            flexDirection: 'row',
            alignItems: 'center',
            paddingRight: 10,
            paddingVertical: 5,
          }}
        >
          <TouchableOpacity
            onPress={() => this.onTodoItemToggle(todo, onUpdate)}
            style={{
              flex: 1,
              width: '100%',
              flexDirection: 'row',
            }}
          >
            <CheckBox
              checked={todo.completed}
              onPress={() => this.onTodoItemToggle(todo, onUpdate)}
            />
            <Body
              style={{
                flex: 1,
                justifyContent: 'flex-start',
                alignItems: 'flex-start',
                paddingLeft: 25,
              }}
            >
              <Text
                style={{
                  color: todo.completed ? 'grey' : 'black',
                  textDecorationLine: todo.completed ? 'line-through' : 'none',
                }}
              >
                {todo.title}
              </Text>
            </Body>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => onDelete(todo)}
            style={{ paddingLeft: 25, paddingRight: 15 }}
          >
            <Ionicons
              name="ios-trash-outline"
              color={`${todo.title.length > 0 ? 'black' : 'grey'}`}
              size={23}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

该组件从其 props 获取 todo 以及用于更新和删除待办事项的 onDelete 和 onUpdate。

接下来，我们可以在 components / TodosContainer.js 中的 onAllData 导入和使用 TodoItem 组件，把 todo 和 update、destroy 作为 API 方法作为属性传递给 TodoItem 组件。

class TodosContainer extends Component {
  ...
  onAllData = (todos, streamData) => {
    ...
    return (
      <FlatList
        ...
        renderItem={({ item: todo }) => (
          <TodoItem 
            todo={todo}
            onUpdate={this.api.update} 
            onDelete={this.api.destroy}
          />
        )}
      />
    );
  }
}

流数据更新

你可能已经注意到 todos 显示正常，但你无法在不刷新 app 的情况下查看更新的待办事项。在最后一步中，我们将解决这个难题的缺失部分。

在上一节中，我们为 ReactiveListcomponent 添加了一个 onAllData 方法。 我们将利用接收的第二个参数 onAllData 结构更新流来保持待办事项的更新。以下是更新的 onAllData 方法在 components / TodosContainer.js 中的大概的样子。

import Utils from '../utils';
...

export default class TodosContainer extends React.Component {
  ...
  onAllData = (todos, streamData) => {
    // merge streaming todos data along with current todos
    const todosData = Utils.mergeTodos(todos, streamData);

    // filter data based on "screen": [All | Active | Completed]
    const filteredData = this.filterTodosData(todosData);

    return (
      <FlatList
        style={{ width: '100%', top: 15 }}
        data={filteredData}
        keyExtractor={item => item._id}
        renderItem={({ item: todo }) => (
            <TodoItem todo={todo} onUpdate={this.api.update} onDelete={this.api.destroy} />
        )}
      />
    );
  };
  ...
}

mergeTodos 方法存在于 utils / index.js 中，以下是它的工作原理：

class Utils {
  static mergeTodos(todos, streamData) {
    // generate an array of ids of streamData
    const streamDataIds = streamData.map(todo => todo._id);

    return (
      todos
        // consider streamData as the source of truth
        // first take existing todos which are not present in stream data
        .filter(({ _id }) => !streamDataIds.includes(_id))
        // then add todos from stream data
        .concat(streamData)
        // remove todos which are deleted in stream data
        .filter(todo => !todo._deleted)
        // finally sort on the basis of creation timestamp
        .sort((a, b) => a.createdAt - b.createdAt)
    );
  }
}

export default Utils;

streamData 在创建、删除或更新时接收待办事项对象的数组。如果更新了某个对象，则它包含一个设置为 true 的 _updated 键。同样，如果删除了一个对象，则它包含一个设置为 true 的 _deleted 键。如果创建了一个对象，则它不包含这两个。利用这些点，我们添加了 mergeTodos 函数。

有了这个，你应该能够实时看到 todo 项目的变化！ 如果你有一个运行相同 app 的其他设备/模拟器，它们也将流式传输新的更新。

参考链接

1. Todos app 演示，expo 链接，入门项目和最终源代码
2. ReactiveSearch GitHub repo⭐️
3. ReactiveSearch 文档

Happy coding!

原文：How to build a real-time todo app with React Native，作者：Divyanshu Maithani

性能永远是软件工程领域的“一等公民”。

在团队中营造性能至上文化能帮助你预先降低性能相关的风险。

为什么性能至上如此重要？风险立于何处？

为什么性能优化如此重要

作为合格的 Web 开发者，我们的目标是提供最佳的用户体验。

性能关乎可用性

有很多研究 ([1]，[2]，[3]) 展示了商业目标与网站可用性之间的关联。

网站的用户体验是否快速、简洁，往往能决定网站的成败。

如果你的网站速度太慢，那么再优秀的 UI 框架与架构也不能留住用户。白屏或者加载的时候他们可能受不了等待就关掉网页了。

如果网站不显示任何内容，53% 的用户在 3 秒内就会关闭页面。

另外，根据 Google 站长工具显示，性能也会影响网页在移动端的搜索排序。.

性能关乎可访问性

让我们看看全球市场，考虑到数据成本的时候，性能亦是重要因素。想一想，用户浏览你的网站需要花多少钱？

你可以发现从这个网站查看世界各地的人们为一个月 500M 手机流量支付的费用。问问自己“我愿意花 X 元浏览我的网站么”，或许你会被自己的答案惊到。

此外，在一些国家，人们大部分是通过手机上网（移动端上网时间）。 所以，在优化性能的时候，我们得首先考虑移动端优化。忽略这一点，你的产品可能被许多人拒绝。

性能关乎同理心

拿着锤子的木匠眼中只有钉子。我们不应该仅仅关注钉子，因为我们通过它只能得到对房子肤浅的理解。

不要只顾自我沉浸在一些很炫的事物中（比如新技术、尖端框架），眼界放开，关注住在房子里的人，关注他们的需求，运用新技术和尖端框架去满足他们。

性能至上，时刻保持同理心与无我状态。然而，不幸的是，并不是所有团队都具备这些品质。

为最坏做打算

几周前，同事向我展示了个有趣的场景。某装修网站用内容管理系统（类似WordPress）在后台管理数据。一天，有人上传了一张图片：

这张图片有 9.3 MB，在 MacBook Pro 上，Wi-Fi 连接超好的情况下，加载了 7 秒钟才显示。你能想象如果这张图片在移动端展示，需要多长时间吗？答案是：无穷！因为在移动浏览器打开这个网页，直接就是“未响应”。

就是这个网站，如果你是好奇宝宝，尝试一下，但是请注意你的浏览器很可能卡住。

我们不应该抱怨上传照片的用户，他们只是想展示家具的细节。

回到刚才的观点——了解我们的用户，在用户产生内容的情况下，我们应该总是为最糟糕的情况做准备。

作为开发者，当用户与你开发的软件交互时，你应该有考虑到所有状况的觉悟。

何时优化

通常，性能优化有两种途径。Ben Schwarz 在这篇文章中总结了这两种方式。

首先，让我们看看传统的被动方式。“David， 这有个问题”——当问题出现，再考虑解决之法，谓之被动。我也常常看见看到这种情景：问题来了，快，快请砖家。

这种开发运作方式不仅产生高昂的成本，而且伤害团员协作热情。甚至可能造成各个组员在解决性能优化目标时诿过于人而造成摩擦。

另一方面，积极拥抱主动。以主动的眼光在点点滴滴的开发中考虑性能优化。

如果你想要了解具体的性能优化所带来的好处，以说服你的上司采用“主动”提高的方式，你可以看看网络性能优化演示报告。

开启“主动”模式后，开发效率将得以提升，建立“早发现，早解决”的团队文化，而不是“出现问题，找顾问”。

但性能“这座罗马皇城，不会一夜建成”。我们只有在适当的情景下逐一了解领悟它所带来的影响，以及适当的解决方案。

优化的艺术 - 具体措施

你了解有多少用户通过移动端登录你的站点么？你进行站点压力测试的频率如何？你有在中档设备例如 Moto G4 中测试运行你的设备么？

这就是我们维护的站点日常所要面对的情景。

了解你的目标用户，了解你的目标场景。选择对的针对性的指标是实现团队性能至上文化的重中之重。

当你选择了所关注的指标，你就可以着手性能提升计划。

终于到了动手时间！ 这里分享一些方法与实践，你可以引入你的日常工作。

第一步：性能评测

• Lighthouse，这是一个很棒的项目，你可以在 Chrome 开发者工具中使用它。它能够帮助你了解潜在的性能优化点。也可以在 SEO、可访问性和最佳实践这些方面给你提供参考。
• 通过 Webpagetest 进行指标跟踪调查以及比较性能优化策略部署前后的变化。同样推荐 gtmetrix，小众软件，有亲和力的交互界面。

第二步：性能流程自动化

• 在产品迭代过程中考虑性能相关的问题。bundlesize 是一个非常好的工具包，在迭代过程中定义参数的范围。
• 创建自动测试，如果加载次数或其他指标超出一定的阈值，则测试失败。 Puppeteer 有直接接入谷歌浏览器的应用接口，直接观测相关指标。

第三步：性能可视化

• 团队成员应当明白自己所写代码对团队的影响。 页面打包分析器是个页面打包可视化的工具，如果应用某个库会使代码总量增加 10%，那么开发者在选择之前应该多考虑一下。
• import cost 用于 VSCode，可以告诉你所加载的依赖包的代码量。同样的，这个工具也是帮助每位成员了解自己的代码对项目的影响。

第四步：督促和授权

• 有序的组织离不开强有力的规范，对成员的持续教育应该贯穿整个过程。我们使用 performance checklist 规范每一个项目的性能模块。
• 确保所有人融入到性能优化团队文化。如果只有一人参与，你又陷入了“被动”优化的怪圈。使团队各司其职，共同确保项目各方面品质。

构建性能至上的团队文化非朝夕之功。 它是一个团队觉知问题，行动改善以及成长蜕变的过程。而且性能优化其实并不复杂，你需要具备技术背景以及相应网络知识。扎实的基本功能够帮助你利用最先进的技术提升你的产品。

在我工作的地方，性能优化已成为日常学习工作的一部分。我们不是单一地优化性能，而是会探讨体会性能优化背后的缘由。

性能是产品质量的一部分

最后，产品性能优化与前端交互体验、安全和可访问性提升一样重要。它是软件品质的一部分。

有时，你也许会认为“关注性能提升”是一件画蛇添足的举动。它也许并不是你客户需求的关键。但作为一名合格的开发人员，提供高品质应用本是我们的职责。而应用性能则是软件质量的要素之一。

这里总结几点营造性能至上文化的几点建议：

• 提升你的认知，了解你的用户
• 主动拥抱问题，解决问题
• 保持“测评”与“行动”的习惯：测评，行动，如此循环
• 统一团队，知行合一
• 牢记把关产品质量

参考文献

许多人追问我有什么网络性能优化的参考材料，以下列出：

• Google Developers portal 这儿有许多性能优化技术文章
• perf-tooling.today 网络性能相关资源
• The Chrome DevTeam’s publication 发现站点性能提升创意以及学习案例
• 我们团队的 performance checklist on github，欢迎提出你的想法
• 也可以看看 Smashing Magazine’s 2018 front-end performance checklist，他的文章令我很有收获

同时，我很希望你能分享你的想法。例如，你的团队拥抱性能至上么？你认为哪一部分最有用？如果你认为文章对你有启发，真诚地希望你留言分享！

原文：How to create a web performance culture inside your team，作者：Alex Moldovan

我们将学习如何使用 React 和 React Hook Form 在表单中添加验证。

如何在 React 中创建表单

我们将首先使用语义 UI 库创建一个表单。 因此，让我们使用以下命令之一安装它：

yarn add semantic-ui-react semantic-ui-css
## Or NPM
npm install semantic-ui-react semantic-ui-css

安装后，你需要将包导入到 index.js 文件中，该文件是应用程序的主入口文件。

import 'semantic-ui-css/semantic.min.css'

然后我们需要一个有四个字段的表单。因此，让我们使用以下代码创建它：

import React from 'react';
import { Form, Button } from 'semantic-ui-react';

export default function FormValidation() {
    return (
        <div>
            <Form>
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' type="text" />
                </Form.Field>
                <Form.Field>
                    <label>Email</label>
                    <input placeholder='Email' type="email" />
                </Form.Field>
                <Form.Field>
                    <label>Password</label>
                    <input placeholder='Password' type="password" />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

我们现在有一个表格。它有四个字段，分别是 First Name、Last Name、Email 和 Password。 还有一个 Submit 按钮，用户可以提交表单。

如何安装 React Hook Form

使用以下命令安装 React Hook Form：

npm install react-hook-form

如果你想了解有关该库的更多信息，可以阅读文档。我们可以将它用于 React Web 和 React Native 应用程序。

我们需要在这里做的第一件事是从输入字段中获取数据，并将它们显示到控制台中。我们需要先导入包：

import { useForm } from "react-hook-form";

然后，我们需要在应用程序中解构 useForm 对象，如下所示：

const { register, handleSubmit, formState: { errors } } = useForm();

现在，我们将使用对象 useForm 中的 register 属性来注册表单字段。它会是这样的：

<Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder='First Name'
                        type="text"
                        {...register("firstName")}
                    />
                </Form.Field>

现在 First Name 表单字段具有 firstName 键。如你所见，我们已经在 register 中声明了它。对所有其他字段重复此操作。

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from "react-hook-form";

export default function FormValidation() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    return (
        <div>
            <Form>
                <Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder='First Name'
                        type="text"
                        {...register("firstName")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input
                        placeholder='Last Name'
                        type="text"
                        {...register("lastName")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Email</label>
                    <input
                        placeholder='Email'
                        type="email"
                        {...register("email")}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder='Password'
                        type="password"
                        {...register("password")}
                    />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

这是到目前为止的全部代码。四个字段，并且都注册了。

现在，在表单上，我们需要创建一个 onSubmit 事件。这意味着如果我们点击底部的 Submit 按钮，我们的表单数据应该被提交。

<Form onSubmit={handleSubmit(onSubmit)}>

我们还需要创建一个 onSubmit 函数，它会在点击或按下 Submit 按钮时执行一些特定的操作。

const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
  console.log(data);
}

因此，如果我们单击提交按钮，我们输入的数据将显示在控制台中。

如何向表单添加验证

现在，这是最后也是最值得期待的一步。让我们添加验证。

让我们从 First Name 字段开始。我们将使用 required 和 maxLength 属性，它们是不言自明的。

• Required 意味着该字段是必填的。
• MaxLength 表示我们输入的字符的最大长度。

<input
  placeholder='First Name'
  type="text"
  {...register("firstName", { required: true, maxLength: 10 })}
/>

所以，设置 required 为 true，maxLength 为 10。如果我们提交表单时没有输入 First Name，或者如果字符数超过 10，就会抛出错误。

但是我们也需要添加错误消息本身。在 First Name 字段后添加以下错误消息。

{errors.firstName && <p>Please check the First Name</p>}

在这里，它会抛出一个错误。让我们来看看发生了什么。

你可以在 First Name 字段后面看到 “Please check the First Name” 的错误。

对 Last Name 重复该过程。

输入超过 10 个字符也会引发错误。

现在，我们需要为 email 和 password 字段添加验证。在这里，我们将使用另一个名为 Pattern 的属性。Pattern 将包含一个正则表达式值，它将根据表单中输入的数据进行检查。

pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 

这就是正则表达式模式的样子。这很难阅读，但这是电子邮件验证的一种模式。让我们在我们的应用程序中使用它。

<Form.Field>
                    <label>Email</label>
                    <input
                        placeholder='Email'
                        type="email"
                        {...register("email", 
                        { 
                            required: true,  
                            pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 
                        })}
                    />
                </Form.Field>

在 Email 字段中，添加此模式。

输入错误的电子邮件格式将引发错误。但是当我们输入正确的格式时错误就会消失。

让我们对 Password 字段做同样的事情。对于该字段，我们有一个条件，它应该包含一个大写字母、一个小写字母，并且字符数应该在 6 到 15 之间。如果我们输入的值没有通过这些检查中的任何一个，它就会抛出错误。

 <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder='Password'
                        type="password"
                        {...register("password", { 
                            required: true, 
                            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/
                        })}
                    />
                </Form.Field>
                {errors.password && <p>Please check the Password</p>}

现在，我们所有的四个表单字段都已完成。

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from "react-hook-form";

export default function FormValidation() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = (data) => {
        console.log(data);
    }
    return (
        <div>
            <Form onSubmit={handleSubmit(onSubmit)}>
                <Form.Field>
                    <label>First Name</label>
                    <input
                        placeholder='First Name'
                        type="text"
                        {...register("firstName", { required: true, maxLength: 10 })}
                    />
                </Form.Field>
                {errors.firstName && <p>Please check the First Name</p>}
                <Form.Field>
                    <label>Last Name</label>
                    <input
                        placeholder='Last Name'
                        type="text"
                        {...register("lastName", { required: true, maxLength: 10 })}
                    />
                </Form.Field>
                {errors.lastName && <p>Please check the Last Name</p>}
                <Form.Field>
                    <label>Email</label>
                    <input
                        placeholder='Email'
                        type="email"
                        {...register("email",
                            {
                                required: true,
                                pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                            })}
                    />
                </Form.Field>
                {errors.email && <p>Please check the Email</p>}
                <Form.Field>
                    <label>Password</label>
                    <input
                        placeholder='Password'
                        type="password"
                        {...register("password", {
                            required: true,
                            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/
                        })}
                    />
                </Form.Field>
                {errors.password && <p>Please check the Password</p>}
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

这是整个代码供你参考。我们还可以为错误消息添加一些样式——也许像这样：

总结

现在你知道如何在 React Forms 中添加验证了。请注意，React Hook Form 仅适用于功能组件，不适用于类组件。

你可以在我的 YouTube 频道查看我的视频，让我们使用 React 和 React Hook Form 在表单中添加验证。

这是 GitHub 上的完整代码，供你参考。

祝你学习愉快。

原文：How to Add Form Validation in React Forms using React Hook Form，作者：Nishant Kumar

本文涉及到的 koa-compose 仓库文件，整个index.js文件代码行数虽然不到 50 行，而且测试用例test/test.js文件 300 余行，但非常值得我们学习。

歌德曾说：读一本好书，就是在和高尚的人谈话。同理可得：读源码，也算是和作者的一种学习交流的方式。

阅读本文，你将学到：

1. 熟悉 koa-compose 中间件源码、可以应对面试官相关问题
2. 学会使用测试用例调试源码
3. 学会 jest 部分用法

2. 环境准备

2.1 克隆 koa-compose 项目

本文仓库地址 koa-compose-analysis，求个star~

# 可以直接克隆我的仓库，我的仓库保留的 compose 仓库的 git 记录
git clone https://github.com/lxchuan12/koa-compose-analysis.git
cd koa-compose/compose
npm i

顺带说下：我是怎么保留 compose 仓库的 git 记录的。

# 在 github 上新建一个仓库 `koa-compose-analysis` 克隆下来
git clone https://github.com/lxchuan12/koa-compose-analysis.git
cd koa-compose-analysis
git subtree add --prefix=compose https://github.com/koajs/compose.git main
# 这样就把 compose 文件夹克隆到自己的 git 仓库了。且保留的 git 记录

关于更多 git subtree，可以看这篇文章用 Git Subtree 在多个 Git 项目间双向同步子项目，附简明使用手册。

接着我们来看怎么根据开源项目中提供的测试用例调试源码。

2.2 根据测试用例调试 compose 源码

用VSCode（我的版本是 1.60 ）打开项目，找到 compose/package.json，找到 scripts 和 test 命令。

// compose/package.json
{
    "name": "koa-compose",
    // debug （调试）
    "scripts": {
        "eslint": "standard --fix .",
        "test": "jest"
    },
}

在scripts上方应该会有debug或者调试字样。点击debug(调试)，选择 test。

接着会执行测试用例test/test.js文件。终端输出如下图所示。

接着我们调试 compose/test/test.js 文件。 我们可以在 45行 打上断点，重新点击 package.json => srcipts => test 进入调试模式。 如下图所示。

接着按上方的按钮，继续调试。在compose/index.js文件中关键的地方打上断点，调试学习源码事半功倍。

更多 nodejs 调试相关 可以查看官方文档。

顺便提一下几个调试相关按钮。

1. 继续（F5）

1. 单步跳过（F10）

1. 单步调试（F11）

1. 单步跳出（Shift + F11）

1. 重启（Ctrl + Shift + F5）

1. 断开链接（Shift + F5）

接下来，我们跟着测试用例学源码。

3. 跟着测试用例学源码

分享一个测试用例小技巧：我们可以在测试用例处加上only修饰。

// 例如
it.only('should work', async () => {})

这样我们就可以只执行当前的测试用例，不关心其他的，不会干扰调试。

3.1 正常流程

打开 compose/test/test.js 文件，看第一个测试用例。

// compose/test/test.js
'use strict'

/* eslint-env jest */

const compose = require('..')
const assert = require('assert')

function wait (ms) {
  return new Promise((resolve) => setTimeout(resolve, ms || 1))
}
// 分组
describe('Koa Compose', function () {
  it.only('should work', async () => {
    const arr = []
    const stack = []

    stack.push(async (context, next) => {
      arr.push(1)
      await wait(1)
      await next()
      await wait(1)
      arr.push(6)
    })

    stack.push(async (context, next) => {
      arr.push(2)
      await wait(1)
      await next()
      await wait(1)
      arr.push(5)
    })

    stack.push(async (context, next) => {
      arr.push(3)
      await wait(1)
      await next()
      await wait(1)
      arr.push(4)
    })

    await compose(stack)({})
    // 最后输出数组是 [1,2,3,4,5,6]
    expect(arr).toEqual(expect.arrayContaining([1, 2, 3, 4, 5, 6]))
  })
}

大概看完这段测试用例，context是什么，next又是什么。

在koa的文档上有个非常代表性的中间件 gif 图。

而compose函数作用就是把添加进中间件数组的函数按照上面 gif 图的顺序执行。

3.1.1 compose 函数

简单来说，compose 函数主要做了两件事情。

1. 接收一个参数，校验参数是数组，且校验数组中的每一项是函数。

1. 返回一个函数，这个函数接收两个参数，分别是context和next，这个函数最后返回Promise。

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */
function compose (middleware) {
  // 校验传入的参数是数组，校验数组中每一项是函数
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch(i){
      // 省略，下文讲述
    }
  }
}

接着我们来看 dispatch 函数。

3.1.2 dispatch 函数

function dispatch (i) {
  // 一个函数中多次调用报错
  // await next()
  // await next()
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
  // 取出数组里的 fn1, fn2, fn3...
  let fn = middleware[i]
  // 最后 相等，next 为 undefined
  if (i === middleware.length) fn = next
  // 直接返回 Promise.resolve()
  if (!fn) return Promise.resolve()
  try {
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
  } catch (err) {
    return Promise.reject(err)
  }
}

值得一提的是：bind函数是返回一个新的函数。第一个参数是函数里的this指向（如果函数不需要使用this，一般会写成null）。 这句fn(context, dispatch.bind(null, i + 1)，i + 1 是为了 let fn = middleware[i] 取middleware中的下一个函数。 也就是 next 是下一个中间件里的函数。也就能解释上文中的 gif图函数执行顺序。 测试用例中数组的最终顺序是[1,2,3,4,5,6]。

3.1.3 简化 compose 便于理解

自己动手调试之后，你会发现 compose 执行后就是类似这样的结构（省略 try catch 判断）。

// 这样就可能更好理解了。
// simpleKoaCompose
const [fn1, fn2, fn3] = stack;
const fnMiddleware = function(context){
    return Promise.resolve(
      fn1(context, function next(){
        return Promise.resolve(
          fn2(context, function next(){
              return Promise.resolve(
                  fn3(context, function next(){
                    return Promise.resolve();
                  })
              )
          })
        )
    })
  );
};

也就是说koa-compose返回的是一个Promise，从中间件（传入的数组）中取出第一个函数，传入context和第一个next函数来执行。
第一个next函数里也是返回的是一个Promise，从中间件（传入的数组）中取出第二个函数，传入context和第二个next函数来执行。
第二个next函数里也是返回的是一个Promise，从中间件（传入的数组）中取出第三个函数，传入context和第三个next函数来执行。
第三个...
以此类推。最后一个中间件中有调用next函数，则返回Promise.resolve。如果没有，则不执行next函数。 这样就把所有中间件串联起来了。这也就是我们常说的洋葱模型。

不得不说非常惊艳，“玩还是大神会玩”。

3.2 错误捕获

it('should catch downstream errors', async () => {
  const arr = []
  const stack = []

  stack.push(async (ctx, next) => {
    arr.push(1)
    try {
      arr.push(6)
      await next()
      arr.push(7)
    } catch (err) {
      arr.push(2)
    }
    arr.push(3)
  })

  stack.push(async (ctx, next) => {
    arr.push(4)
    throw new Error()
  })

  await compose(stack)({})
  // 输出顺序 是 [ 1, 6, 4, 2, 3 ]
  expect(arr).toEqual([1, 6, 4, 2, 3])
})

相信理解了第一个测试用例和 compose 函数，也是比较好理解这个测试用例了。这一部分其实就是对应的代码在这里。

try {
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
} catch (err) {
  return Promise.reject(err)
}

3.3 next 函数不能调用多次

it('should throw if next() is called multiple times', () => {
  return compose([
    async (ctx, next) => {
      await next()
      await next()
    }
  ])({}).then(() => {
    throw new Error('boom')
  }, (err) => {
    assert(/multiple times/.test(err.message))
  })
})

这一块对应的则是：

index = -1
dispatch(0)
function dispatch (i) {
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
}

调用两次后 i 和 index 都为 1，所以会报错。

compose/test/test.js文件中总共 300余行，还有很多测试用例可以按照文中方法自行调试。

4. 总结

虽然koa-compose源码 50行 不到，但如果是第一次看源码调试源码，还是会有难度的。其中混杂着高阶函数、闭包、Promise、bind等基础知识。

通过本文，我们熟悉了 koa-compose 中间件常说的洋葱模型，学会了部分 jest 用法，同时也学会了如何使用现成的测试用例去调试源码。

相信学会了通过测试用例调试源码后，会觉得源码也没有想象中的那么难。

开源项目，一般都会有很全面的测试用例。除了可以给我们学习源码调试源码带来方便的同时，也可以给我们带来的启发：自己工作中的项目，也可以逐步引入测试工具，比如 jest

此外，读开源项目源码是我们学习业界大牛设计思想和源码实现等比较好的方式。

看完本文，非常希望能自己动手实践调试源码去学习，容易吸收消化。另外，如果你有余力，可以继续看我的 koa-compose 源码文章：《学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理》。

欢迎在我的网站查看更多内容。

之前我在许多网络社区里汲取了很多营养，获得了很多帮助。现在也该是我写一些东西分享给大家的时候了。虽然我并不是什么大神，但我想通过了解我的这些经历，至少能帮你少走一些弯路。

如果你比较着急，想要快速了解如何从零开始成为一名前端工程师的话，也可以跳过只看：最佳捷径 这个章节。

废话不多说，进入正题：

掌握基础

在我刚打算开始学习前端开发时，想到的第一个问题就是“我到底该学些什么？”。在网上搜了搜，我发现大部分初学者都在关注以下几个知识点：

• JavaScript
• HTML & CSS
• CSS 预处理器(Less & Sass)
• 响应式设计
• JS框架
• 设计模式
• Git
• NodeJS
• 自动化构建工具

JavaScript

我是在CodeSchool（付费）和Codecademy（免费）上开始学习JavaScript的。有人可能不了解这两个网站，他们都属于交互式学习的平台，可以一边看视频一边读教程，然后在浏览器就可以编写代码通过测验。我觉得对初学者来说这是最友好的学习方式。

在我掌握了一些基础之后，就开始阅读 Eloquent Javascript: A Modern Introduction to Programming这本书（你可以点击链接获取免费的在线英文版，也可以在JavaScript编程精解找到中文版）。网上很多人向我推荐这本教程，最早学习阅读它的时候是很痛苦的，不过我很庆幸我坚持了下来。这本书很棒，因为它涵盖了JS的方方面面。

假如你对jQuery感兴趣也可以去学学，不过我推荐先放到之后再说。

HTML&CSS

之后我按照CodeSchool的HTML&CSS 学习路径学习了HTML&CSS的基础知识。同样值得推荐的还有Codecademy的HTML&CSS课程，另外Udacity的HTML和CSS简介可能相对更深入一些。

P.S. Jon Duckett 所著的 HTML & CSS设计与构建网站也是学习入门HTML/CSS的一本非常棒的高分热销书。

LESS/SASS

Less & Sass 一类的CSS预处理器在CSS之上添加许多有用的特性，你可以通过这些预处理器使用CSS原生不支持的高级功能，然后再将它们编译成为CSS。

目前主流的CSS预处理器有Less & Sass两种。Sass可能更受欢迎一些，Less也挺好用的，它上手需要安装的依赖更少一些。你也可以先直接体验一下：在WinLess’s Online Less Compiler你可以在线编写Less代码，并且有一些示例供你参考；在SassMeister你可在线体验Sass.

Less或者Sass你想先学哪个都可以，它们都有很多相似之处。想了解更多可以查看Comparison between LESS & SASS

响应式设计

关于学习响应式设计，Udacity的Responsive Web Design Fundamentals课程非常不错。

假如你还能学习了解一下Bootstrap的话，上手响应式设计应该会更快一些，它的官方文档就是一个很好的开始的地方。

AngularJS

如果你想要了解AngularJS到底是什么，可以观看Google开发者的视频Design Decisions in AngularJS.

刚开始学习Angular的时候我就打算在它的官网读读文档，可惜那文档写的一点都不友好，晦涩难懂。Codeschool上有关AngularJS的课程也不怎么样，内容设置勉强合理，但代码答题的环节有很多Bug，我明明写对的答案就是无法通过测验。

最后我终于找到了一个很棒的网站Egghead.io，它的课程把Angular拆分成一个个小的知识点，每个2-5分钟就可以学完。（网站同样提供React/Node等JS相关教程）

设计模式

事实上设计模式就是一些在编程开发中解决共性问题的经验总结。这方面的知识在所有编程语言之间是通用的，同样也有助于让你写出别人更易读懂的代码，你也能更好地理解别人。

我找到了两个比较好的教程JavaScript Design Patterns和Learning JavaScript Design Patterns.

这里有中文版的JavaScript设计模式，只可惜普遍评价翻译的奇烂无比，要是你对英文不自信，那就只好忍耐一下了。

Chrome开发者工具

这应该是对前端开发者最有用的工具之一了，掌握学习它非常有必要。你可以在Codeschool的Explore and Master Chrome DevTools课程学习。

Git（版本控制系统）

最早我不了解Git的时候以为根本没有学它的必要。Git可以记录你对代码的每一次改动，要是你有什么地方写错了，也可以很方便地退回到任意一个版本（其实版本控制对所有人都非常有用，试想你在改稿改到第十版的时候，老板说他突然觉得还是第一版最好，结果你只保存了最后一版的心情吧）。Try Github是一个了解Git非常好的教程，Atlassian’s Git training可以让你对Git有更深入的了解。最后Codeschool的Git Learning Path也是学习Git非常不错的参考。

NodeJS

掌握NodeJS对一名前端开发者来讲非常有帮助。NodeSchool.io是一个学习Node非常好的地方。

自动化构建工具(Grunt&Gulp)

我自己从来都想不到还有像Grunt和Gulp这样神奇的工具。简单来讲，这些自动化构建工具可以通过脚本自动完成一些任务。例如将Less/Sass编译成为CSS形式。而且你可以设置构建工具监听你对代码的修改，每次修改完成后自动编译，你直接就可以在浏览器里看到实时的效果。这节约了大量的开发时间。

学习使用Grunt和Gulp都需要你了解NodeJS的相关知识，相比Grunt来讲，Gulp更容易配置一些，我也推荐你学习Gulp，当然这全在于你的个人喜好。

你可以在http://Scotch.io上学习Grunt和Gulp.

我在第一份工作中遇到的困难和挑战

在我掌握了这些前端开发的基础之后，我已经有了应聘前端初级岗位的能力。全靠我扎实的JavaScript基础，我才找到了第一份工作。在接下来的一年里，我仍然在继续努力提升自己。

我的第一个项目就需要开发可复用的Web组件，这令我感到很紧张。我当时犯过的错误主要有两个：

1.害怕失败。因为我只是个新人，我很怕自己的代码写错或写的太烂，所以我浪费很多时间重复地检查，确保自己没有犯错并使用了最佳实践。这也导致我固步自封，没办法掌握新的东西或创造性地实现需求。

2.盲目效仿。我当时经常会盲目效仿那些比我有经验的人。也不去思考别人为什么那么做，代码为什么那么写。我也效仿相同的做法是因为我觉得他们都比我有经验，而不去了解这些最佳实践背后的意义和原因。

感谢我的项目主管最终帮我克服了这些。他不断地鼓励我尝试新的东西，即使有时候会出错；也鼓励我多思考多质疑。最后我学到了很多东西，也明白了这些最佳实践是怎么总结出来的。

在项目中应用AngularJS对我来说也是一大挑战，因为很多东西我都只是会用而已，AngularJS就是这么神奇，无法解释其背后的原理。我几次也都想要了解其背后的工作原理，可是那些文档实在是太难懂。直到我后来找到了一本非常棒的书Build Your Own AngularJS.我只是读了Scopes和Watchers章节，就让我很好地了解了angular的工作机制。

一年之后我遇到的挑战是Web开发的迅猛发展。我正在沾沾自喜掌握了AngularJS和Grunt，Gulp和ReactJS就火了起来。等我又花了一年功夫学习之后，Webpack又开始流行。自己掌握的知识过气并不是一件令人舒服的事情。后来，我的一位同事的观点改变了我的看法：

框架和库也许会过时，但是它们背后的原理和概念会经受住时间的考验。

完全正确。AngularJS也许有些过时了，可是理解它例如Directives背后的原理也有助于理解React的组件。

除此之外，我在随后的项目中没有遇到过太大的困难。在我学习前端开发这两年里，最重要的一点是保持热情不断学习新的东西。前端的发展变化实在是太快了。

另外一方面，明白有些东西可以不去学对于一名前端开发者的成长也非常重要。很多人都抱怨前端技术的革新异常迅猛，几乎每天都有新的JS框架和库推出。最后我也终于明白：

你并不需要学习和掌握所有的框架和库。

也许你可以尝试每个框架的Hello wrold示例，但通常你只需要专注于最好和最适用于你自己的，或者手头的项目需要的就好。在层出不穷的框架中间抉择真的不是易事，好在我们能够在网上找到相当多的这类讨论。

进阶提高

再然后，我又通过下面这些方法继续学习和提升：

JavaScript

读完 Eloquent JavaScript 之后，你以为你掌握了 JavaScript，但是 You Don’t Know JS 这套书会摧毁你的这种自信。我的资深前端同事向我推荐了好几次这套书，直到我真的一页页翻开了这套书，我才了解到JS究竟有多复杂，还有许多没有彻底了解JS时会踩的坑。

阅读这套书确实开启了我的思路，我同样也推荐给那些自以为很了解 JS 的人读一读。随后，这里还有两个很棒的学习资料：

• JavaScript, The Better Parts: 来自 D. Crockford 的演讲，主要涵盖了 JS 最大的缺点，优点，以及如何利用它们。
• The Two Pillars of JavaScript: 来自 Eric Eliott 的一篇文章，主要讲解了 JS 的两大要点——原型继承和函数式编程。

在你对JS有了一个深刻的认识之后，尝试着学习JS的最新标准 ECMASCript 2015 (a.k.a. ES6)吧。这有一篇非常棒的介绍 ES6 的文章 ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript，你也可以直接在浏览器里尝试一下 ES6 语法 Babel’s online transpiler.

CSS

CSS 的代码很容易就会变得非常凌乱。想要写出条理清晰的 CSS 有很多种解决方案，我在这里强烈推荐两种比较好的：

• SMACSS: CSS 的可扩展模块化架构。适用于各种大小级别的站点。
• BEM: 一种实现前端模块代码复用的标准方案。

我个人比较喜欢 SMACSS，因为它看起来更清晰一点，但也有很多公司在实践中使用BEM标准。

同样，你也需要开始关注 CSS 的性能了，这有两篇文章： Managing Mobile Performance Optimization 和 High Performance Animation 都可以帮助你理解入门。

JavaScript 构建工具

到这一步你应该以及很熟悉 Grunt/Gulp 了，接下来就需要把JS的构建工具加入到你的自动化构建工具中，以此来更好地管理组织你的 JS 代码。目前最流行的两个是：

• Browserify: 打包你 JS 的模块化代码使其得以在浏览器中运行。
• Webpack: 这是一个更高级的构建工具，除了 JS 以外还能管理构建 CSS 代码甚至是图片一类的静态资源，就是配置起来比较复杂。

http://Scotch.io 上的一个小教程 Getting Started with Browserify 可以让你快速入门Browserify，Why Can’t Anyone Write a Simple Webpack Tutorial 是入门 Webpack 的一个非常棒的教程。我自己并不经常使用 Webpack，它虽然配置复杂，但用起来还是非常爽的。最新的流行趋势就是 Webpack.

ReactJS

ReactJS 越来越受欢迎，而且火得一发不可收拾。甚至有人开始讨论“React要灭掉Angular了吗？”。http://Scotch.io上的教程Learning React.js: Getting Started and Concepts 可以让你对 React 有一个完整直观的印象。之后你可以跟着 React Fundamentals 教程试着开发一个 React 的 App，当然你也可以查阅 React 官方文档。

由于React只注重于视图的实现，同时我也推荐你学习Redux，大多数的Redux教程都比较复杂，CSS Tricks Leveling Up with React: Redux这一篇还算深入浅出地讲解了Redux。当然你也可能听说过Flux，要是你很难在它们之间抉择的话可以查看这一篇讨论Why use Redux over Facebook Flux.

P.S 当然还有别的流行框架可以学习： Vue刚刚发布了2.0版本，学习Vue可以查看作者本人的新手向：Vue 2.0 的建议学习顺序。 学习React可以从中文文档开始。

回顾我所犯的错及从中总结的经验

在学习前端开发的两年里我犯了许多错，最严重地一点是，在我基础还不扎实地时候就开始使用框架和库了。我想这种情况应该在学习任何语言时都可能会遇到，不过对于JS尤其突出。因为JS真的是一个充满了坑地语言。

在我学习AngularJS地时候曾经遇到了一个有关$scope的Bug，我用了3天都没搞明白怎么回事。最后才发现了并不是Angular的毛病，而是因为我对JS本身的this原理理解不够导致的。

代码工整

我很少看到有关这个话题的讨论，刚开始的时候我并不在意自己的代码是否工整。大多数人都是在抱怨自己之前写的代码有多脏多烂。那么为什么就没人讲讲他们之前写得干净工整的代码呢？

我希望这种情况能够得到改善，这需要我们每个人的努力。努力写出含义明确的变量名，即使你需要多打几个字母。否则你只能在之后加上注释来解释清楚，而到了最后别人甚至你自己都很难读懂那些代码是什么意思。所以从现在开始改变吧。

写出干净工整的代码也能够让你的同事更愿意与你合作，也会让你在工作生活中更顺心一些。

jQuery

有人可能注意到了，我没怎么提到jQuery.因为在我的实际经验中，jQuery对我的害处更大一些，你可能不太理解，请听我解释：在我刚开始学习的时候，我感觉jQuery可以被应用在任何地方，解决任何问题。所以我几乎在所有地方都是用jQuery，一旦遇到了任何问题，就去寻找使用jQuery的解决办法。不要误解我的意思，jQuery确实很棒，实在好用的有些过分，所以也就让我忽视了，在我写的jQuery代码中有90%其实可以用很简单的原生JS实现。

你现在可能会想：jQuery也不是什么重量级框架，而其你可以用比原生JS少很多的代码实现一些功能，用它到底有什么不对呢？确实，使用jQuery而不是原生代码并不是主要的问题。而是我在实现一些功能时必须依赖jQuery才能想到解决方法。而这在我接手一些不使用jQuery的项目中当然就成为了很严重的问题。使用jQuery让我对它产生了严重的依赖，也让我几乎了解不到一些JS的原生功能。我掌握的这些方法脱离了jQuery根本就无法使用。

在那以后，我就强迫自己尽量不去使用jQuery，除非是在一些需要大量操作DOM的情况下。再强调一遍，我不是说jQuery不好，但假若我有一次从头再来的机会的话，我一定会先学习如何脱离jQuery来开发，而不是依赖于它。要是你现在也遇到相同的麻烦，可以看这篇You Might Not Need jQuery.

教程资源

• CodeSchool
• HTML/CSS一类的基础教程很不错。
• Team Treehouse
• 教程的质量相当不错，你可以免费试用，不过试用期后每月是30刀袄。
• egghead.io - Learn professional JavaScript tools with Tutorial Videos & Training
  

关于付费教程

确实，有些人不花一分钱学习编程可以得到那些花了钱的人一样的学习效果。我在前面列出的学习资源里大部分是免费的当然也有付费的。有些东西确实还是在视频里有人手把手教你好理解一些。

没错，很多付费的教程的确也非常糟糕，我之前就买到过。但像Egghead.io, CodeSchool, Team Treehouse这些网站上的教程非常棒，通过这些系统的教程学习1-2个月，比起你在良莠不齐博客和文章里学习效率要高太多。

付费教程并不是必须的，但我想你只要是没穷到那份儿上，选择一些优质的付费教程还是对你非常有帮助的。

成功秘笈

在过去两年里，我见过许多的开发者。但是很少遇到比较杰出的，让他人仰慕的开发者。我总觉出这类人都有一些通共的特点，这也是成为一名成功的前端开发者的秘籍：

• 热爱你的工作。这是最重要的一点特质。要是你根本不喜欢写代码，代码也不会喜欢你。在一个领域杰出的人往往是对其所在充满热情的人。
• 大方地分享你的知识。你也许很想把自己解决一些问题的代码保密，但请别这么做。乐于分享他知识的人往往是最有价值的人，因为他们可以进入任何一个团队并带领团队进步。
• 跟紧潮流趋势。不管是阅读博客，还是参与编程问题的讨论，甚至是在休息时谈论前端开发的话题，跟紧潮流趋势也会让你保持领先的位置。

最佳捷径

也许你对我的经历和碎碎念并不感兴趣，所以我在这里提供了这个学习资源的列表：

JavaScript

1. CodeSchool 或 Treehouse’s Javascript learning path (付费) 或 Codecademy’s Javascript course.
2. Eloquent JavaScript
3. You Don’t Know JS
4. JS: The Right Way
5. Learn ES6 by Egghead.io

HTML & CSS

1. CodeSchool 或 Treehouse’s HTML & CSS learning path(付费) 或 HTML and CSS: Design and Build Websites by John Ducket 或 Codecademy’s HTML & CSS course.
2. Specifics on CSS Specifity by CSS Tricks
3. Learn CSS Layout
4. SMACSS
5. 9 basic principles of responsive web design by Froont
6. Responsive Web Design Fundamentals by Google on Udacity (如果你没看过 CodeSchool 或 Treehouse learning path)
7. Managing Mobile Performance Optimization by Smashing Magazine 或 Browser Rendering Optimization 以及 Website Performance Optimization by Google on Udacity.
8. Web fundamentals by Google

Developer Tools

1. Explore and Master DevTools by CodeSchool
2. Learn Git by Codecademy 和 Try Github by Codeschool
3. Introduction to Linux Commands by Smashing Magazine
4. Automate Your Tasks Easily with Gulp.js by Scotch.io

AngularJS

1. Design Decisions in AngularJS by Google Developers (介绍 AngularJS)
2. AngularJS fundamentals by Egghead.io
3. John Papa’s Angular Styleguide
4. Creating a Single Page Todo App with Node and Angular (MEAN) by Scotch.io
5. AngularJS application structure by Egghead.io (Paid) OR Scotch.io’s Angular Courses

ReactJS

1. Learning React.js: Getting Started and Concepts by Scotch.io
2. Intro to webpack by Egghead.io
3. React Fundamentals by Egghead.io
4. Leveling Up with React: Redux by CSS Tricks

Back End

1. NodeJS tutorials by NodeSchool.io
2. How I explained REST to my Wife
3. Creating a Single Page Todo App with Node and Angular by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

推荐文章

这是我自己喜欢的一些资源和文章，仅做推荐。（所以就不翻译啦，因为文章也是英文）

• Web Design in 4 minutes. A very creative and original interactive tutorial that teaches you the fundamentals of web design.
• Awwards. Looking for web design inspiration? Look no further.
• Why Hiring is so hard in tech by Eric Eliott. Here Eric is does an amazing job at summarizing how it’s surprisingly hard to find great developers, and how to become one.
• NoSQL database systems mega comparison by Kristof Kovacs. This is a superb comparison between the most popular NoSQL database systems out there. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, they and more are all here.
• XSS Game. Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. Using this awesome resource you can learn how to find and exploit XSS bugs, and how to prevent them from happening to your web application.
• How To Write Unmaintainable Code. Hilarious article on how to NOT write maintainable, clean code.

推荐工具软件

推荐一些对我自己很有帮助的工具软件。

• Jetbrains Webstorm: 超强前端IDE，学生可以免费使用。
• Atom.io: Github出品的免费开源的代码编辑器。
• Sublime Text: 号称最性感的编辑器。
• caniuse.com: 查询浏览器的兼容性，非常好用。
• Cloud 9: 提供一个在线的Linux虚拟环境，你可以在上面使用Git，Node，部署演示项目等等。
• CodePen, Plunker and JSFiddle: 在线写前端代码的地方，可以实时预览，也方便分享给别人。
• Vanilla List: 一个收集只使用原生JS的库（不依赖jQuery）的列表。
• You Might Not Need jQuery
• PublicAPIs: 所有开放的公共API
• Gravit.io: 在线设计Web原型，免费袄。
• Adobe Kuler:Adobe家推出的工具，用来给网站配色。
• Name that color:不知道CSS某个颜色类该怎么命名？到这里来查询吧。

原文链接：My journey to becoming a web developer from scratch without a CS degree (and what I learned from…，作者：Sergei Garcia

译者按：为了对初学者更加友好，我会将原文中的大多数链接替换成同类中文资源。

在我们正式开始之前有两点需要提醒的：

1.你完全可以跳过文中的部分内容。

不管你现在处于学习Web开发的那个阶段，这篇指南都会对你有所帮助。本篇教程的每个章节根据描述你掌握知识的进度命名。你可以直接跳到最符合你当前情况的部分开始读。不过作为一名初学者，或者只是才打算开始学习Web开发，还是从头开始阅读吧。

2.在你选定某个专业方向之前先把所有的都尝试一下。

赚钱不是最重要的，重要的是你需要热爱你的工作。但你不去尝试永远都不会知道自己喜欢什么。

在这篇教程中将会带你领略Web开发的各个领域，首先浅尝辄止，然后再帮你挑选你所感兴趣的方向。在一开始，你不需要精通任何技术，只需要了解一些皮毛然后就去看看别的。直到你找到了一个想要努力的方向，再进行深入的学习。

我已经决定要学习编程了。我也喜欢Web开发，但就是不知道可以从哪里开始。

我先得恭喜你做了一个明智的决定！下定决心的你其实已经迈出了一大步，学习Web开发非常刺激，当然有时候也会充满挫折。不过别担心，我这不就是来帮你的么？

你的首要任务是尽快地了解Web开发各个领域的基础知识（通常也统称“全栈”）。你需要掌握的知识会非常宽泛，但也都很基础。这些都只是为了帮助你寻找到你最喜欢的领域，同时掌握一些最基本的通用知识。这样在你决定专精某项知识之前，也能处理好各个方面的困难和挑战。

学习HTML基础

Hypertext Markup Language 超文本标记语言(HTML)用来控制描述现在你在浏览器里看到的网页的内容和布局。从这里开始，你将会了解到如何创建可以与之交互的 用户界面。在你掌握了更多的语言之后，现在的所学就会变得尤为重要。

我在下面列出了你需要掌握的有关HTML的基础知识（都是免费的在线教程，下列教程来自菜鸟教程）：

• 简介
• 元素
• 标题
• 段落
• 头部
• 列表
• 链接
• 图像
• 表格
• 表单
• 总结

我现在已经掌握了HTML基础

很棒！这是重要的第一步！现在你该学点基本的JavaScript啦~

学习JavaScript基础

JavaScript是专门针对Web的编程语言，所有的主流浏览器（Chrome, Firefox, Safari, IE等）都内置支持JavaScript语言。你之前使用过的所有网站和Web应用也都包含大量的JavaScript代码。并且现在的JavaScript语言已经扩展到了包括服务器端、桌面应用、物联网设备在内的各类平台。

不过这才刚刚开始，你只需要了解一些基础知识（以下链接来自廖雪峰JavaScript教程）：

• 快速入门
• 数据类型和变量
• 数组
• 对象
• 条件判断
• 循环
• 函数
• DOM浏览器对象
• 操作DOM
• JSON
• AJAX
• 变量作用域

我已经掌握了HTML和JavaScript基础

你真棒~接下来该收服CSS基础知识啦！

学习CSS基础

CSS 的全称是层叠样式表(Cascading Style Sheets)。CSS被用来定义你在HTML中编写的元素的外观。跟着MDN上的CSS入门教程学习基础知识，在这里学习如何用CSS对网页布局。

转向后端

HTML/JavaScript/CSS都是“Web前端开发”的相关知识。也就是说你目前掌握的语言基本都是在浏览器里运行的。是时候看看后端是什么样子的了。接下来我们将学习如何写在服务器上运行的代码。你并不需要买一台真正的服务器回来，你自己的电脑已经足够强大啦。

有非常多的后端的编程语言，不过既然你已经了解了JavaScript，我推荐你学习NodeJS.NodeJS是一项能够在服务器端运行JS代码的技术。

除此外，你还需要了解一下Express框架和MongoDB.

Express

Express是一个基于NodeJS的Web应用开发框架，用来更方便地同网页进行请求响应交互。

Mongo DB

Mongo DB是一个数据库。用来存储和访问数据。

在这里学习Node.js + Express + MongoDB教程。请放心，你并不需要完全精通Node或Mongo，只需要跟着教程让这个技术栈的应用跑起来就好了。

我需要在前端、后端和全栈之间做抉择。

在你确定你你已经理解了前后端的技术之后，就是时候做决定了。可如果你对之前所学还是一知半解，最好先返回去再了解一些相关的知识。（这就和玩游戏教学关卡通关之后选职业一个概念）

目前，你一共写了两种代码。一种用来和用户交互，另一种和数据交互。你更喜欢哪一种？

用户交互？那么你的选择是前端开发工程师！ 数据交互？那你的选择是后端开发工程师！ 都喜欢？恭喜你，你将选择成为一个全栈工程师！

哪个也没兴趣？也要祝贺你，通过之前的学习，你发现了其实Web开发并不适合你，你也不必在这上面浪费更多的时间和金钱了。还是不想放弃？也许你只是没找到自己喜欢的编程语言？在后面的“我想成为后端工程师”的章节里挑选你喜欢的语言吧！

我想成为全栈工程师！

很不错！看来你得把这篇文章完完整整地读完啦！你需要学习的包含前端和后端的所有知识。

我已经掌握了JavaScript/HTML/CSS基础，我想成为一名前端开发工程师。

想要成为一名合格的前端开发工程师，你需要熟练掌握HTML/CSS/客户端JavaScript.同时你也需要熟练使用一些开发框架。

在开始下面内容的学习之前，确保你已经掌握了HTML基础知识。

HTML进阶

• HTML5教程
• HTML和CSS高级指南

JavaScript进阶

为了让你更深入地了解JavaScrpit，我要推荐一个系列书籍，由Kyle Simpson撰写的《你不知道的JS》。而且整套书都在Github上开源免费！

• You-Dont-Know-JS on Github
• 你不知道的JavaScript（上卷）
• 你不知道的JavaScript（中卷）

除了这套书以外，MDN的JavaScript参考文档也会对你非常有用。

掌握了“前端三剑客”（HTML/CSS/JavaScript）固然很重要。但你想真的写出一些可以赚钱的代码，还需要熟悉一些框架。

学习jQuery

jQuery是史上最受欢迎的JS库。虽然一些新近的框架不再依赖jQuery，但假如你想尽快找到一份工作的话，掌握jQuery是十分有必要的。

我推荐你在FreeCodeCamp上学习jQuery。之后你可以在jQuery学习官网上了解更多的内容。

同时也不要忘了收藏jQueryAPI文档随时查阅。

学习主流JS框架

框架是为了帮助我们解决开发中经常会遇到的问题而开发出来的。JavaScript的框架数不胜数，我们来看看新近流行的一些JS框架，你也可以通过搜索引擎和招聘网站掌握各类框架的需求信息。

React

React是Facebook为了配合Flux架构开发的一款JS框架。主要用来构建用户界面。最近一段时间异常的火爆，已经远远甩开了AngularJS.所以你还在等什么：

• React 入门实例教程
• React 教程

Angular 1 & 2

Angular JS是Google推出的JS框架。刚推出的时候也是红极一时，Angular适用于开发中大型的Web应用。不过有一点恶心人的是，Google在计划推出Angular 2版本时，感觉他们有必要完全重写。结果就导致了1和2用起来感觉完全像是两个不同的框架。假如你想成为一个Angular专家，你就相当于要同时掌握两个框架。

• AngularJS 1 教程
• Angular 2 for TypeScript 中文手册

Vue.js

Vue.js的开发者是尤雨溪。大神也在玩知乎袄。Vue.js是一个用来构筑用户界面的非常轻量的框架，使用非常方便，上手也会很快。并且真的很强大，不会有Angular那么臃肿，也不像React的JSX那么变态。所以我很推荐新手从学习Vue.js开始。

• Vue.js中文官网
• 一个简单的 vue.js 实践教程

学习Bootstrap

（译者）学习Bootstrap可以看我之前总结的这篇：

• 有关Bootstrap你想要知道的都在这里

当然Bootstrap也可以和之前所学的框架协同使用：

• React Bootstrap
• Angular Bootstrap

恭喜！掌握了上述内容之后，你已经是一名合格的前端开发工程师了。

我想成为一名后端开发工程师！

很不错的选择！首先你需要选择后端开发语言。可供选择的特别多，各有优劣。下图是一个编程语言受欢迎程度的排行榜。被框选起来的是Web开发中经常会用到的语言。

要是你完全是个新手，不要着急做决定，先了解一下这几种语言的特性和语法，最后挑选出你喜欢的。

要是你已经掌握了某种语言，那么就专注于它吧！

Java

Java是一门广受欢迎的跨平台语言。它由Oracle公司开发和维护。Java可以用来开发Android应用，桌面软件，当然也能用来开发Web应用（只用做后端，或者用JSP技术也可以开发前端）。Java语言健壮可靠，而且网上有着无数的学习Java的资源。同样也是在大学里广泛教授的面向对象编程语言。

• Java快速教程
• Java Tutorial for Complete Beginners

C#

C# 是微软为了对抗Java开发的编程语言。它在微软的平台上拥有良好的支持。它同样也是面向对象的，也不限于开发Web应用、桌面软件等。要是你忠于Windows的话，C#也许是个不错的选择。

• C# 教程
• Java 和 C# 最大的不同是什么？

Python

Python是最适合新手，最容易学习的编程语言。而且Python广受欢迎，可以被应用在各个领域。人生苦短，请用Python！

• Python 3教程

JavaScript

相信通过之前的学习你对JavaScript已经有所了解了。NodeJS的出现让JS在服务器端运行成为了可能。现在再深入了解一下吧！

• Node入门
• NODESCHOOL

Ruby

Ruby是一朵奇葩。爱它的人对它痴狂，它处在编程语言排行榜的前10名，但增长却非常缓慢。Ruby本身是一种介于函数式编程和命令是编程之间的语言。我推荐你尝试一下，兴许你会变成它的狂热粉丝呢。另外，近些年来Ruby语言的工作机会也有很多。

• 20分钟体验 Ruby

PHP

虽然近一段时间PHP看起来有点过气了。但是请不要忘记，PHP是全世界最好的语言。而且单就Web开发这一块来讲，全世界的网站有多一半是用PHP开发的。PHP7的推出极大地改善了其运行效率，Laravel框架也让编写PHP代码变得无比优雅。PHP不是原作者的菜，但译者最早学习的编程语言就是PHP，在这里也不想挑起语言之争，总之PHP值得你尝试着学习一下。

• PHP 教程

我已经学了很多Web开发的知识，但是缺乏实践经验。

没有任何经验的话是很难找到工作的。

第一步是试着完成一两个个人项目，来熟悉掌握开发流程。

在你的项目开发完毕后，试着在Github这类平台上发布会对你很有帮助。

Github

Github基于版本控制软件Git建立，是全球最大的开源项目托管网站。你可以在上面储存、管理、发布你的代码。Github是你作为一名开发者必须使用的网站。

• GotGitHub

开发个人项目

下面推荐一些你可以尝试的个人开发项目：

• 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用
• Laravel完成一个多用户的博客系统

FreeCodeCamp上面同样有着各种各样的实践项目，在这里推荐两个：

• 创建一个番茄钟计时器 （纯前端）
• 开发一个书籍分享网站 （全栈）

实践经验

接下来你需要一些真实的经验。这意味着你需要与他人协作，参与到真实的项目中来。个人项目自然有其用处，但在找工作时还不够有说服力。

1.为开源项目做贡献

Github上面有着成千上万的开源项目，这些项目中有着许多公开的bug等着你去提供修复。在你的简历中加上你为一些知名项目贡献代码的事迹，将会是你浓墨重彩的一笔。你可以通过Code Triage来关注你感兴趣的项目进展。

2.为你的家人或朋友“打工”

专门为你做生意的朋友或家人开发一款Web应用或者一个网站吧。为他们解决实际的问题，给他们提供帮助。不过在选人之前最好慎重考虑，最好这个人的需求可以在90天左右的时间开发完毕，而且你们俩的关系也最好是比较亲近的。不要因为开发中途的一些矛盾搞得你们最后连朋友都没得做。

3.为非盈利组织工作

这将会是一个非常棒的选择！为非盈利机构开发Web应用，解决他们的实际问题。你可以在Catch a Fire上找到这样的项目。另外，如果你通过了FreeCodeCamp的所有挑战，你也能够获得为非盈利机构开发Web项目的机会。

4.出卖劳动力

你可以在网上找一些外包项目来做，为了避免广告之嫌，译者在这里就不推荐国内的网站了，反正一搜一大把。

我现在已经积累了一些实践经验了，怎么才能找到工作呢？

写一份儿牛X闪闪的简历

• 一份优秀的前端开发工程师简历是怎么样的？
• 程序员简历应该怎么写？

开发一个在线简历网站

开发一个介绍你自己的个人站点！你可以把你之前做过的所有项目都链接到上面。说明各个项目都解决了什么样的实际问题。这会对你很有帮助！

准备好编程面试

• 前端面试题收集
• Python的面试题
• 一套完整的学习手册帮助自己准备 Google 的面试

掌握通用的面试技巧

• 面试70问 经典回答
• 程序员面试要准备哪些方面的内容？
• 修改面试前你都做了什么准备？

出发去找工作吧！

不要妄图一瞬间就找到你心仪的公司和喜爱的岗位。先找到一份可以写代码养活自己的工作再说。等到你积累了更多的经验，自然也就能迈出下一步了。

我想要成为一名自由职业者！

自己当自己的老板听起来是非常爽的。但事实上自由职业并不像想象的那么轻松。在这里推荐Brennan Dunn写了许多有关自由职业者的文章：

DoubleYourFreelancing.com

在外国的网站上注册成为自由职业者对大多数人来说有些不切实际，国内这一块发展也比较混乱，为了避免广告之嫌，译者也就不推荐链接了。

我朝着成为一名Web开发者的方向努力了，但我现在感觉力不从心。

我很理解你的心情。这本来就不是一件容易的事情，而且任何口口声声说着学Web开发很容易的人自己其实都不怎么样，要么就是想要骗你钱。假如你现在有些不知所措，那么重新思考一下这些问题：

不忘初心

问问你自己，你甚至可以写下来！你当初为什么要决定走上这条路？你的想法仍然没有改变么？那么为什么要停下来呢！？继续迎难而上吧！

脚踏实地

现在你已经考虑了很多，脑子里想到了最坏的结果，也期冀最好的愿景，还有现实中最可能发生的情况。你完全可以把这些想法都记录下来。没有必要畏惧，面对现实，脚踏实地地一步步走下去。

欢迎在评论区分享你的心得体会。

原文链接：The Practical Guide to Becoming a Professional Web Developer，作者：Bill Sourour