30 天内从 Angular 过渡到 React

这将是一篇简短的文章，重点介绍我作为一名 Angular 开发人员在一个月内学习 React 的经历。

2017年6月，我被解雇了，而此前我一直梦想着在特斯拉担任UI工程师。我不想把重点放在这件事上，但需要指出的是，正因如此，我才有了空闲时间，需要通过学习另一个框架来提升自己的技能。

为什么我觉得有必要学习 React？

我列了一份清单，上面列出了所有我看好自己能去的公司。所有这些公司，包括 FTMP，都使用了 React。我做了充分的准备，我发现，如果我的面试对象仅限于那些需要 Angular 开发人员的公司，我就会把很多我想去的公司从我的清单上剔除。我希望能够以前端工程师的身份申请，而不是 Angular 或 React 开发人员。当谈到他们会使用什么框架时（几乎每次都是用其中一种），我知道我可以巧妙地讨论每个框架，并且能够在其中任何一个框架上工作。

我在旧金山湾区，离所有优秀的聚会和活动都很近，所以我参加了更多 React 聚会，并开始在家办公，从零开始学习 React。我希望自己能够像学习 Angular 一样精通 React。React 的简单易用让我感到惊讶。我也很快意识到，React 正在经历一些成长的阵痛，即将发生的一些变化不仅会改变 React 开发人员编写组件的方式，而且这些变化将是该框架的一次重大演进。

我想从测试驱动的角度开始学习 React 的基础知识，因此，我通过 Chris Minnick 的《使用 React 进行测试驱动开发》开始学习 React 。由于时间充裕，我认为从测试驱动的角度学习 React 非常重要，或者至少尝试一下。学习这门课程很容易，之后，我有信心能够在大多数 React 代码中实现单元测试和集成测试。此外，我认为从一开始就熟悉每个框架的默认测试模式也很重要。

这两个框架确实有所不同，但从 UI 角度来看，它们有很多共同点，Angular 为我（作为 UI 工程师）提供的大多数功能，React 也允许我做，只是方式不同而已。

在 Angular 中，如果安装了 CLI，则可以使用 Jasmine 和 Karma 进行开箱即用的测试。在 React 中，相当于 CLI 的工具是 create-react-app，而我发现最简单、也是大多数人使用的测试入门工具是 Enzyme 和 Jest。所以，这门课程对解释这些工具在 React 中的安装和使用非常有帮助。

我对学习 React 充满期待，充满信心，甚至想把 Redux 作为我的下一个学习目标。作为一名曾在多家大公司工作的 Angular 开发者，我亲眼目睹了他们经常因为状态管理不当而陷入糟糕的实践，因此我想把 Redux 列为首要任务，但我知道这并非像直接学习 Redux 那样简单。我强迫自己先学习一些响应式编程，使用 filter、map 和 reduce。我用原生 JavaScript 练习这些概念，就像我学习如何实现 Flux 和 Redux 模式一样。

我认为，使用纯 JavaScript 来学习这些概念是学习状态管理时最重要的事情。因为你学习的模式应该能够应用到 Angular、React、Vue 或任何其他框架或库中。理解你所选框架之外的这些概念，可以确保你对技术的理解不局限于一种特定的方法。

话虽如此，我不确定是否会将 Redux 带到 Angular，因为我认为将我对 Redux 的了解转化为使用 Ngrx/Store 等技术很容易，而且我认为在 Angular 中使用它有很多好处，但我确实意识到将 Redux 与 Angular 一起使用是完全可以的，并且知道我可以决定使用其中之一，因为我新发现的 Redux 知识使我作为一名开发人员更加强大。

说实话，我仍然处于学习状态管理的阶段，并弄清楚如何最好地结合使用 Redux 和 React，我知道这将是一个漫长的旅程，需要一些时间才能变得更好，但我在 Egghead.io 和 Pluralsight 上找到了很棒的课程来帮助我入门：

Redux 入门
Redux 基础知识
Redux 高级

如果要我为 React 和 Redux 的初学者推荐一门课程，我会推荐上面链接的 Dan Abramov（Redux 的作者）的“Redux 入门”课程。事实上，我会按照我列出的顺序推荐上面的课程，而且我还要指出的是，除了 Pluralsight 之外，还有其他非常优秀的 Redux 课程，但我也知道很多人可以通过公司免费订阅 Pluralsight 来使用。

我还想提一下 Redux 的一些免费课程，我是 Traversy Media 的YouTube 频道的忠实粉丝，他的 Redux 课程是免费的。

Redux 与 React 速成课程

事实上，这个家伙在 YouTube 上有很多精彩的内容，而且还有一口很酷的波士顿口音。

我还推荐Free Code Camp，因为他们有大量免费的网络内容，包括很多关于 React 的内容。我知道那里有很多，有些可能更好，谁知道呢，但至少你可以知道从哪里开始寻找付费和免费课程。

尽管 Redux 方面还有很多工作要做，但我还是想学习另一门课程，以确保能够开始用 React 构建自己的应用。我需要学习路由，幸运的是，Egghead.io 上有一门很棒的课程。

使用 React Router v4 向 React 应用添加路由

这是一门很棒的React Router 4 入门课程，他的教学风格切中要点、节奏明快，同时又非常简洁。我很喜欢他一步步讲解你需要了解的 Links、NavLinks 和 Router 配置的各种变化。

了解如何使用其他 JavaScript 框架非常棒。谁知道呢，说不定你真的会在这个过程中转变方向。尤其是今年夏天我去面试的时候，我需要知道，如果我有一份使用 React 的好工作机会，我是否对 React 的了解程度与 Angular 一样高。与此同时，我也学到了很多关于 JavaScript 的知识，以及 React 在创建组件时所利用的新功能，以及 React 如何轻松地与路由器配合使用，以及如何用最少的代码构建一个基本的应用程序。

如果您想克隆它并看看它有多么容易使用，我已经创建了一个使用 react-router-dom 的 repo。

https://github.com/httpJunkie/create-react-app-with-routing

最终，我不仅找到了一份使用 React 的工作，而且还进入了一家同样涉足 React 领域的新公司。我可以加入他们，从初学者的角度围绕 React 的使用创作内容，并成长为一名 React 开发者，教他们的客户如何使用 React 及其相关的组件库。因此，我可以继续学习（这对我来说并不像工作），花时间学习 React 的前沿技术，还可以构建精彩的演示和 Web 应用程序，帮助其他人学习和推广我们的产品。这家公司是Progress，我为他们的Telerik 团队工作，代表 React 社区和他们的KendoReact 组件库进行宣传。

我在 Telerik 博客文章中重点关注的领域之一就是 React Hooks。我开始撰写这个主题的文章，并且我和 React 团队都坚信，Hooks 将引领一种全新的组件构建方式，并以更函数式的方式将它们组合在一起。

在我接触 React 的几个月后，我又选修了Tyler McGinnis 的另一门 React 基础课程《React 基础》，现在还在学习中。学习 Hooks 之后，我又回到了基础部分，原因是我当时正在学习很多新的工作方式，而且我的新工作需要我教授这些概念，但如果我不完全理解 Hooks 所取代的是什么，我就不想去教 Hooks。如果要论证 Hooks 的神奇之处，我需要详细解释为什么新的方式与之前的做事方式相同，甚至更好。

祝您 2019 年过得愉快，并继续学习 JavaScript，我们都知道，要保持相关性，就必须不断学习，所以找到一种让学习变得有趣和享受的方法！