転載元:https://github.com/petehunt/react-howto、react オープンソースの作者による react フレームワークの学習パスの提案で、個人的にはかなり良い学習ルートだと思います。
どうやって React を学ぶか？#
もしあなたが React（またはフロントエンド）の初心者であれば、以下の理由からこのエコシステムに困惑するかもしれません：
- React のターゲット層は常に新しいことを試すのが好きな開発者やフロントエンドの専門家です。
- Facebook がオープンソースにした内容は彼らの実際のアプリケーションで使用されているため、Facebook よりも小さなプロジェクトのニーズには注意を払っていません。
- 現在の React のガイドはレベルがまちまちです。
この記事では、あなたが HTML、CSS、JavaScript を使ってウェブページを開発する基礎を持っていると仮定します。
なぜ私の話を聞くべきか？#
React については、すでに大量の相反するアドバイスがありますが、なぜ私の話を聞くべきでしょうか？
私は Facebook で React を構築し、オープンソースにした初期メンバーの一人だからです。現在、私は Facebook を離れ、スタートアップに参加しているので、Facebook の立場から意見を述べることはありません。
React エコシステムに入る方法#
すべてのソフトウェアは特定の技術スタックの上に構築されています。あなたはアプリケーションを構築するために、全体の技術スタックを十分に理解する必要があります。なぜ React エコシステムのツールは常に圧力を感じさせるのかというと、それは常に誤った順序で説明されるからです：
以下の順序で学ぶべきです、飛ばしたり同時に学んだりしてはいけません：
これらすべてを学んでから React を使用する必要はありません。 問題に直面したときに次のステップの学習に進むだけで大丈夫です。
また、React コミュニティでは、しばしば言及されるいくつかの先端テーマがあります。以下のテーマは非常に興味深いですが、理解するのが難しいため、上記のテーマほど一般的ではありません。ほとんどのアプリケーションではこれらを使用する必要はありません。
React を学ぶ#
一般的な誤解の一つは、React を学ぶ前にツールの設定に大量の時間を費やす必要があるということです。公式ドキュメントには、コピー＆ペースト HTML テンプレートがあります。.htmlファイルとして保存するだけで、すぐに学び始めることができます。このステップには何のツールも必要なく、React の基礎を習得するまでツールの使い方を追加で学ぶ必要はありません。
私は今でも、React を学ぶ最も簡単な方法は公式チュートリアル公式チュートリアルを通じて学ぶことだと思います。
npm を学ぶ#
npmは Node.js のパッケージ管理ツールであり、フロントエンドエンジニアやデザイナーが JavaScript コードを共有する最も一般的な方法です。CommonJSというモジュールシステムを含んでおり、JavaScript で書かれたコマンドラインツールをインストールできます。背景知識として、この記事を読んで、CommonJSがブラウザにとって重要である理由を理解し、CommonJS Spec Wikiを読んでCommonJS API についての詳細を学んでください。
React エコシステムでは、ほとんどの再利用可能なコンポーネント、ライブラリ、ツールがCommonJSモジュール規格に従っており、npmを通じてインストールできます。
JavaScript バンドルツールを学ぶ#
いくつかの技術的な理由から、CommonJSモジュール（つまりnpm内のすべての内容）はブラウザで直接使用できません。これらのモジュールを.jsファイルにバンドルするために、JavaScript の “バンドルツール” が必要です。これにより、ウェブページで<script>タグを介してそれらをインポートできます。
JavaScript バンドルツールにはwebpackとbrowserifyがあります。どちらも良い選択ですが、私は個人的にwebpackの方が好きです。なぜなら、大規模なアプリケーションの開発を簡素化する多くの機能があるからです。webpack のドキュメントは混乱を招く可能性があるため、私は 2 つの記事を書きました：始めるためのプラグアンドプレイテンプレートと、より複雑なユースケース向けのwebpack のハウツーガイド。
覚えておくべきことは、CommonJSはモジュールをインポートするためにrequire()関数を使用しているため、多くの人がこれに混乱し、require.jsをプロジェクトにインポートする必要があると考えています。いくつかの技術的な理由から、私はrequire.jsの使用を避けることをお勧めします。React エコシステムでは人気がありません。
ES6 を学ぶ#
JSX（React チュートリアルで学ぶことになります）を除いて、React の例の中でいくつかの興味深い構文に気付くかもしれません。これは ECMAScript6 と呼ばれ、JavaScript の最新バージョンです。ES6 は非常に新しいため、まだ学んでいないかもしれませんし、ブラウザがまだ対応していないかもしれませんが、心配しないでください。適切な設定を行えば、あなたのバンドルツールが自動的に互換性のあるコードに変換してくれます。
もしあなたが React を使って物事を終わらせたいだけであれば、**ES6 の学習をスキップしても大丈夫です、** または後で学ぶことにしても構いません。
React コンポーネントを作成するのに ES6 のクラスを使用する方が適しているという議論を目にするかもしれませんが、それは本当ではありません。ほとんどの人（Facebook を含む）は依然としてReact.createClass()を使用しています。
ルーティングを学ぶ#
「シングルページアプリケーション」は現在の技術のホットトピックです。ウェブページが読み込まれた後、ユーザーがリンクやボタンをクリックすると、JavaScript がページを更新し、アドレスバーを変更しますが、ウェブページはリフレッシュされません。アドレスバーの管理は ** ルーティング（router）** によって行われます。
現在、React エコシステムで最も人気のあるルーティングソリューションはreact-routerです。シングルページアプリケーションを作成している場合、なぜそれを使用しない理由があるのでしょうか？
もしあなたがシングルページアプリケーションを作成していないのであれば、ルーティングを使用しないでください。 どちらにせよ、ほとんどのプロジェクトは大規模なアプリケーションの小さなコンポーネントから始まります。
インラインスタイルを学ぶ#
React が登場する前、多くの人々は SASS のようなプリプロセッサを使用して複雑な CSS スタイルシートを再利用していました。React が再利用可能なコンポーネントの開発を容易にするため、あなたのスタイルシートはそれほど複雑でなくなるかもしれません。コミュニティの多くの人々（私を含む）は、スタイルシートを完全に廃止しようとしています。
いくつかの理由から、これはかなり狂ったアイデアです。これによりメディアクエリがより困難になり、この技術にはパフォーマンス上の制限がある可能性があります。React を使い始めたときは、普段使っている方法で書けば大丈夫です。
一旦 React での開発の感覚を掴んだら、代替技術に注目することができます。その中で人気のある技術はBEMです。私は CSS プリプロセッサの使用を徐々にやめることをお勧めします。なぜなら、React はスタイルを再利用するためのより強力な方法（コンポーネントの再利用を通じて）を提供し、JavaScript バンドルツールがより効率的なスタイルシートを生成してくれるからです（私は以前OSCON でこれについての講演を行ったことがあります）。要するに、React は他の JavaScript ライブラリと同様に、CSS プリプロセッサと良好に連携できます。
もう一つの選択肢はCSS モジュールで、より具体的にはreact-css-modulesです。これらの CSS モジュールを使用すると、CSS（または SASS/LESS/Stylus）を書くことができますが、React のインラインスタイルのように CSS ファイルを管理および整理できます。BEM のような方法論を使用してクラス名を管理することを心配する必要はありません。モジュールシステムが基盤でそれを処理してくれています。
サーバーサイドレンダリングを学ぶ#
サーバーサイドレンダリングは「ユニバーサルアプリケーション」または「同構アプリケーション」と呼ばれることがよくあります。これは、React コンポーネントを使用してサーバーサイドで静的 HTML をレンダリングできることを意味します。これにより、初期読み込みのパフォーマンスが向上します。ユーザーは JS がダウンロードされるのを待たずに初期インターフェースを見ることができ、React はサーバーサイドでレンダリングされた HTML を再利用できるため、クライアント側で再生成する必要がありません。
もしあなたがファーストスクリーンのレンダリング速度が遅いと感じたり、ウェブサイトの検索エンジンランキングを向上させたい場合、サーバーサイドレンダリングが必要です。Google は現在、クライアントサイドでレンダリングされたコンテンツもインデックスしますが、2016 年 1 月の時点で、これがランキングに悪影響を及ぼすことが確認されています。これはクライアントサイドレンダリングのパフォーマンス問題によるものかもしれません。
サーバーサイドレンダリングには多くのツールが必要です。明らかに、React コンポーネントはサーバーサイドレンダリングを考慮して書かれていないため、まずアプリケーションを構築し、その後でサーバーサイドレンダリングの問題に関心を持つべきです。心配しないでください。すべてのコンポーネントを再作成してサポートする必要はありません。
Flux を学ぶ#
Flux について聞いたことがあるかもしれませんが、Flux に関しては多くの誤った情報があります。
多くの人がアプリケーションを構築し始めると、データモデルを定義するために Flux を使用する必要があると考えます。このように Flux を採用するのは間違いです。Flux は多くのコンポーネントが構築された後に導入されるべきです。
React コンポーネントの間には階層関係があります。多くの場合、データモデルもこの階層に従います。この場合、Flux はあまり役に立ちません。しかし、時にはデータモデルに階層がなく、React コンポーネントが無関係なpropsを受け取るようになったり、一部のコンポーネントが複雑になったりしたときに、Flux を検討する必要があるかもしれません。
Flux を使用する必要があるときがわかります。もしそれを使用する必要があるかどうか不明な場合は、Flux は必要ありません。
Flux を使用することを決定した場合、現在最も人気があり、ドキュメントが充実している Flux ライブラリはReduxです。もちろん、他にも多くの選択肢がありますが、それらを試してみることに興味があるかもしれませんが、私のアドバイスは、最も人気のある Redux を使用するだけで十分です。
Immutable.js を学ぶ#
Immutable.jsは、React アプリケーションを構築する際のいくつかのパフォーマンス問題を解決するためのデータ構造のセットを提供します。これは素晴らしいライブラリであり、アプリケーションの発展の過程で多く使用するかもしれませんが、パフォーマンスの問題に気づくまでは完全に不要です。
Relay、Falcor などを学ぶ#
これらの技術は AJAX リクエストの数を減らすのに役立ちますが、依然として非常に先端的であるため、AJAX リクエストの問題に直面していない場合は、Relay や Falcor を使用する必要はありません。