更新日期为2023年7月18日。

我目前正在撰写以下系列文章。从使用webpack搭建React开发环境，理解编译、打包和构建的过程，一直到介绍最新的构建工具vite的强大功能。请务必查看并提供反馈。

 

更新日期（2023年6月28日）

我的同事写了一篇关于搭建React的Docker本地开发环境的方法。由于有良好的HMR（热模块替换）效果，开发者体验非常好，所以希望您能检查以下内容并进行实践等操作，这样就很好了。

 

这本书

太长没看（TL;DR）

• 色々あってよくわからないモダンフロントエンドまわりをキャッチアップするには、まずその歴史や背景から知っていこう

 

• 自分が学びたいことや、そもそもの学習目的を明確化すると学習教材選定が捗る

 

私は「React ハンズオントレーニング」と「りあクト!シリーズ」を学習素材として選択

在谈论工程师的时候，你知道吗…

我今年刚刚加入公司，担任新人SE。但是作为工程师，我觉得需要学习的事情太多了，是不是有点过多？
在过去的三个月里，我有很多机会接触基础设施和后台技术，这对我的学习非常有帮助，但同时也引发了一些思考。

「AWS的服务和IaC的使用变得非常方便，这让人感到非常开心。不过，这也意味着我有更多时间可以学习和实践前端开发，不是吗？最近的工程师们是不是尝试做太多事情了？」

在街上说起全栈工程师，确实在大公司里可能会有不同的职能划分，但就我个人而言，团队人数并不多，所以实际情况是每个人都需要具备一定的能力才能顺利进行开发。此外，我有机会在过去几个月学到了“借用外部资源”这一概念的困难之处，对此我深感庆幸。

稍微走神了一下。
标题为“React 2023 最新 おすすめ 教材 と検索して疲弊しているあなた、もしくはサーバーサイドエンジニアの方へ”的句子真是记录了那些也许需要自己完成全部工作的工程师们为了学习牺牲了宝贵的个人时间，他们渴望进行高效的学习，所以他们会思考“高效的学习到底是什么呢？”。
对于那些辛苦奋斗着寻找关于React和现代前端学习资源或者学习路线的你（我），你（我）可能曾经想喊出“JS太多了！！！”这样的感叹。请暂时离开那一堆标签和书签，来读一读这篇文章。一起思考一下未来的学习方法，真正高效的学习方式是什么呢？

目标读者

• 「私こそがモダンだ」と胸を張って言いたい人

 

• 効率的な勉強法やReact学習の道筋が知りたくてたまらない人

 

• →「6.具体的に選定した学習教材」を見ればその場では解決するかもしれませんが、それは根本的な問題解決になっていないことをこの記事で書きます。

 

プライベートの時間さえも技術のキャッチアップに費やす熱心な人(私とか)

1. 被庞大的学习资源所压倒

为什么我和你要为了找寻最适合的教材和制定明确的学习路线而奔波劳累呢？答案很明确。因为我们希望能够进行尽可能有效率的学习。

所以我在思考：“最好的学习方式应该是最新的、同时可以在了解概念的同时实际动手写作学习的体验（最好还能对钱包友好一些…）” 当然，我认为适用于不同人的学习资料可能会有所不同，因为喜好和个人水平各有差异。

有几个选项可供选择。

• Udemyなどの動画教材

 

• Youtubeなどの動画教材

 

• 本

 

• 公式リファレンス

 

ネット記事

我认为我可能只是无可救药的自私。

Udemy
なんかバージョンも新しいものに対応してるものありそうだし、めっちゃ良さそう!!!けど、高すぎる。。。
例えば
・【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
・Modern React with Redux [2023 Update]
なんかは2023って書いてありますし、ハンズオン形式なので、良い感じそうです。でも、どちらもお値段1万円以上、すみません、却下です。(セールを狙えというのもありますが、私は必要だと思った時に買って勉強したいです。そんくらい払えという意見には、ぐう。。まだその勇気とお財布の余裕とやる気がありません。)

Youtube、ネット記事、本
無料で良質そうなものが様々あります。
・Full Modern React Tutorial
とか
・「エンジニア1年生の自分に教えたいReact学習で重宝できる教材と記事まとめ」@KNR109
のように様々載せてくれているやつもあります。でも、私は最新2023がいいのです。使わなくなってたり、わざわざ不便で書かれなくなった方法を新しい方法を知らずに学ぶなんて、非効率極まりない!!
却下です。

リファレンス
ハンズオンとしては物足りなさを感じそうです。
もちろん重宝します、後々。

从这样的角度来看，真的非常任性呢。

2. 要查这么多东西大概需要一个小时。

我浏览各种文章和教材后感到非常累了。我也感到饿了。尽管如此，我觉得没有一个能完全满足我对所寻找的东西的微妙要求。如果有一个小时的时间，我可能可以学习一下React的基本概念，或者看两集我喜欢的动画片。但在互联网的某个地方，应该有一个满足我所寻找的条件的并且可以弥补这种似乎浪费的时间的“2023年最新最高效的学习路径”。

 

也许，在这个世界上，没有符合我所要求的“只有一个内容就能几乎涵盖到2023年最新的，并且价格合适”的东西。我到底是因为什么才拒绝了这么多我之前看过的优秀教材呢？答案一定集中在这里。

 

「我不想绕远路。只想迅速地抓住中间的机会。」

因为特别是最近的现代前端动向，即使从旁边看也让人眼花缭乱。
“为什么有那么多像什么JS、Re之类的东西存在呢？” 满脑子都是这样的疑问。
做各种教材的时候会遇到一些情况，比如说”那个在那个实操教程里学过的东西现在已经没人用了”，或者说”版本不同，如果升级到最新版本，写法和常用包都完全不同，甚至无法运行(因为没有保证能正常运行)”。
总之，React和现代前端领域似乎会直接面对这种情况，一不留神就会遇到这样的问题，所以让我觉得很讨厌。

那么，如果我们先整体了解一下（哪一部分是核心）呢？

对的。一开始就应该这么做。React以及每个现代前端技术周围的技术为什么会成为必要的呢？React本身经历了什么样的演变才发展到现在呢？

谈论这些方面的内容，比起担心自己可能不会用的实践更加有趣，而且了解“通过这样的演变才有了现在”的知识是非常有价值的，不会过时。事实上，在追赶新功能时，这些知识可能会发挥有效作用。可以说是“鉴古知新”。

而且，这次最头疼，同时也是目标的学习材料选择的分辨率也会提高。

4. 怎么具体操作？

首先，我们可以向谷歌老师（或者最近让你感兴趣的那个女孩）询问“React 2023最新推荐教材”，而不是“React历史演变”之类的问题。这样就能找到很多有见解的人，他们分享了关于React和现代前端的演变的信息。我们可以阅读并理解这些信息。

例如，我是根据以下内容作为参考。

1. 通过 React 了解现代前端开发的历史和进展/NRI Digital博客
→可以大致了解现代前端开发的趋势以及相关工具的出现。

2. クックパッドモダンウェブフロントエンド勉強会資料/morisin
→ 这份资料特别关注现代前端开发中的主流趋势，尤其是React。它告诉了我们为什么React被需求，以及React当前功能的动机所在。同时，它也介绍了2022年的主要更新React 18的附加规范及其动机。（这正是我所追求的最新资讯…!!）

React今昔物语/ICS MEDIA是关于React 18之前版本变化的特别关注点。从React于2013年发布以来，我们可以通过不同版本的发布了解到React在类组件时代、函数组件时代和Hooks API的出现等引人注目的React历史的变化。

React.js: The Documentary是回顾React普及历史的纪录片。
→汇集了与React有关的采访视频。如果你喜欢React，可以考虑去看看。

2023年如何学习React/Reed Barger
→ 如何在2023年学习React？Reed Barger给了一些建议，建议你学习这个，或者反过来告诉你另外一种学习方法。读完1~3部分后，你可以提高信息筛选的准确性。

→ 通过阅读1~3篇论文并观看幻灯片，我们可以了解到在现代前端设计中存在哪些渲染技术以及它们是如何从什么样的需求中诞生的，从而更加深入地理解优秀的用户体验（UX）。

我写了很多代码示例，但这并不意味着你需要完全理解它们。相反，由于你还没有充分学习，所以在这个阶段没有必要完全理解具体如何编写，也不需要完全理解Hooks API和函数式组件的好处。我认为你只需要能够模糊地回忆起日常对它们的听说，比如“我听过这个，某人说过这样的事情”，这样就足够了。

全体都模糊地理解了，那又怎样呢？

这将成为选择与自己目标相符的学习内容的指南。

例：请你放慢说话速度。

2023最新に固執していたが、どうやらひとまずReactのバージョン差異については、最低限2018年~の関数型コンポーネント、2019年〜のHooks APIまでを抑えたバージョンのコンテンツであればいいだろう
状態管理に使うReduxについてはそれなりにコンテンツとしてのボリュームがありそうなので、ひとまず無視してReact Context APIを学習する形でよさそうだ
Next.jsについてはチームやプロジェクトが本格的にReactオンリーで動くことになりそうになってから学習で問題ないだろう(サーバーサイドレンダリングは後回し)

6. 精确选择的学习教材 de

React 手把手教程 第二版 / O’Reilly Japan

我曾对O’Reilly的技术书持有偏见，特别是在阅读其Python书籍时，因为其中的示例太难理解而对其不满。然而，我还是选择了它，原因有以下三点。

1. 只需一个选择，在中文中改写以下内容：

价格在5000日元以下、采用动手操作的形式
内容包含所需最低限度的学习内容
考虑到2021年最新的生态系统的内容

“立即行动！不费力的React开发入门之TypeScript篇 第4版” / 胡桃开发室 搭配 React 由佳大岡

在总价格低于5000日元的情况下，根据内容来看，这本书不仅涉及React，还涵盖了现代前端开发的各个方面，以及实际开发的技巧等。这本书还掌握了React 18这个新版本，同时使用了TypeScript进行编写。作者的名字和我喜欢的人很相似。类似于这样的优质书籍在BOOTH上或者像推荐博客之类的为了广告目的的地方绝对不会出现，直到我看到了《Reactの学習、今からやるならこうする》这本书，才得知这个情况。我强烈推荐把它放在手边作为现代前端开发的伴侣。

我认为本来想要做的事情是”集中精力去做一次决定好的内容，不要东张西望地去努力”。但是，如果你选择的内容的选择理由不明确，可能会想着”嗯，其实Udemy那个教材评价比较好，还是选那个吧”，或者在学完一系列内容之后会想”可能还应该学习其他的吧…”。
此外，当我再次对整体情况有了完整了解后，眺望过我所看过的内容时，我惊讶地发现有一些课程在跟上最新情况方面并不适合，而且有很多过度夸张的东西。有时最新的内容并不一定符合我想要的最新信息。（当然这里并不是说这样的知识是毫无用处的，只是对于我这次学习的目的来说不适用。而且最终还是可能会有”实际上开始学习之后发现是必要的”。）

7. 总结自己原本的不足之处是什么

「分かってから始めたい病患者」という自覚がありながら、自分が何を把握すれば前に進めるのかを知ろうとせずに、目的や学習コンテンツ選びの解像度が低いまま、インターネットの海を彷徨っていた

我首先意识到了这种困境，并在这次学习之前按照以下流程进行了处理。

1. 从“React和现代前端是什么？”这个问题开始，通过观察其周围的情况，我们可以理解它似乎是由不断变化的事实标准和复杂的生态系统构成的。（元信息的了解）

 

1. 根据收集到的信息和当前的学习目标，确定学习项目的优先顺序。

 

实际上，根据这个优先顺序，选择与之匹配的学习内容。

首先，我了解到React和现代前端是什么。它似乎由不断变化的事实标准和复杂的生态系统组成。通过这样做，我可以选择有效的内容来实现”高效地追赶最新和最佳实践”的目标，并且可以安心选择教材，不必担心我所学的内容是过时的技术（或者已经过时）。

重要的是选择适合自己目标的教材，而不是盲目地寻找在街上有所谓的好教材或课程。例如，如果目标是“高效学习”，那么可以像这次一样确定自己需要学习的最基本要点，选择能够满足这些要点的内容，然后专心致志地完成学习并尽快在实践中运用。此外，由于各种不同的目标和对象，比如想学习某个特定功能，或者出于简单的兴趣而学习，我认为应该根据具体情况选择合适的方法。

8. LPR（学习流程再造）的建议

有以下的原因，我开始学习React和现代前端技术，写这篇文章其中一个原因是考虑到以下事项。

在工程师被要求以全栈工程师的时代，我需要学习许多技术。但基本上，这是因为过去的技术人员在基础设施、后端和前端等专业领域上展现出了专长，要达到与他们相同的水平，想必需要花费同样的努力和时间。在当今时代，通过充分利用互联网，高质量的学习内容无处不在，但我真的能够充分利用它们吗？根据我的学习速度，我何时才能真正做到全栈？也许我需要重新检视自己的学习过程。

在本章的标题中提到的“LPR（学习过程再造）”是我创造的一个词。可能优秀的工程师会在学习React或其他新事物时，下意识地选择这种学习内容，但像我这样的新人应该意识到，在选择“看起来不错”的内容之前，需要有意识地根据自己的目标重新构建学习过程。

雖然變得很長了，但為了預防感冒，請勤洗手漱口和注意LPR！讓我們一起努力學習現代前端技術吧。

只需要一个选择，以下是对“参考（敬略）”的中文本地化释义：

仅供参考（请谨慎对待）

• 【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript/【CodeMafia】 WEBプログラミング学習

 

• Modern React with Redux [2023 Update]/Stephen Grider

「エンジニア1年生の自分に教えたいReact学習で重宝できる教材と記事まとめ」/KNR(@KNR109)
Full Modern React Tutorial
React で紐解くモダンフロントエンド開発の歴史と進歩/NRI Digital Blog
クックパッドモダンウェブフロントエンド勉強会資料/morisin
React今昔物語/ICS MEDIA
React.js: The Documentaryで振り返るReact普及の歴史/laiso
How to Learn React in 2023/Reed Barger
モダンフロントエンドデザインパターン 〜 優れたUXを実現するには 〜/淡路 大輔
Reactハンズオンラーニング 第2版/著:Alex Banks、Eve Porcello 訳:宮崎 空
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】/大岡由佳

Reactの学習、今からやるならこうする/ダン@HyperForm(@d0ne1s)

React公式リファレンス
→最近大幅な更新(2023.6.11現在翻訳中)が入ったようで、クラス型コンポーネントを前提としたものを無くし、関数型コンポーネントでHooksを利用する想定のドキュメントにリニューアルしているようです。慣れてきたら公式は常に最高のパートナーになるので、重宝しましょう。