コンポーネント間のpropsの受け渡し - React入門

React入門」ではこれまで「Babelを利用した環境構築」、「webpackを利用した環境構築」について解説をしてきましたが、今回はFacebookが公式に出している環境構築ツール「Create React App」について解説を行います。

Create React Appとは?

Create React App はReactの環境構築ツールで一度インストールしてしまえばコマンド一つでReactに必要な環境を構築することができます。

Create React Appのインストールはnode.jsがインストールされている環境で以下のコマンドを入力することでインストールできます。

インストール後はターミナルを再起動するか以下のコマンドを入力することでcreate-react-appコマンドが利用できるようになります。

インストールが完了したらプロジェクトを作成したいフォルダ上で以下のコマンドでReactプロジェクトを作成します。

たとえば「my-app」というプロジェクトを作成したい場合は以下のようなコマンドを入力します。

以下のように「Happy hacking!」と表示されたら「Create React App」のインストールは成功です。

Create React App

my-app フォルダ内には以下のようなファイルが配置されています。

my-app
├── node_modules/
├── package.json
├── public/
├── README.md
├── src/
└── yarn.lock(環境によってはない)

srcフォルダにはソースコードが配置されており、実際の開発はこの中のファイルを編集していきます。

src/App.js を確認すると以下のようになっており、Appコンポーネントが作成さているのが確認できます。

Create React Appの利用方法

以下のコマンドでプロジェクトフォルダに移動して、

以下のコマンドでCreate React Appを起動します。

Yarnをインストールしている環境では以下のコマンドでも実行できます。

少しまつと http://localhost:3000 のURLでブラウザが立ち上がり Create React App の初期画面が表示されます。

Create React App の初期画面

Create React Appはローカルで開発できるようローカルサーバーも含めて用意されており、上記のコマンドで開発環境が立ち上がります。

試しに少し編集してみましょう。先ほど確認した src/App.js のh1要素を以下のように変更してファイルを保存します。

保存したタイミングでブラウザがリロードされて 「Welcome to React」 の文字列が 「ようこそReactへ」に切り替わるのが確認できます。

このようにReactのファイルに編集を加えると、リアルタイムで更新され実行結果を確認することができます。

Create React Appで本番公開

作成したアプリケーションを本番公開するには npm run build とコマンドを入力します。

そうするとbuildフォルダが生成され静的ファイルが出力されます。

my-app
└── build/
 ├── asset-manifest.json
 ├── favicon.ico
 ├── index.html
 ├── manifest.json
 ├── service-worker.js
 └── static
  ├── css
  │   ├── main.c17080f1.css
  │   └── main.c17080f1.css.map
  ├── js
  │   ├── main.1265e417.js
  │   └── main.1265e417.js.map
  └── media
     └── logo.5d5d9eef.svg

こちらをサーバーなどに上げれば、アプリケーションとして利用することができます。

設定をカスタマイズ

Create React App は簡単に環境を作成できる反面、デフォルトの設定を簡単にカスタマイズできないようになっています。デフォルトの設定で満足行かず、裏側で動作している webpack などの設定をカスタマイズしたい場合は以下のコマンドを入力します。

そうすると config フォルダなどに設定ファイルが書き出され設定をカスタマイズすることができるようになります。

基本的には設定をカスタマイズは不要ですが、高度に利用するケースなどで利用してください。

本連載も以降はCreate React Appで環境が作成されている前提で進めていきます。

次回は、これまでの内容の復習も含めて「ReactでTODOリスト」を作成していきます。