著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React は、フロントエンドアプリケーションを作成するための一般的なJavaScriptフレームワークです。 もともとFacebookによって作成されましたが、JavaScriptを JSX と呼ばれるHTMLのような構文と結び付ける直感的なプログラミングパラダイムを使用して、開発者が高速なアプリケーションを作成できるようにすることで人気を博しています。

新しいReactプロジェクトの開始は、ビルドシステムのセットアップ、最新の構文をすべてのブラウザーで読み取り可能なコードに変換するコードトランスパイラー、およびベースディレクトリ構造を含む複雑なマルチステッププロセスでした。 しかし現在、 Create React App には、コードのトランスパイル、基本的なリンティング、テスト、ビルドシステムなど、Reactプロジェクトを実行するために必要なすべてのJavaScriptパッケージが含まれています。 また、ホットリロードを備えたサーバーが含まれており、コードを変更するとページが更新されます。 最後に、ディレクトリとコンポーネントの構造が作成されるため、数分ですぐにコーディングを開始できます。

つまり、Webpackのようなビルドシステムの構成について心配する必要はありません。 クロスブラウザで使用できるようにコードをトランスパイルするためにBabelを設定する必要はありません。 最新のフロントエンド開発の複雑なシステムのほとんどについて心配する必要はありません。 最小限の準備でReactコードの記述を開始できます。

このチュートリアルを終了すると、Reactアプリケーションが実行され、将来のアプリケーションの基盤として使用できるようになります。 Reactコードに最初の変更を加え、スタイルを更新し、ビルドを実行して、アプリケーションの完全に縮小されたバージョンを作成します。 また、ホットリロードを備えたサーバーを使用して即座にフィードバックを提供し、Reactプロジェクトの各部分を詳細に調査します。 最後に、カスタムコンポーネントの作成と、プロジェクトに合わせて拡張および適応できる構造の作成を開始します。

前提条件

このチュートリアルに従うには、次のものが必要です。