如何学习 React - 有效方法

什么是 React？

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

学习 React 的先决条件

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

JavaScript

学习 JavaScript 时，你必须避免我犯过的一些错误。学习 JavaScript 时，我以为只有精通 JavaScript才能编写 React 代码（这完全是胡扯）。我一开始学习的是高级概念（作为初学者），但做不到，我觉得自己还不够好。但是，让我告诉你，作为初学者，你只需要学习到足够的内容，就能用原生 JavaScript 创建基本的项目。以下是一些需要深入学习和理解的主题：

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

反应

既然你已经学习了 JavaScript 基础知识，现在是时候深入学习 React 了。你可以先阅读 React 官方文档，或者学习 React 官方教程，了解 React 的工作原理。React 文档写得非常详细，涵盖了 React 的基础知识。好好学习这些主题，就能从根本上理解 React。

JSX
组件（基于功能和类）
生命周期方法
状态
道具
处理事件
表格
条件渲染
使用第三方 API。理解这些主题后，就可以创建项目来实现它们了。你可以创建新项目，也可以使用 React 重新构建你在学习原生 JavaScript 时创建的项目。

React 路由器

了解 React Router。React Router 是一个 React 路由库，可帮助您在 React 应用中导航不同页面。了解如何加载特定页面的内容、在 URL 中传递参数、重定向等。此外，React Router 并非 React 的一部分，而是一个专为 React 打造的路由库。

高级 React

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

语境
钩子
错误边界
高阶组件
代码拆分
参考文献
转发 Refs
渲染道具

一些额外的东西！

掌握 React 基础知识后，你还可以学习一些额外的库，例如Material UI、reactstrap、tailwindcss、Semantic UI等。这些库将帮助你完成日常的 React 开发工作。不过，学习所有内容并非强制性的，你可以在掌握 React 基础知识并能够创建项目后尝试学习它们。

恭喜🥳

你是一名 React 开发者。现在你只需要通过创建项目、经常访问 React 文档并学习新知识来磨练你的技能。

一些学习 React 的资源 -

一些有用的提示

不要试图一次性学会所有东西，理解并接受你是一个初学者的事实，并花足够的时间来学习这些概念。
不要害怕写出糟糕的代码。就像我之前提到的，你是个初学者，每个人都有这样的经历。要明白这一点Progress >>>> Perfection
避开“教程地狱”🤯。“教程地狱”指的是你跟着一个又一个教程学，以为自己学到了东西，但实际上什么也没学到。如果你在看 YouTube 教程，不要只是一个接一个地看。意识到自己已经陷入了“教程地狱”，停止继续看视频，开始创建你自己的项目吧。
让 Google、StackOverflow、文章和博客成为你最好的朋友。开始用 Google 搜索你的问题吧，你的问题/错误很可能已经被网上的其他人解决了。

在这里找到我 -
Github - shaan-alam
Twitter - shaancodes
Instagram - shaancodes
LinkedIn - Shaan Alam

文章来源：https://dev.to/shaancodes/how-to-learn-react-the- effective-way-2km7