初心者にとって、Reactを取り巻くエコシステム（およびフロントエンド全体）は混乱を招くように見えるかもしれません。 これにはいくつかの理由があります。

• Reactは当初、専門家と早期導入者を対象としていました。
• Facebookは、自身が使用する製品のソースコードのみを開きます。つまり、Facebook未満のプロジェクトを対象としていません。
• 完全に異なる複雑さの膨大な数のReactガイド

以下、読者はすでにHTML、CSS、およびJavaScriptに精通していることを前提としています。

なぜ私に耳を傾けますか？

多くの矛盾するReactのヒントがあります。 なぜ私に耳を傾けますか？



Reactを開発および公開するFacebookチームで働きました。 今はFacebookではなく小さなスタートアップで働いているので、Facebookではなく現在の立場で話すことができます。

Reactエコシステムにアプローチする方法

すべてのソフトウェアは特定の技術スタックに基づいて構築されており、アプリケーションを作成するにはこのスタックを理解する必要があります。 Reactエコシステムが魅力的だと思われる主な理由は、それが常に間違った順序で説明されているためです。



2つのことを並行して見逃したり学習したりすることなく 、この順序で学習する必要があります。

• 反応する
• npm
• JavaScript「bundlers」
• ES6
• ルーティング
• フラックス

Reactで生産性を上げるためにすべてを必要とするわけではありません。 問題が解決した場合は、次の手順に進みます。



また、Reactコミュニティには、「超近代的なプラクティス」（「最先端」）であるいくつかのトピックがあります。 これらのトピックは興味深いものですが、理解するのは難しく、上記のトピックほど人気がなく、ほとんどのアプリケーションの開発には必要ありません。

• インラインスタイル
• サーバー側のレンダリング
• Immutable.js
• リレー、ファルコルなど

React自体の学習

Reactで作業を開始するには、巨大なツールキットが必要であるという誤解があります。 しかし、これはそうではありません。 公式ドキュメントには、 コピーアンドペーストHTMLテンプレートがあります 。これは、 .html



ファイルに保存してすぐに作業を開始するのに十分です。 このステップにはツールは必要ありません。Reactの基本に慣れるまで、それを取り上げるべきではありません。



また、Reactを学ぶ最も簡単な方法は、公式チュートリアルを使用することです。

npm



学習

npm



はNode.jsパッケージマネージャーであり、フロントエンドの開発者とデザイナーがJavaScriptコードを共有する最も一般的な方法です。 モジュラーCommonJS



システムが含まれており、JavaScriptで記述されたコマンドラインツールをインストールできます。 CommonJS



APIの詳細については、 この記事を読んで、 CommonJS



またはCommonJS Spec Wikiが使用される理由と方法を理解してください。



Reactエコシステムのほとんどのコンポーネント、ライブラリ、およびツールはCommonJS



モジュールとして利用可能であり、 npm



を使用してインストールされます。

JavaScript Builderの学習

いくつかの技術的な理由から、 CommonJS



モジュール（つまりnpm



）をブラウザーでネイティブに使用することはできません。 これらのモジュールを.js



ファイルで作成するには、JavaScriptの「バンドラー」が必要になります。これは、 <script>



を使用してページに含めることができます。



JavaScriptビルダーの例としては、 webpack



およびbrowserify



ます。 どちらも良い選択ですが、 webpack



は大規模なアプリケーションの開発を簡素化する特定の機能セットがあるため、 webpack



を好みます。 ドキュメントがわかりにくいように見えるため、 クイックスタートテンプレート を用意し 、より複雑なケース用のハウツーWebpackガイドを作成しました 。



覚えておく価値がありますCommonJS



はrequire()



関数を使用してモジュールをインポートするため、一部のユーザーはこれがrequire.js



ライブラリに関連するものだと考えるようになります。 いくつかの技術的な理由から、 require.js



を避けることをお勧めします。 この選択は、React環境では一般的ではありません。

ES6の学習

JSX（Reactチュートリアルで学習しました）に加えて、例の中に面白い構文構文があることに気づいたかもしれません。 これはES6と呼ばれます。これは、JavaScriptの最新バージョンですが、まだ慣れていない可能性があります。 目新しさのために、ES6はブラウザーでまだ完全には利用できませんが、ビルダーは特定の構成後にサポートされているJavaScriptに変換できます。



Reactで開発するためにES6を知る必要はありません 。途中で学習できます。



また、ES6クラスがReactコンポーネントを構築するための好ましい方法であるという話を聞くかもしれません。 そうではありません。 ほとんどの人（Facebookを含む）はReact.createClass()



使用します。

学習ルーティング

「シングルページアプリケーション」（SPA）は最新のmodです。 これらは一度ロードされるWebページであり、ユーザーがリンクまたはボタンをクリックすると、ページで実行されているJavaScriptはページ全体をリロードせずにアドレスバーとコンテンツを更新します。 アドレスバーはルーターによって制御されます 。



React 反応ルーターエコシステムで最も人気のあるルーター。 単一ページのアプリケーションを開発している場合は、特に理由がない限り使用してください。



単一ページのアプリケーションを作成する場合を除き、ルーターを使用しないでください 。 とにかく、ほとんどのプロジェクトは、既存の大きなアプリケーション内の小さなコンポーネントから始まります。

学習フラックス

おそらく、Fluxについて聞いたことがあるでしょう。 ネットワークに関する彼についての*多くの誤報があります。



多くの人々がデータモデルを決定しようとしており、これには間違いなくFluxを使用する必要があると考えています。 これは、Fluxをプロジェクトにデプロイする間違った方法です。 フラックスは、ほとんどのコンポーネントが既に作成された後にのみ追加する必要があります。



Reactコンポーネントは階層構造になっています。 ほとんどの場合、データモデルもこの階層に従います。 これらの状況では、Fluxはあまり利点をもたらしません。 ただし、データモデルが階層的でない場合があります。 Reactコンポーネントが「外部」に見えるprops



を取得する場合、または非常に複雑になり始めているコンポーネントが多数ある場合は、Fluxをご覧ください。



Fluxが必要になる時期を理解できます。 必要かどうかわからない場合は、必要ありません。



Fluxを使用する場合、最も一般的で文書化されているFluxライブラリはReduxです。 *多く*の代替もあります。おそらくあなたはそれらを試してみたいと思われますが、私のアドバイスは最も人気のあるものを使用することです。

インラインスタイルの調査

Pre-Reactでは、ほとんどの人がCSS SASSプリプロセッサを使用してスタイルを再利用しています。 Reactを使用すると、再利用可能なコンポーネントを簡単に記述できるだけでなく、記述スタイルを簡素化できます。 コミュニティ（私を含む）の多くは、CSSを完全に取り除くことを試みています。



いくつかの理由から、これは比較的正気でない考えです。 メディアクエリの記述が複雑になり、パフォーマンスが制限される場合があります。 Reactの使用を開始したばかりの場合は、慣れているCSSスタイルを記述してください。



Reactの仕組みを感じたらすぐに、別の手法を探してください。 人気のあるものの1つはBEMです。 Reactはスタイルを再利用するためのより柔軟な方法を提供し（コンポーネントの再利用を通じて）、JavaScriptビルダーがより効率的なスタイルシートを生成できるため、CSSプリプロセッサを取り除くことをお勧めします（ OSCONがこのトピックについて話します）。 ただし、Reactは他のJavaScriptライブラリと同様に、CSSプリプロセッサーでも同様に機能します。

サーバー側レンダリングの学習

サーバーレンダリングは、「ユニバーサル」または「同形」JSと呼ばれることがよくあります。 これは、Reactコンポーネントをサーバー上の静的HTMLにレンダリングできることを意味します。 これにより、ユーザーはUIを表示するためにすべてのJSがダウンロードされるまで待つ必要がなくなり、Reactはクライアントで何もレンダリングせずにサーバーで生成されたHTMLを再利用できるため、ページの初期読み込みが高速化されます。



プライマリページのレンダリングが遅すぎる場合、または検索エンジンのランキングを改善する場合は、サーバー側のレンダリングが必要になります。 はい、Googleはクライアントでレンダリングされたコンテンツのインデックスを作成しますが、2016年1月の時点で、各ディメンションは、レンダリングパフォーマンスのために、これがランキングに悪影響を与えることを示しました。



また、サーバーレンダリングには、「正しい」実装のために多数のツールが必要です。 サーバーレンダリングを考慮せずに記述されたReactコンポーネントのサポートは一般に透過的であるため、最初にアプリケーションを記述してから考えることをお勧めします。 アップグレードする場合、すべてのコンポーネントを書き換える必要はありません。

Immutable.jsの学習

Immutable.jsは、Reactアプリケーションの特定のパフォーマンス問題の解決に役立つ一連のデータ構造を提供します。 これは優れたライブラリであり、アプリケーションの成長に合わせて頻繁に使用しますが、パフォーマンスの問題が発生するまでは絶対に必要ではありません。

学習リレー、ファルコルなど

これらのテクノロジーは、AJAXリクエストの数を減らすのに役立ちます。 それらはまだ比較的実験的であるため、あまりにも多くのAJAXリクエストで問題がなければ、RelayやFalcorは必要ありません。

---

UPD。 最初の段落の翻訳はわずかにきれいになりました。編集のためにvtambourineに感謝します

UPD2。 多くの小さな文法修正、 wiygnに感謝