ReactJsの学習ロードマップ🗺 初心者向け

カバー画像: ReactJsの学習ロードマップ🗺 初心者向け

こんにちは、このブログでは、Reactの学習ロードマップについて解説します。Reactの概念をモジュールとして小さいパーツに分けたので、理解しやすくなっています。これは初心者向けです。もうじき、Reactの上級者向けロードマップについてのブログも公開する予定です。これはただのロードマップ（学習パス）ですが、これらの概念を学ぶための公式ドキュメントへのリンク（ほとんどの概念について）を追加しました。そこで学習できます。面白いことに、これらの概念を学ぶことで何を達成できるかも追加しました🎯。

前提知識📝:

以下の基本的な理解があると仮定します:

HTMLの基本（HTML要素、フォーム、テーブル、div、リストタグとその属性について）。
CSSの基本（HTML要素のスタイリング、CSSセレクタ、ボックスモデルについて）。
JavaScriptの基本（変数、条件文、ループ、データ型、DOM操作、イベントトリガリングについて）。

では、ロードマップに飛ぶ前に、まずReactとは何かを見てみましょう。

Reactは、リッチでインタラクティブなユーザーインターフェイスを設計するための、最も人気のあるJavaScriptライブラリのひとつです。Reactのコンポーネントベースの機能により、再利用可能なコンポーネントを作成してアプリケーションを効果的にスケールアップできます。Reactを利用すると、アプリのビューがより予測しやすく、デバッグしやすいコードになります。

以下は、React学習のマインドマップです。学習構造をモジュールに分け、さらに簡単に理解できるように概念に分けました。

ロードマップ

ロードマップは3つのモジュールに分かれています。「コア」、「基本」、「UIのスタイリング」です。それぞれのモジュールに番号を付けて理解を深めました。モジュールを飛ばしたりしないでください、全て重要ですから。私の理解に基づいて簡単に学べるように設計しましたが、これは人によって異なります。

さぁ、始めましょう！🚀

1. コア

コア・ロードマップ

Reactプロジェクトの設定 - いくつかのコマンドを実行することでReactプロジェクトを設定できます。これを完了すると、Reactアプリのボイラープレートができあがり、Reactアプリを実行して、初期のUIを見ることができます。このステップを完了すると、CLIを使ってローカルで新しいReactプロジェクトを作成する概念に精通しているはずです。
Reactの実行フロー - Reactアプリのコードフローを理解することは、React開発者にとって重要です。プロジェクト構造の理解も同様です。このステップを完了すると、Reactアプリのフォルダ構造、ブラウザでのReactアプリの動作、仮想DOMとは何か、ReactでのDOM操作がどのように行われるかを理解しているはずです。
JSXの使用 - JSXはHTMLのように見えますが、XMLに基づいており、ランタイム中にHTMLタグに変換されます。JSXの概念を学ぶことで、JSXへの良い理解と、HTMLとJSXの類似点、そしてHTML要素タグよりもJSXの優位性について理解しているはずです。
コンポーネントタイプ - コンポーネントとそのタイプ、コンポーネントライフサイクルについての知識を持っていることが重要です。コンポーネントの概念を学ぶことで、異なるコンポーネントタイプとそれらをいつ使うかについての良い理解があるはずです。
ステートの取り扱い/useStateフック - ステートは、コンポーネント内でデータを保存、読み取り、更新できるオブジェクトです。関数コンポーネントでは、'useState'フックを使って、ローカルでステートを管理できます。Reactのステートについて学ぶことで、ステートの働き、useStateフックの使用法、JSX内でのステート値の表示方法、ステートの更新方法を良く理解しているはずです。
関数の取り扱い - Reactでの関数はJavaScriptの関数と同じで、特定のタスクを実行する独自の関数を作成することができます。関数について学ぶことで、Reactコンポーネント内で関数を作成し、その関数を呼び出すことができるようになります。
JSXイベントの取り扱い - JSXイベントでは、Reactの要素（JSX）固有のイベントを処理できます。JSXイベントについて学ぶことで、異なるJSXイベント（onClick、onChangeなど）とその使用法を良く理解しているはずです。
モジュール - モジュールを使えば、共有可能なコードを書いて、インポートすることによって再利用できます。モジュールについて学ぶことで、インポートとエクスポートのモジュール、公開および秘密のプロパティと関数の概念を理解しているはずです。
コンポーネントのネスティングと再利用性 - コンポーネントは、JSXを返し、特定のタスクも実行できる、独立し再利用可能なコードのブロックです。コンポーネント再利用性について学ぶことで、コンポーネントのネスティング、さらにルート、親、子コンポーネント、およびコンポーネントツリーを理解できるはずです。また、複数の場所で使用できるようにコンポーネントを作成する方法についての良い知識があるはずです。
Props - Propsを使えば、コンポーネント間でデータを渡すことができます。Propsについて学ぶことで、親コンポーネントから子コンポーネントへPropsを渡し、子コンポーネントで受け取り、使用する方法に精通しているはずです。
条件付きレンダリング - 条件付きレンダリングを使うと、JavaScriptでif else条件を使うように、JSXを条件でレンダリングできます。条件付きレンダリングについて学ぶことで、UIを条件付きで表示する方法、React JSXで使われる三項演算子を理解しているはずです。

2. 基本

基本ロードマップ

デバッグとログ - React Dev Toolsの拡張機能は、ブラウザ内でReactの状態とコンポーネントを監視するのに役立ちます。このステップでは、Reactアプリをデバッグする方法を身に付けるはずです。
外部APIからのデータ取得と表示 - JavaScriptの組み込みメソッドを使ってREST APIメソッドを実行します。このステップを学ぶと、エンドポイントからデータをフェッチするJavaScriptの組み込みfetch関数の良い理解があり、データを保存し、UIに適切に表示するはずです。
Axiosパッケージの理解と使用 - Axiosは、外部APIエンドポイントに対してHTTPリクエストを効果的に行うための、人気のライブラリのひとつです。Axiosを学ぶことで、Axiosを使用してエンドポイントから非同期データをフェッチする方法と、Axiosを使用したその他のREST APIメソッドに精通しているはずです。
UseEffectフック - UseEffectフックを使うと、コンポーネントのレンダリング後に何を実行するかを決定できます。また、それに与えられた依存関係に基づいてコンポーネントに影響を与えます。UseEffectフックについて学ぶことで、依存関係を伴うコンポーネントレンダリングの副作用を理解しているはずです。
Context API/useContextフック - Context APIは、外部ライブラリを使用せずに状態管理を行うReactの組み込み機能です。Context APIについて学ぶことで、グローバルステートとステート管理、コンシューマーとプロバイダー、useContextとUserReducerフックの良い理解が必要です。
ブラウザのローカルストレージ - ローカルストレージを使うと、ブラウザのストレージ内にデータをローカルで保存できます。このステップを学ぶことで、ブラウザのローカルストレージ、ローカルストレージからの読み取りと書き込みを良く理解しているはずです。
Reactルーター - React Router DOMは、Reactアプリをナビゲートするための人気の外部ライブラリです。URLと同期させてUIを管理することもできます。React Router DOMライブラリについて学ぶことで、Reactアプリケーションのナビゲーションとルーティング、ルートに応じたUIの切り替えを理解しているはずです。

3. UIのスタイリング

UIスタイリング

グリッドレイアウト - CSSグリッドレイアウトの概念では、行と列に基づいたグリッドベースのレイアウトシステムを使用してUIを設計します。グリッドレイアウトを学ぶことで、グリッドレイアウト内のセルとしてUI要素を配置する方法に精通しているはずです。
フレックスボックス - フレックスボックスレイアウトを使用すると、CSSの位置指定やフロートを使用せずに、柔軟で応答性のあるUIを構築できます。フレックスボックスを学ぶことで、コンテナの概念、要素の整列と調整に精通しているはずです。
SCSS - SCSSを使用するには、npmを使用してnode-sassパッケージ

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/suhailzone/reactjs-roadmap-for-beginners-2021-14en