这是一篇写给初学者的 React 学习建议

学习 React 可能是许多前端开发者今年的首要任务。在这篇文章中，我想给初学者一个全面的概述，告诉他们如何在不被其他技术栈干扰的情况下学习React。

想以【简单 || 快速 || 轻松】的 方式学习 React？

学习是没有捷径的，你必须要有耐心，学习新知识是一种挑战，对于我而言，我是一名开发人员，总是有新的知识点需要我去学习。如果你想要学好 React，那么你需要在这上面花很多时间，你要一步一步的去学习 React，并且不要让自己被其他技术栈干扰。

我在学习 React 之前就听人说，React有陡峭的学习曲线，但是根据我自己的经验，我觉得如果你一步一步的学习 React 并且在学习中过程中不要被其他技术栈分心，学习 React 将没有陡峭的学习曲线。

我们开发项目的时候可能会使用到多个技术栈，我挑选了其中几个技术栈并简单解释一下为什么在学习 React 的时候把它们和 React 结合在一起学习不是一个好方式:

在学习 React 的同时也学习 TypeScript?

不推荐！在将 JavaScript 转换为 TypeScript 之前，我建议先学习 React。如果你将 TypeScript 和 React 结合在一起写，那么不仅普通的 JavaScript 代码会用 TypeScript 写，你的 React 组件也要用 TypeScript 写，如果你还没有学会自己从头开始写 React 代码，你就会变得一团糟。另外，市面上大部分的 React 教程和课程都不是用 TypeScript 编写的，所以它让学习 React 变得更复杂而不是更简单。

在学习 React 的同时也学习 Redux？

不推荐！Redux 是一个流行的 JavaScript 状态管理库，我建议在接触复杂的外部状态管理库(用于大规模和复杂的应用程序)之前，首先要了解 React 及其内置的状态管理，React 已经提供了来处理应用程序状态的 API，有些 React 应用程序甚至不需要 Redux 或任何其他状态管理库。在引入另一个技术栈之前，先学习如何处理 React 中的状态。

学习 React 的先决条件

因为 React 是一个 JS 库，所以没有办法绕过学习 JavaScript。没有 JavaScript 或者一开始不了解 JavaScript，你就不可能学习 React，React 大量使用了 JavaScript 知识点。

先学习 React 还是 JavaScript?

您至少应该了解 JavaScript ES5 的基础知识并对 HTML 和 CSS 有一定的了解。React 还利用了 JavaScript ES6 (ES7, ES8, ES9)，这就是为什么在学习 React 之前至少要熟悉 JavaScript ES6 的原因。在 React 项目中会大量使用到 JavaScript，很多 JavaScript 知识都可以在学习 React 的过程中学习到，在学习的时候让自己保持兴奋，不要停留在 JavaScript 基础知识上太久，如果你没有把它们应用到实际项目中，你就看不到它们的作用。开始构建 React 项目吧，保持好奇! 在学习 React 时，在 JavaScript 和 React 之间来回切换。

为什么要学React?

你为什么要学习React？在 Web 前端领域有很多的 JavaScript 库，初学者通常不会问自己为什么需要它们，他们可能只知道公司和工作岗位需要这些库。然而，有时候我们可以反问这个问题:为什么我需要这个这些库?

它为我解决了什么问题？这个问题不好回答，我这里有一个好的方式来回答这个问题，那就是用普通的 JavaScript 和 React 来实现相同的应用程序，这样一来 React 就会向你展示它为你解决哪些问题。在决定是学习 React 还是其他解决方案(如Vue或Angular)时，也可以使用同样的技巧，使用你所选择的解决方案构建一个基本的应用程序并根据你的开发经验去决定哪种解决方案最适合你

一步一步的学习 React

在我们明确了为什么要学习 React 和学习 React 的先决条件之后，让我们看看如何从零开始学习 React。我坚信最好从查看 React 官方文档开始，该文档紧跟 React 最新的版本，向你介绍了 React 的所有内容

跟着 React 官方文档去学习

作为 web 开发的初学者，查阅库的文档，特别是需要阅读大量英文，可能会让人感到害怕。但我坚信这是学习新东西的最好方式。在你成为一名开发人员的职业道路上，您将习惯通过库或者框架的官方文档来学习它们，那么为什么不现在就习惯呢？阅读官方文档它至少有下面的几个好处:

• 有完整的新手教程
• 你能看到核心贡献者的建议
• 最新的知识点和最新的版本
• 完善的API references

每次我选择一种新技术时，我不会查看任何课程或书籍，而是直接查看该技术的文档，看看它是否有初学者教程，通常会有一个，它的初学者教程就是我学习这个新技术的入口。初学者正确的使用文档，这将使他们在学习新技术时更有效。

在实践中学习 React

在你从 React 文档中学习了 React 初学者教程并从头开始学习完 React 的基础知识之后，你可以自己构建一个项目来继续学习。想出一个项目并不总是一件简单的事情，但还是有很多灵感的，例如，有一些人通过制作游戏来学习 React，在市面上有很多用 React 实现的游戏，这儿有一个react-snake 游戏，你可以先自己实现这个游戏，之后再将你的解决方案与其他解决方案进行比较，你将从错误中总结经验，同时你还可以根据他人的实现来评估你的源代码。

从实践中学习 React 可能是你从其他开发人员那里听到的最常见的建议之一，这个建议适用于生活中的几乎所有事情，作为 React 开发人员，每个任务都可能会给你带来新的挑战。现在市面上有很多学习 React 的视频课程、书籍和教程，有些人们很容易填鸭式的消费这些资料，所以亲自动手做点什么吧，在实践中你可能会被一个问题难住，然后变得绝望，你不得不抽出时间来思考这个问题，最终解决这个问题，收获它的果实。

每天学习 React

每天坚持写代码，你可以参加 100 天代码挑战，每天打卡，让它成为一种习惯。坚持一段时间，你最终会成为一名专业 React 开发人员，学习是一场马拉松，不是短跑。

对外输出

通过展示自己的成果来得到其他 React 开发者的反馈。如果你的 React 项目达到了一个里程碑，把它展示给其他人并征求他们的反馈。下面是一些可以分享 React 作品的知名平台:

1. Reddit
2. reactiflux
3. spectrum

你不仅可以从人们那里得到反馈，还可以加入讨论来更深入的学习 React，向别人解释某个知识点是一个学习新知识的好方法，也许你比其他 React 初学者领先一步，可以帮助他们解决问题。在 reddi t的 React Subreddit 中查看 React Beginner Thread，你可以帮助其他 React 开发者解决他们的问题。

初学者安装 React 环境

如何开始实际编写 React 项目？如果你还没有安装任何编辑器/终端或IDE，只是想看看 React 在代码环境中的感觉如何，那么你可以使用名为 CodeSandbox 的在线代码编辑器玩一下 React，看看你是否喜欢它。然而，如果你想在你的本地机器上开发 React 应用程序，你首先要进行一些安装工作，大致分为下面这几步：

一、安装 node 和 npm

node.js 可以在浏览器之外运行 JavaScript，而 NPM (节点包管理器)则允许你在你的项目中安装像 React 这样的库，几乎所有的现代 JavaScript 项目，你都需要这两种工具。

二、使用 IDE

在这里我推荐 Visual Studio Code，它是一个流行的轻量级 IDE，你可能安装插件扩展它的功能。

三、使用 create-react-app 创建项目

create-react-app 是 React 团队提供的一个创建 React 项目的解决方案，它让你从一个零配置的 React starter 项目开始学习 React，你可以只专注于学习React，而它周围的所有工具都由 create-react-app 负责。

进一步学习 React

在您学习完 React 组件化、Props/State 以及 JSX 语法之后，您可以深入了解高级的 React 概念和模式，例如:

1. React Hooks
2. 高阶组件
3. Render Props
4. React Context

掌握了这些高级的 React 知识点之后，您应该能够轻松地开发更大型的 React 应用程序了。

查找更多的学习资源

在你浏览完 React 官方文档，了解了基本知识和一些高级概念和模式并且自己构建 React 应用程序之后，一定要查看其他 React 资源。请注意，我在本文章的后期才提到查看其他 React 资料，我想指出的是:通过自己开发 React 应用程序或写下自己的学习过程中的总结，从实践中学习是这里的关键。React 学习资料的类型包括：视频课程、书籍、博客和互动性教程，然而，并不是每一种学习材料都适合你，所以看看哪种教学风格最适合你。

React 学习路线图

在你学习了 React 并熟悉了它的基本和高级实现细节之后，你可以通过许多学习途径来提高你的 React 技能，以下是一些建议:

1. React + React Router： 使用路由开发 React 单页应用
2. React + Firebase: 将 React 应用链接到数据库并实现用户身份验证/授权
3. React + GraphQL: 通过一个 GraphQL 接口将 React 应用连接到 Node.js 后端应用程序
4. React + Redux: 在 React 应用中使用可预测的状态管理