転載元: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 を使用する必要はありません。