Reactを学ぶ方法—初心者から上級者までのロードマップ

みなさん、こんにちは!

このガイドは、Reactを始めている人を対象としています。学習しやすいように、各セクションで最高のビデオと記事を注意深くキュレーションしました。

注:私は、以下に記載されているWebサイトのいずれにも関連付けられていません。それは純粋に私の見解です。

前提条件

  1. HTML、CSS、およびJavaScriptの基本的な知識。
  2. ES6機能の基本的な理解。これがES6の機能のいくつかを説明する私の記事です。

    開始するには、少なくとも次の機能を知っている必要があります。

    1.しましょう

    2.定数

    3.矢印関数

    4.インポートとエクスポート

    5.クラス

  3. npmの使用方法の基本的な理解。

入門

オンラインコードエディターを使用して練習するか、Create ReactAppを使用できます。

JSFiddleとCodepenで開発環境をセットアップしました。

Reactのすべての基本を理解するには、次のチュートリアルから始めることができます。

ReactによるReactの公式ドキュメント

Kent C.DoddsによるReactの初心者向けガイド

SamerBunaによるReactの基礎

これで、Reactの基本についての基本的な考え方がわかったはずです。Reactで簡単なWebアプリの開発を開始するだけで十分です。

それでは、Reactの公式チュートリアルをご覧ください。

ReactによるReact公式チュートリアル

これは、Reactの基本をカバーするよく書かれた記事です。また、特定のトピックを非常に明確に説明しています。

最後になりましたが、Reactアプリを使用してAPIに接続する方法を学びます。

EthanJarrellによるReact.jsを使用したAPIのフェッチ

いくつかのプロジェクトの構築を開始します

  1. シンプルなtodoアプリ
  2. シンプルな電卓アプリ
  3. ショッピングカートを作成する
  4. GitHubAPIを使用してGitHubのユーザー統計を表示する

Reactルーター

React Routerは、シングルページアプリケーションへのルートを作成するのに役立ちます。これは非常に強力で、Reactアプリケーションで簡単に使用できます。

開始するには:

PaulShermanによるReactルーターのチュートリアル

Learn CodeAcademyによるReactルーターとSPAの紹介

Scotch.ioによるReactアプリのルーティング

これらの記事は、Reactルーティングを始めるのに十分すぎるほどです。

プロジェクト

  1. シンプルなCURDアプリケーション
  2. ハッカーニュースのクローン

ルーターについて詳しく知りたい場合は、次のガイドをご覧ください。

ReactトレーニングによるReactルーターの完全ガイド

Webpack

Webpackは有名なJavaScriptモジュールバンドラーです。Webpackを使用すると、依存関係をプロジェクトの静的ファイルとして維持できるため、開発者はそれを行う必要がありません。

Webpackにはローダーも付属しています。ローダーは、プロジェクトの特定のタスクを実行するのに役立ちます。

Webpackの詳細については、次のチュートリアルに従ってください。

AndrewRayのWebpackを使用する時期と理由

Learn CodeAcademyによるWebpackチュートリアル

Webpackを使用してローカルのReact環境をセットアップするには、次のGitHubリポジトリを参照できます。

HanifRoshanによるReactSPAテンプレート

上記のチュートリアルは、Webpackを使い始めるのに十分だと思います。ただし、詳細な知識を得るには、次のガイドを参照してください。

SurviveJSによるWebpackの紹介

Webpackの公式ドキュメント

サーバーレンダリング

サーバーレンダリングは、Reactの最も優れた機能の1つです。これは、どのバックエンドテクノロジーでも使用できます。

Reactのサーバーサイドレンダリング(SSR)は、サーバーでコンポーネントを作成し、それをブラウザーでHTMLとしてレンダリングするのに役立ちます。そして、すべてのJavaScriptモジュールがブラウザーにダウンロードされると、Reactがステージに登場します。シンプル!

まず、React-DOMAPIを見てみましょう。

React-ReactによるDOMAPI

そして、以下のチュートリアルに従って、詳細な知識を取得してください。

TylerMcGinnisによるReactサーバーのレンダリング

RoilanSalinasによるReactルーターサーバーのレンダリング

DennisBrotzkyによるReactサーバー側のレンダリングガイド

戻ってきた

Reduxは、アプリケーションの状態を維持するために開発されたJavaScriptライブラリです。複雑なアプリケーションを構築する場合、コンポーネント全体の状態を管理するためのオーバーヘッドが追加されます。Reduxは、すべての状態を単一のソースに保存するのに役立ちます。そしてもちろん、ReactはReduxとうまく連携します:)

開始するには:

ReduxチュートリアルLearn CodeAcademyによる

ValentinoGagliardiによる初心者向けのReduxチュートリアル

CSSトリックによるReactRedux

これらのチュートリアルは、Reduxを使い始めるのに十分すぎるほどです。しかし、私は以下のチュートリアルにも言及することに抵抗できません。価値がある :)

ダン・アブラモフによるReduxの使用開始

リソース

素晴らしい反応

あなたが記事が好きなら、それを共有することを忘れないでください:)