React初学者のためのガイドを和訳しました。
意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。

原文：https://github.com/petehunt/react-howto

React初学者のためのガイド

あなたがReact（もしくは一般的なフロントエンド）の初学者である場合、Reactのエコシステムがわかりにくいものに感じられるかもしれません。これにはいくつかの理由があります。

• Reactは歴史的にアーリーアダプターや専門家を対象としてきました
• Facebookは実際に使用しているもののみをオープンソースとしてきたため、 Facebookよりも小さなプロジェクトでの利用は特段配慮していません
• マーケティング上の見掛け倒しなものがReactガイドとして数多く出回っています

このドキュメントは、HTML、CSSおよびJavaScriptを使ってWebページを構築できる読者を想定しています。

なぜ私の話を聞くべきか？

Reactに関する多くの相反するアドバイスがありますが、なぜ私の話を聞くべきなのでしょうか？

私はReactを開発し、オープンソース化したFacebookの初期メンバーの1人でした。現在はFacebookから離れ、小さなスタートアップにいるため、非Facebookとしての視点も持っています。

Reactのエコシステムに取り組む方法

全てのソフトウェアはテクノロジースタックの上に構築され、アプリケーション開発にはそれらスタックへの十分な理解が求められます。Reactのエコシステムはいつも誤った順番で説明
されるため、膨大に見えることが多いです。

この順番の通りに学び、項目を飛ばしたり同時に学習したりしないようにすると良いでしょう。

• React
• npm
• JavaScriptのバンドラ
• ES6
• ルーティング
• Flux
• Immutable.js
• Relay, Falcor, etc

また、Reactで開発ができるようになるためには、全てを学ぶ必要はありません。解決すべき問題に直面した時にのみ次のステップへ進むと良いでしょう。

React自身を学ぶ

Reactを学び始めるため、開発ツールの設定に多くの時間を費やす必要があるというのはよくある誤解です。公式ドキュメントの中で、コピー＆ペーストで使えるHTMLテンプレートを .html ファイルとして入手し、すぐにでも使い始めることができるでしょう。このステップでは如何なる開発ツールも不要です。Reactの基本を身に付けるまでは、余計な開発ツールを学び始める必要はありません。

React習得の最短コースは今なお公式チュートリアルだと思います。

npm を学ぶ

npm はNode.jsで動作するパッケージマネージャであり、フロントエンドエンジニアやデザイナーがJavaScriptのコードを共有するための最も人気のある手段です。それは CommonJS と呼ばれるモジュールシステムを内包し（重要なのでよく分からない人はググッてください）、JavaScriptで書かれたコマンドラインツールをインストールさせます。

Reactのエコシステムの中で用いられるライブラリやツールのような多くの再利用可能なコンポーネントは CommonJS モジュールとして利用でき、 npm によってインストールされます。

JavaScriptバンドラを学ぶ

多くの技術的な理由により CommonJS モジュール（例えば npm の全て）はブラウザではそのまま使うことは出来ません。これらのモジュールを <script> タグで .js ファイルとして結合してブラウザにインクルードするためのJavaScript「バンドラ」が必要です。

JavaScriptバンドラの例としては webpack や browserify などがあります。どちらも良い選択ですが、大きなアプリケーションをより簡単に開発できる多くの機能を持っているという点で、私は webpack をオススメします。そのドキュメントはわかりにくいので、開始するためのプラグ＆プレイテンプレートを用意しました。さらに、より複雑なユースケースに対応したWebpack入門を書きました。

肝に命じておくべき1つのポイント： CommonJS はモジュールをインポートする際に require() を使用するため、 require.js というプロジェクトと関係していると誤解されがちです。多くの技術的な理由により、 require.js は避けておくのが無難です。それはReactのエコシステムでもあまり人気がありません。

ES6を学ぶ

JSX（Reactチュートリアルで学んだもの）以外に、Reactの事例の中でおかしな構文を見かけることがあるかも知れません。これはES6と呼ばれる最新版のJavaScriptなので、まだ馴染みがないことでしょう。非常に新しいものであるがゆえ、まだ多くのブラウザでサポートされていませんが、バンドラが利用できるようにしてくれます。

Reactで開発を始めたいだけであれば、ES6の習得は飛ばしてしまっても構いませんし、道中で必要に応じて習得するのも良いでしょう。

ルーティングを学ぶ

「シングルページアプリケーション」は最近のトレンドです。これらのWebページは一度に読み込まれ、ユーザーがリンクやボタンをクリックすると、JavaScriptがアドレスバーを更新しますが、ページ全体は更新されません。アドレスバーの管理はルーターと呼ばれるものが行います。

Reactのエコシステムの中で最も人気のあるルーターはreact-routerです。シングルページアプリケーションを開発する際には、特別な理由がないかぎりこれを使いましょう。

シングルページアプリケーション開発以外の用途ではルーターは使わないでください。ほとんどのプロジェクトは大きなアプリケーション内の小さなコンポーネントとして始まります。

Fluxを学ぶ

おそらくFluxのことは聞いたことがあるでしょう。巷では、Fluxにまつわる多くの誤った情報が溢れています。

アプリケーションを開発し、データモデルを定義したいと考える多くの人々がFluxを使う必要があると考えています。これはFluxを採用する誤った方法です。Fluxは、多くのコンポーネントが既に構築された後に一度だけ追加されるのが良いでしょう。

Reactコンポーネントは階層構造となっています。多くの場合、データモデルは階層構造に従います。このような状況では、Fluxはあまり役立ちません。しかし時には、データモデルが階層構造でないかもしれません。Reactコンポーネントが外部から props を受け取り始める時、もしくは少数のコンポーネントがとても複雑になった時、Fluxについて調べてみる価値があるかもしれません。

Fluxを必要とする時が来るでしょう。必要であると確信が持てないならば、まだその時ではありません。

Fluxを使うと決めたなら、最も人気があり、よく整理されたドキュメントのあるFluxライブラリであるReduxがオススメです。多くの選択肢があり、それらを試してみたい衝動に駆られるでしょうが、私からのアドバイスは、最も人気のあるものに絞り込んで精通することです。

Immutable.jsを学ぶ

Immutable.jsは、Reactアプリケーションの開発時にとあるパフォーマンスの問題を解決するのに役立つデータ構造のセットを提供します。素晴らしいライブラリであり、あなたはそれを大いに活用することでアプリケーション開発を加速させることができるはずですが、パフォーマンス改善が必要になるまでは全く必要ありません。

Relay、Falcorなどを学ぶ

これらはAJAXリクエストの数を減らすのに役立つ技術です。極めて最先端で枯れていないため、多すぎるAJAXリクエストに悩まされているのでなければ、RelayやFalcorを学ぶ必要はありません。