学习React的代码实例

前端小工
76 阅读6分钟

学习React的最好方法是...老实说，这对每个人来说都是不同的。但这里有一些来自一个已经向数万（数百）名开发者教授React的人的方便建议。

让我们先来谈谈抽象的问题。这里有一个来自youmightnotneedjquery.com的抽象的例子：

// $(el).toggleClass(className);

function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className)
  } else {
    var classes = el.className.split(' ')
    var existingIndex = -1
    for (var i = classes.length; i--; ) {
      if (classes[i] === className) existingIndex = i
    }

    if (existingIndex >= 0) {
      classes.splice(existingIndex, 1)
    } else {
      classes.push(className)
    }

    el.className = classes.join(' ')
  }
}

很方便。但这里有一个关键问题...如果你不需要支持IE8，那么你实际上可以将其改为：

// $(el).toggleClass(className)

function toggleClass(el, className) {
  el.classList.toggle(className)
}

说实话，这是一个根本不应该存在的抽象概念......el.classList.toggle(className) ，它本身就足够简单。

所以，在你将一个抽象概念纳入你的应用程序或工作流程之前，你需要了解以下内容：

  1. 这个抽象的好处是什么？
  2. 这个抽象的代价是什么？

如果你不知道这些东西，那么你就有可能为一个你没有的问题的解决方案付出代价。一个没有好处的成本不是一笔好买卖!

理解收益和成本的一个重要部分是感受抽象概念所解决的问题的痛苦。这就是为什么你必须按照正确的顺序学习React及其生态系统，以确保你不会被一次学习太多的东西所淹没，并有效地使用抽象。

关于这一点，请查看《AHA编程》💡。

题外话...想只是玩玩东西吗？要不要只是运送东西？那是完全可以的。只是要认识到你不知道如何取舍，这可能会在将来咬你一口。如果未来并不重要，那么就不要担心这个问题了

我喜欢React的一个原因是它有多少JavaScript。如果你能用普通的JavaScript和DOM API构建一个简单的应用，那么你会更了解React的好处。你也会更有效地使用React，因为说实话，有效使用React的90%是很好地理解JavaScript。对于这一点，我建议阅读我的博文"React需要了解的JavaScript"。还可以看看Wes Bos的JavaScript30.com（完全免费）和BeginnerJavaScript.com（非免费）。

此外，了解现代的JavaScript特性会有很大的帮助。因为JSX（后面会详细介绍）需要一个编译器，大多数React开发者认为现代JavaScript特性/编译器是理所当然的。所以大多数教程和例子都会假设你对现代JavaScript特性有基本的了解。对于这一点，我推荐我的ES6和超越研讨会（完全免费），这是我在PayPal举办的一个研讨会的录音。

太多的 "React初学者 "材料从JSX和一堆工具开始。React本身是非常简单的（而且文档非常好，测试版的文档甚至更好）。React的简单性是我喜欢它的原因。遗憾的是，围绕它的一切都会很快变得复杂，而且很难知道React与你使用的工具和库之间的界限在哪里。正因为如此，我在egghead.io 上创建了完全免费的React 初学者指南。它从index.html 文件中的一切开始，我认为这很重要。你根本不需要任何工具来使用React。我已经用这种方法建立了真正的副业，实现了闪电般的快速迭代和部署。我真的想不出有什么更快的方法来构建这类简单的应用，它可以让你避开大量的复杂性，快速构建和交付应用。在我的文章Super Simple Start to React中了解更多关于这种方法。

我的免费egghead课程的最后一课告诉你如何使用CodeSandbox.io 完全在浏览器中创建你的应用，并将其下载到你的电脑上的create-react-app应用程序。

你不需要安装任何东西，就能获得真正的长处!而一旦你做了，你可以得到真正的远，而不需要配置任何工具。我知道有几家公司用create-react-app运送他们的应用程序。

另外，我的博客上有大量的React相关内容😅。

如果你正在寻找学习React的快速通道，那就去EpicReact.Dev看看吧。它能教你我的《React初学者指南》所做的一切，而且还能教得更多。EpicReact可以成为你的伙伴，从你的React之旅开始，一直到成为这个东西的完全老板。由于采用了练习驱动的方法，它能有效地做到这一点。你将会花更多的时间在键盘上应用你所学到的东西，而不是任何典型的在线课程所能提供的。不要错过EpicReact.Dev。

一旦你决定你不想编写你自己版本的每一个组件，你就可以开始研究依赖性了。外面有大量的组件，在这里你真的需要开始问 "成本是什么 "和 "好处是什么 "的问题。在你感受到它所要解决的痛苦之前，请努力不要添加一个依赖关系。这将使你更有效地使用该依赖关系。

我建议在一个下午内读完npm的文档。认真地，做吧。那里有一些非常有价值的信息。

此外，当你开始使用依赖关系时，你会想要学习如何将这些依赖关系import 。我有一个名为"More than you want to know about ES6 Modules "的演讲，你可能会发现其中包含了关于ES Modules语法的有用信息。

现在是时候认真构建一个真实世界的应用程序了。无论你打算用React在网络上构建什么，你都可以使用Remix作为你的首选框架。它使我能够以出色的性能建立这个网站，同时保持一个我喜欢的奇妙代码库。

要学习Remix，我推荐使用官方文档。我的博客上也有一些Remix的内容，可能对你有帮助。

大多数典型的状态管理将由Remix为你管理，但对于UI状态（没有持久化在后台的状态），你将需要了解如何在React内管理状态。

当你学习React时，你了解了 useStateAPI。你可能也学到了Lifting State Up。这实际上可以让你在React中走得更远，我鼓励你只要你有能力就一直这样做。最终，你可能会开始遇到一些 "道具钻取问题 "的麻烦。当你感觉到它时，你就会知道。当这种情况发生时，我建议你把我的博文"应用程序状态管理 "通读一下。

TL;DR：React是一个应用状态管理库，你不需要Redux。

老实说，我对tailwind的推荐是远远不够的。一旦你的应用程序有超过几百行的CSS，你会发现tailwind真的可以在概念上为你简化事情。它是 "一个以实用为先的CSS框架，用于快速构建自定义设计"。

也就是说，Remix有一个非常好的机制，可以按路线加载（和卸载！）CSS，所以在需要使用Tailwind这样的东西之前，你可以在相当长的一段时间内只写普通的CSS。

从这里，我建议你更深入地研究React。我在egghead.io上开设了高级React组件模式课程，可以给你提供很多非常好的信息（但是你可以在EpicReact.dev上获得这些内容的最新版本，所以我建议你直接拿下它）。

我希望这能给你（和你的朋友）提供一条如何学习react的路径，以及在构建React应用时从哪里开始。过早地给你的应用程序添加抽象，会使它们变得不那么灵活，所以我在构建应用程序时一般也会遵循这种模式。祝您好运!

avatar
文章
阅读
粉丝