如何学习 React - 有效的方法

什么是React？

React 是一个免费的开源前端 JavaScript 库，用于通过将您的应用程序划分为更小的组件来构建复杂的用户界面。它由 Facebook 和开发者社区维护。

学习 React 的先决条件

在学习 React 或尝试学习 React 之前，我会说让自己熟悉 HTML、CSS 和 JavaScript。您可以在 2-3 周内学习 HTML 和 CSS，因为它们用于为您的 Web 应用程序创建布局。JavaScript 需要一些时间来精简，因为它是一种编程语言。至少花一两个月的时间学习 JavaScript。不要只是学习和学习，还要创建小项目来实现您所获得的知识。您可以创建一些迷你项目，例如待办事项列表、计算器、随机笑话生成器等。

JavaScript

在学习 JavaScript 时，你必须避免我犯的一些错误。在我学习 JavaScript 的时候，我认为我必须成为JavaScript的绝对高手才能编写 React 代码（这是无稽之谈）。我开始学习高级概念（作为初学者），失败了，我认为我不够好。但是，让我告诉您，作为初学者，您需要学习足够的知识，以便您可以使用 vanilla JavaScript 创建基本项目。一些需要深入学习和理解的主题是

• 变量
• if/else 条件和 switch 语句
• var、let 和 const 之间的区别
• 职能
• 数组
• 数组方法，如filter、map、reduce等。
• ES6 概念
• 承诺
• 回调
• 异步/等待
• 类和 OOP 概念
• 再次使用 API，不要只是学习，要应用！！

React

此时，当您学习了 JavaScript 基础知识后，是时候深入研究 React 了。您可以通过查看 React 官方文档或通过他们的 React 官方教程了解 React 的工作原理来开始学习 React。React Docs 写得很好，涵盖了 React 的基础知识。很好地学习这些主题以从根本上理解 React。

• JSX
• 组件（基于函数和类）
• 生命周期方法
• 状态
• 道具
• 处理事件
• 形式
• 条件渲染
• 使用第三方 API。一旦您了解了这些主题，就可以创建项目以实施它们。您可以创建新项目或重新制作您在使用 React 学习普通 JavaScript 时所做的项目。

React路由器

了解 React 路由器。React router 是一个用于 React 的路由库，它将帮助您在 React 应用程序中浏览不同的页面。了解加载特定页面的内容、在 URL 中传递参数、重定向等。此外，了解 React 路由器不是 React 的一部分，它是为 React 制作的路由库。

React Route

现在，您已经掌握了基本的 React 知识并创建了一些基本项目，是时候学习一些高级概念，如Hooks、Context等。看看 React Docs 并学习这些概念。

• 语境
• 挂钩
• 错误边界
• 高阶组件
• 代码拆分
• 参考资料
• 转发参考
• 渲染道具

一些额外的东西！

您还可以了解一些额外的库，例如材料UI，reactstrap，tailwindcss，语义UI等，一旦你已经学会作出反应的基础。这些库将在您的日常 React Dev 生活中为您提供帮助。但是，并不是必须学习所有内容，您可以在完成 React 基础知识并可以制作项目后尝试学习它们。

恭喜🥳

你是一名 React 开发人员。现在你只需要通过创建项目和经常访问 React Docs 并学习新事物来磨练你的技能。

一些学习 React 的资源 -

• Traversy Media 的 React JS 速成课程 2021
• 完整的 React 课程 2020 - 通过 FreeCodeCamp 学习基础知识、钩子、上下文 API、React 路由器、自定义钩子
• The Net Ninja 的完整现代 React 播放列表

一些有用的提示

• 不要试图一次学习所有内容，理解并接受您是初学者并花费足够的时间来学习这些概念的事实。
• 不要害怕编写糟糕的代码。就像我之前提到的，你是一个初学者，在某些时候每个人都是。明白Progress >>>> Perfection
• 避免教程地狱🤯。Tutorial Hell 指的是当您按照教程一个接一个地学习时，您认为自己在学习，但实际上什么也没学到。如果你在看 Youtube 教程，不要只看一个接一个的视频。意识到您被困在教程地狱中并停止观看更多视频并开始创建自己的项目。
• 让 Google、StackOverflow、文章和博客成为您最好的朋友。开始用谷歌搜索你的问题，很有可能你的问题/错误已经被互联网上的其他人解决了。