The React Handbook

React Handbookは80/20ルールに従います。20%の時間でトピックの80%を学習します。

このアプローチは、バランスのとれた概要を提供します。この本は、Reactに関連する太陽の下ですべてをカバーしようとはしていませんが、そこに出て素晴らしいReact開発者になるための基本的な構成要素を提供するはずです。特定のトピックを含める必要があると思われる場合は、教えてください。 Twitter @flaviocopesで私に連絡できます。

この本の内容があなたが望むものを達成するのに役立つことを願っています:Reactの基本を学びましょう。

reacthandbook.comでこの電子書籍をPDF、ePub、およびMobi形式で入手できます。

ブックインデックス

目次

Reactの紹介
create-react-appの使用方法

セクション1:最新のJAVASCRIPTコアは、Reactを使用するために知っておく必要がある概念です

  • 変数
  • 矢印関数
  • 休息と広がり
  • オブジェクトと配列の破壊
  • テンプレートリテラル
  • クラス
  • コールバック
  • 約束
  • 非同期/待機
  • ESモジュール

セクション2:反応の概念

  • シングルページアプリケーション
  • 宣言的
  • 不変性
  • 純度
  • 構成
  • 仮想DOM
  • 単方向データフロー

セクション3:詳細な反応

  • JSX
  • 構成部品
  • 状態
  • 小道具
  • プレゼンテーションコンポーネントとコンテナコンポーネント
  • 国家対小道具
  • PropTypes
  • 反応フラグメント
  • イベント
  • ライフサイクルイベント
  • Reactのフォーム
  • DOM要素を参照する
  • サーバー側のレンダリング
  • コンテキストAPI
  • 高次コンポーネント
  • レンダリングの小道具
  • フック
  • コード分​​割

セクション4:実際の例

  • シンプルなカウンターを作成する
  • APIを介してGitHubユーザー情報を取得して表示する

セクション5:スタイリング

  • ReactのCSS
  • ReactのSASS
  • スタイル付きコンポーネント

セクション6:ツーリング

  • バベル
  • Webpack

セクション7:テスト

  • 冗談
  • Reactコンポーネントのテスト

セクション8:反応する生態系

  • React Router
  • Redux
  • Next.js
  • ギャツビー

まとめ

Reactビューライブラリの紹介

Reactとは何ですか?

Reactは、ビジュアルインターフェイスの開発を簡素化することを目的としたJavaScriptライブラリです。

Facebookで開発され、2013年に世界にリリースされたこのアプリは、最も広く使用されているアプリの一部を駆動し、他の数え切れないほどのアプリケーションの中でもFacebookとInstagramを強化します。

その主な目標は、UIをコンポーネントのコレクションに分割することにより、いつでもインターフェースとその状態について簡単に推論できるようにすることです。

Reactが人気があるのはなぜですか?

Reactは、フロントエンドWeb開発の世界を席巻しました。どうして?

他の選択肢よりも複雑ではない

Reactが発表された当時、フレームワークとしてはEmber.jsとAngular 1.xが主要な選択肢でした。どちらもコードに非常に多くの規則を課しているため、既存のアプリの移植はまったく便利ではありませんでした。

Reactは、既存のコードベースに導入するためにFacebookで行う必要があるため、既存のプロジェクトに非常に簡単に統合できるように選択しました。また、これら2つのフレームワークはテーブルに多くの情報をもたらしましたが、Reactは完全なMVCスタックではなく、Viewレイヤーの実装のみを選択しました。

完璧なタイミング

当時、Angular 2.xはGoogleによって発表されたものであり、後方互換性の欠如とそれがもたらす大きな変更も含まれていました。 Angular 1から2に移行することは、別のフレームワークに移行するようなものでした。そのため、Reactが約束した実行速度の改善とともに、開発者が試そうとするものになりました。

Facebookの支援

もちろん、Facebookの支援を受けることは、プロジェクトが成功した場合にそのプロジェクトに利益をもたらすでしょう。

Facebookは現在、Reactに強い関心を持っています。Facebookの価値はオープンソースであると考えています。これは、Reactを自分のプロジェクトで使用するすべての開発者にとって大きなプラスです。

Reactは簡単に習得できますか?

Reactは他のフレームワークよりもシンプルだと言ったが、Reactへの飛び込みは依然として複雑だが、それは主にReduxやGraphQLのようなReactと統合できる当然の技術によるものだ。

React自体のAPIは非常に小さいため、開始するには基本的に4つの概念を理解する必要があります。

  • 構成部品
  • JSX
  • 状態
  • 小道具

これらすべて(およびそれ以上)は、このハンドブックで説明されています。

開発コンピューターにReactをインストールする方法

Reactをどのようにインストールしますか?

Reactはライブラリであるため、インストールというのは少し奇妙に聞こえるかもしれません。たぶんセットアップはより良い言葉かもしれませんが、あなたは概念を理解します。

Reactをアプリまたはサイトで使用できるようにセットアップするには、さまざまな方法があります。

WebページにReactを直接読み込む

最も簡単な方法は、React JavaScriptファイルをページに直接追加することです。これは、Reactアプリが単一のページに存在する要素と対話し、実際にはナビゲーション全体を制御しない場合に最適です。

この場合、bodyタグの最後に2つのスクリプトタグを追加します。


  ...
  <本体>
    ...
    <スクリプト
      src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.development.js"
      クロスオリジン
    > 
    <スクリプト
      src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"
      クロスオリジン
    > 
  
バージョン番号を利用可能なReactの最新バージョンに変更してください。

ここでは、ReactとReact DOMの両方をロードしました。なぜ2つのライブラリなのか? Reactはブラウザから完全に独立しており、ブラウザの外部で使用できるため(たとえば、React Nativeを搭載したモバイルデバイス)。したがって、ブラウザーのラッパーを追加するために、React DOMが必要です。

これらのタグの後に、Reactを使用するJavaScriptファイル、またはスクリプトタグ内のインラインJavaScriptをロードできます。