deve.K

エンジニアが未来を切り開く。

English

React ロードマップ 【独学での初学者様用】


スポンサーリンク

react画像

こんにちは!

React.jsを独学で学んでいく初学者様に向けて実際に私が独学で学んできた経験を元にロードマップを作成しました。

少し長めになっております、なので一読いただければと思います。

前提として、『HTML/CSS』『JavaScript/Ts』『Node.js/npm』辺りや、一般的な『Git』『ターミナル操作』などのある程度の理解している事が重要となります。

あまり詳しく書いても、見た時に途方もない道のりでその時点で挫折しかねないので、範囲を狭めていきましょう!。


注意点

※この記事では『Webアプリケーション開発』の方専用ロードマップとなります。

※学習用途が『Webサイト制作』などの目的の方は参考にならないと思いますのでご了承下さい。

その場合は他のロードマップをオススメします


公式チュートリアル

チュートリアル:React の導入 – React

これは、プログラミング言語を一度でも学んでる方なら分かるかと思いますが、安定の公式チュートリアルです。

しばらくの間はCLIツールのcreate-react-appを使用して学ばれるのが最適です。

Reactの公式チュートリアルを『1周』で良いです。

なんとなく流れを掴む程度にし、理解してなくても問題ありません。

小説を読んでるかのようにじっくりやらずに、漫画本読んでる感覚で学びましょう。

通常のDOMと仮想DOMの違いなど、基本的なJSXの文法やルールおよびその必要性や歴史など学びましょう。

関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

合間にドキュメントを読む

本を読んでいる画像

Getting Started – React

Reactの公式ドキュメントを、どこかの『合間』で読みまくります。

ですがこれにずっと時間かけないように、例えば私の時は『電車の移動時』社会人なら仕事の『休憩時間』など

独学の方で学習時間に余裕が無い方になりますが

この時は時間ギリギリまで読みまくり、読む癖を覚えてください、習慣付けをしましょう。

学習に焦ってない方はがっつり読んで下さい。

書籍を購入しましょう!

ですが沢山はいりません、ご自身に合いそうな入門書をピックアップしお選び下さい。

1つ注意しなければいけないのが、古い少し前の書き方などの書籍です。

Reactも常に、バージョンアップされていきます

古い書籍で勉強をすると、場合によれば新規プロジェクト時にモジュールの依存関係のエラーとかで、無駄な時間を使う事になりかねません。

書籍などを選ぶ際は、かならず最新のを選ぶようにしてください。

状態管理その先へ

フックの導入 – React

一度チュートリアルしてるので、ある程度のReactでの状態管理の流れは分かるかと思います。

Reactにおいて、コンポーネントの『状態管理』は非常に重要です。

なので、コンポーネント間の状態管理をまずは先に理解を深めましょう。

クラスではなく、関数コンポーネントでのReact Hooksの『副作用』や『カスタムHook』『非同期』『ルーティング』『API』など

Reactの状態管理フレームワークである

Reduxなどの知識も全てではなくても、ある程度は触っておきましょう。

Redux - A predictable state container for JavaScript apps. | Redux

重要なのがクラスとの違いを知ることです。

『何の為にあって』『なぜ必要なのか』ここの理解が必須です。

最初のチュートリアルではクラス解説なのに、なぜみんなは関数コンポーネントを使用するのか!などです。

関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

他の教材(学習サイトなど)

当ブログ専用画像

有名な『Progate』もしくは『ドットインストール』で『1周』だけします。

たまに『やらない方がいい時間の無駄』とか言う方もいますが、全然活用して下さい!!。

できればですが有料版のがいいです。

有料になれば、さらに奥深く学べるので

無料版でやるぐらいなら、やらない方が良いって事ですかね!

ですが、これらはかなりのオススメです

この学習サイトで学び、Webアプリエンジニアとして就職してる方も沢山います。

それほどこの教材はどの言語でも学ぶ価値があるという事ですね。

ユニットテスト

Jest · 🃏 Delightful JavaScript Testing

Reactでの開発者になるのであれば、必須項目です。

ユニットテストは色々種類ありますが、まず最初は

『jest』これについて学びましょう、テストランナーならこれが間違いないでしょう。

『jest』は『Meta(旧Facebook)』が開発したオープンソースJavaScriptのテストをする為の『フレームワーク』です。

JavaScriptの開発において、細かい設定などは必要ありません。

手軽にテストを始められます。

関連記事

dev-k.hatenablog.com

(SSR)(SSG)

余裕があれば、この辺りも学びましょう。

SSR 『Server Side Rendering』

Next.js by Vercel - The React Framework

サーバーサイドでHTMLを生成した後に描画をします そうする事で、SPAの問題視されていたレンダリング時の初期(初回)表示までのロードを1度だけ解決するSPAのSEO対策として使用されます。

手軽にSSRが実装できる、Reactのフレームワークである『Next.js』が使われたりします。

SSG 『Static Site Generator』

react-ssg - npm

『SSG』も『SSR』と同じように、サーバー側で1度だけレンダリング時に行われますが、

『SSG』はHTMLの生成をビルドする前に行うという点です。

なのでリクエストのタイミングで生成しておいたHTMLをそのまま返します。

やりとりが静的ファイルのみなので、かなりの高速となっております。

関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

React Native

https://reactnative.dev:title:w600:h400

React NativeはAndroidおよびiosアプリを作成する

ユーザーインターフェースを構築する為のJavaScriptライブラリで、Reactと組み合わせていくものです。

メリットとしては

iosAndroidアプリを同時開発が可能で コードを共通して使用していけます。

Reactを一度でも学んだ経験がある方なら、学習が容易となります。


create-react-appから卒業

 create-react-app画像

webpack

Webアプリケーション開発するなら、避けては通れない

エンジニア◯ラーであるWebpackです

多くのReact開発者に選ばれるバンドラーでもあります

フロントエンドエンジニア初学者のほとんどがWebpackの学習で挫折して、やめていく方々が多いほど強敵です。

Babel + WebpackでのReact構築は大変ですが

Webpackは、他のも内部に詰め込んでいるため、より大きなフルスタックなアプリを構築するための優れたツールなんです。

node_modulesのモジュールを結合できたり、グローバルでの汚染を防げたりメリットが色々とあります。

こちらも頑張って学びましょう!。

関連記事

dev-k.hatenablog.com

dev-k.hatenablog.com

dev-k.hatenablog.com

情報収集は日本のTwitterよりFacebookでの海外の沢山の国から集まるReactグループをオススメします。

情報量は有料級の有益な情報ばかりですし、

なおかつReactグループなのでそれ以外のTwitterみたいな、個人的に必要のない情報が目に入ってくるような事は一切ありません。

Reactは2022年3月29日にv18にバージョンアップされました。

このリリースでは、いくつかの明確で根本的な変更を加えこれらには内部での重要な変更と多くの新しいAPIが含まれております。

関連記事

dev-k.hatenablog.com

まだ他にロードマップに付け加えたいのあるんですが

本日はここまでにしときます!

『Webサイト制作』に比べて倍以上に覚える事がある事を忘れないようにして下さい。

険しい道のりかも、しれませんが

将来的にReactで成功する開発者になりたいのであれば、挫折しそうでも学ぶのをやめないようにして下さい。

最後までお読みになっていただきありがとうございます。

プライバシーポリシー