前言

学习网站开发

如果在学习本书前，从未有过针对浏览器的前端开发经验，首先需要转换视角，并注意以下三点。

(1) 浏览器是一个无处不在的平台。作为一名前端开发人员，可能为iOS或Android进行过原生开发，有可能用Go、Ruby或PHP编写过服务器端代码，或者为macOS或Windows构建过桌面应用程序，这些类型的开发所针对的平台可能覆盖面很广，但并不普遍。浏览器是世界上几乎所有手机、平板电脑和个人计算机上都可以使用的唯一平台，所以如何编写针对浏览器的代码才是对开发人员的考验。

(2) 前端开发需要具备可视化和程序化思维。一方面是对于网页的外观和感觉，如圆角、阴影、颜色、字体、留白等； 另一方面是管理网页复杂行为的逻辑，如在交互式图片库中交换图片、向购物车中添加商品、验证输入表单的数据等。需要熟练掌握核心技术，并理解它们是如何协同工作的，才可以构建出色的Web应用程序。

(3) Web技术是开放的。没有一家公司能控制网络浏览器的标准，这就意味着，前端开发人员不会每年都得到一个包含未来12个月内需要应对的所有变化的SDK版本。

如果把原生平台比作一个冰冻的池塘，可以在上面舒舒服服地滑冰。那么Web就是一条河流； 蜿蜒曲折，湍急流淌，乱石出没，但这也正是其魅力所在。Web是目前发展最迅捷的平台。适应变化就是前端开发人员的一种生活方式。

学习React

本书的编撰目的是介绍如何为浏览器编写React程序。虽然也会涉及其他前端技术，如HTML和CSS等，但重点肯定是React。因为经验是最好的老师，所以，在本书的学习过程中，将会构建两款React应用程序。

本书不是编程入门教程。读者需要具备编写代码的基础知识和经验，最好对HTML、CSS和JavaScript有所了解。如果之前没有从事过前端开发工作，最好先从学习HTML和CSS开始。

本书的组织结构

本书将指导读者编写两款Web应用程序。

(1) Ottergram是一个图片分享网站，提供最迷人的海洋动物之一——海獭的一些图片，基于此介绍React应用程序和组件。

(2) Code Café。通过Code Café应用程序可以引入许多React技术，用于管理状态(state)、设置路由以及与服务器通信。

通过这些应用程序，读者将会了解到许多编程工具，包括Visual Studio Code编辑器、Node．js和Node软件包管理器npm、文档资源(如Mozilla Developer Network)、Google Chrome的Developer Tools、React hooks、ESLint、React Router、Websockets、React测试库(React Testing Library)和Cypress。

如何使用本书

本书目标是充分利用现有的参考书籍和代码，帮助读者快速入门React开发。本书基于作者在Big Nerd Ranch开设的相关课程，所以需要按章节顺序阅读，循序渐进地学习。这也是Big Nerd Ranch课程学员学习本书的方式。当然，他们也受益于有个很好的学习氛围，包括一群积极上进的同龄人和可以答疑解惑的老师。

排版惯例

为便于阅读，本书使用了一些特定的字体。变量、常量和类型使用固定宽度字体。函数和方法名称使用粗体固定宽度字体。

所有代码列表均采用固定宽度字体。需要输入的代码为粗体。应删除的代码会加删除线。例如，在以下代码中，表示删除React App标题并添加Ottergram标题。

head

...

titleReact App/title

titleOttergram/title

/head

好奇之处

本书许多章节都以一个或多个“好奇之处”结尾。这些部分提供了关于本章主题的深入解释或额外信息。虽然这些信息对于理解或完成本书中的项目并不是绝对必要的，但希望读者会觉得它们是有趣且有用的。

挑战之处

“挑战之处”意在回顾所学知识，也是进一步学习本章内容的机会。建议尽可能多地应对这些挑战，以巩固所学知识，并加深对所讨论概念的理解。

根据难易程度，“挑战之处”共分为3个级别。

(1) 铜牌挑战： 熟能生巧，完成与本章内容非常相似的一些工作。该级别的挑战意在巩固本章中学到的知识，促使读者输入类似的代码，而不是直接将代码摆在自己面前。

(2) 银牌挑战： 进行更深的挖掘和思考。该级别的挑战要用到之前从未见过的函数、事件、标记和样式。不过，该级别的挑战任务仍与本章的内容很类似。

(3) 金牌挑战： 难度最大，可能需要花费数小时才能完成。该级别的挑战不但要求深刻理解本章中的概念，更要自己进行一些高质量的思考并最终解决问题。完成该级别的挑战将为你从事React开发的实际工作打下坚实基础。

在开始挑战前，先制作一份项目的副本，并在该副本中完成挑战任务。本书许多章节都是建立在前序章节的基础上的，所以，在项目副本中完成挑战可以确保能够循序渐进地读完本书。

Create React App工具会自动为所开发的项目创建一个Git代码库(Git repository)。如果非常熟悉Git，就可以使用分支来创建独立的工作区，以应对各种挑战。还可以在文件资源管理器中复制并粘贴文件，以创建一个副本。