我想要告诉初学者的工程师们有关学习React的一些有用的教材和文章的总结

2 年 ago

清, 扬

2 minutes

首先

我在2021年作为一个应届毕业生加入了一家Web开发公司，担任前端工程师，现在是2022年，我已经是第二年了。

在实际工作中，我主要使用React和TypeScript开发前端。

本次我将整理一些对刚入门的工程师在学习前端（React）中会有帮助的资料和文章，并按领域进行分类。

我在Qiita上写了一些针对前端的合集文章，希望您能一并阅读，我会非常高兴的。

这篇文章的受众者

Reactの学習方法を知りたい人

这篇文章的目标

React周辺に関する知識を学習できる教材や記事を知れる

React的所有方面

Tigerhack (YouTube)

在トラハック先生的Youtube频道上，你能通过视频学习React的基础和应用。

在视频中，不仅有很多使用图解进行的解释，而且解说也非常详细，因此即使是对React没有经验的人也可以轻松跟上。

您还可以通过观看同时进行EC应用开发和React输出的视频来进行实践性学习。

我无法掩饰对这些高品质的东西可以免费学习的惊讶。

【2022年最新】React完全入门指南（优达学城）

CodeMafia是一位在Udemy上很有名的教师，他推出的【2022年最新】React完全入门指南课程涵盖了React的核心以及实际操作的各个方面。

在视频中，对React中使用的功能进行了深入解释，包括为什么会产生这样的行为，因此即使是初学者也能理解其深层原理。

同样，您也可以跟上最新的前端技术，如React18和Next.js。

这个Udemy课程可以具体学习以下内容。

テストの書き方

对于那些想要从基础开始全面且深入地学习的人来说，这是一门值得推荐的课程。

从JavaScript的基础开始，入门React，以避免挫折。 (优达学城)

这门课程已经在优达学城获得了最高评价。

这门课程从JavaScript的基础讲解开始，涵盖了从React的基础知识到应用广泛的内容。

由于解说得相当深入，即使是初学者也可以毫无疑问地进行学习。

这是一个适合那些对JavaScript本身有一些担忧或者想要开始学习React的人的推荐课程。

TypeScript 是一种编程语言。

TypeScript生存游戏

《生存指南 TypeScript》是suin先生撰写的一份关于实际应用中所选用的 TypeScript 功能进行解释的文档。

这个设计的理念是「只要掌握这一点，在实际工作中就不会失败（能够幸存）」。

这本教材从 TypeScript 功能的基础介绍开始，然后通过具体例子的解释逐步深入，使学习者可以从基础知识开始学习“具体用法”。

這是一個推薦給新手學習TypeScript或希望學習實用內容的教材。

针对有志成为专业人士的人的TypeScript入门指南

“TypeScript for Aspiring Professionals (commonly known as the Blueberry Book) is an introductory textbook on TypeScript written by the renowned uhyo-san, who is famous in the front-end community.”

尽管它被称为入门书籍，但它在相当本质的方面进行了解释，因此对于从初学者到高级人士的各个层次来说都能够学到东西。

只需要一种选项：
这本书所能学到的内容是

非同期処理

在第六章中介绍的是”高级类型”，即使是中级以上水平的人也可以从中学到很多有用的知识，并且其中包含了在实际工作中使用的方法。

这本书是为那些想要学习TypeScript的人或者希望提升自己的人推荐的。

React和TypeScript

在完成对React和TypeScript的基础学习后，我将介绍一份学习材料，该材料几乎在React实际工作环境中确定会使用的组合——React×TypeScript。

完整版React趣味提升课程

这个课程是在Udemy平台上获得最高评价的课程之一。

这个内容从React基础语法的解释开始，然后学习了如何应用样式和组件分割等内容，最后通过实际的应用开发来输出所学的技术。

可以学习的具体内容如下所列。

カスタムフック

由于React和TypeScript在实际工作中几乎被广泛使用，所以请务必在这门课程中进行学习。

React+Firebase – 反应与火力基地

以下是一份介绍在实际工作场景中经常使用的React×Firebase构建的学习教材。

React和Firebase入门

这份教材可以全面学习React和Firebase的基础知识。

本课程将通过具体的开发来学习Firebase的关键功能，例如认证机制和文件上传。

這是一個推薦給在實務現場使用React×Firebase的人的入門課程。

使用Firebase和React Hooks进行Web应用开发（Udemy）

在这个Udemy课程中，您可以通过开发一个类似Twitter的克隆应用程序来学习React和Firebase的结合使用。

这个课程可以让您亲身经历应用开发，通过实际输出，使您能够更好地在现场运用技术并提升水平。

下一个.js

下一个.js公式教程

因为个人而言，我强烈推荐学习Next.js时参考官方教程，非常易懂。

如果你对英语有抵抗，可以参考一下在Qiita（一个技术类网站）上为你翻译成日文的文章，并从中学习。

在公式教程中，可以全面学习Next.js的基础知识，因此对于想要学习Next.js的人来说，这是一本推荐的教材。

【2022年最新】React完全入门指南

这个教材不仅在React学习材料的章节中进行了推荐，而且也是学习Next的推荐教材。

他用图示清晰地解释了Next.js学习中遇到的“SSR，SG，ISR”等概念，这些是学习的初始难点。

你可以学习从基础到应用广泛的内容，包括Next.js的API Routes等高级应用。

其他

我之前介绍了一些关于React、TypeScript和Next.js等大框架的学习材料和文章，但是从现在开始，我要介绍一些更深入的学习教材。

设计相关

我将介绍一些可以帮助学习React开发中重要设计概念的教材和文章。

React 公式文档

在React公式文档中，对于React的设计原则进行了解释。

由于内容稍微复杂，理解可能需要一些时间。但是，这本书对于在实际工作中使用React的思维方式进行了总结，因此请务必参考一下。

以下是具体的主题内容：

ドッグフーディング

组件设计的（个人）最佳实践

在这篇文章中，我们介绍了组件设计的思路和具体的目录结构。

这篇文章非常有参考价值，因为它清楚地解释了各个层面的责任。

以SOLID原则思考React设计

在这篇文章中提到了SOLID原则。

DIP: 依存性逆転の原則

这篇文章为我们将其转为React并进行解释的文章。

由于提供了具体的代码示例，它变得容易理解，包括“坏例”和“重构后的例子”。

考试相关

公式文件

在公式文件中，对于测试的编写方式和方针进行了详细解释，所以对于即将学习 React 测试的人来说，可以学到“应该做什么”这样的指南。

【初级】前端测试方法汇总

这篇文章介绍了关于前端（React）测试方法的内容，从解释为什么需要编写测试开始，通过实际代码示例介绍了测试的写法。

这篇文章是为那些从未写过测试或想要继续学习的人提供参考的。

表演领域

75个Web前端性能优化选项

这篇文章详细介绍了前端性能调优的内容（随时更新）。

由于提供了具体的代码示例，这篇文章更易理解。

这篇文章适合所有从事前端开发的人阅读一次。

React性能优化概述

这篇文章介绍了React中的性能优化。

从渲染机制开始，并按顺序解释了如何通过什么样的策略来优化性能。

由于提供具体的代码解释，使得即使是初学者也能轻松理解该内容。

应用程序开发（产出）

最后

你对这次介绍給一年级工程师的React学习推荐材料有什么想法呢？

我还有很多其他的文章可以发布，如果您能阅读并喜欢，我会非常高兴。