ReactCreateApp vol.2

/

導入

前回Reactのアプリケーションの開発ツールであるCreateReactAppのインストールと組み込みサーバーを試してみましたが、その後CSSの読み込みやアプリケーションのビルドを実行したので内容をメモしておきます。

CSS

ReactはUIを作成するためのライブラリなのでアプリケーションを作成する際にたいていはCSSを使うと思いますが、CreateReactAppでCSSを使う場合にはReactのコードを記述するJSファイルと同様にsrcディレクトリの中にApp.cssというようなファイルを作り、JSファイルからimportして利用します。

import './App.css';

importしたCSSファイルはアプリケーションのビルドの実行時にindex.htmlにパスが通った状態で/build/static/css/ディレクトリに再配置されます。

なお現段階ではCreateReactAppはデフォルトではSassなどのCSSライブラリに対応していません。
いずれかの外部ライブラリがReactにとってスタンダードになるようであれば将来的に実装される可能性もあるようですが、CreateReactAppがそれ程サイズの大きくないアプリケーション開発用のツールとして安定性と簡便さを重視しているためか、どちらかと言えば慎重な姿勢のようです。

Some features are currently not supported:

Server rendering.
Some experimental syntax extensions (e.g. decorators).
CSS Modules.
LESS or Sass.
Hot reloading of components.

Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.
Limitations – create-react-app/github

Sassぐらいは標準で使えると嬉しかったのですが、Reactの入門ツールとして考えると開発側の方針も理解出来るので、そこそこ大きなアプリケーションを作るようになったら自分で対処する方法を考えたほうが良さそうです。

Image

画像などの素材をアプリケーションに取り込みたい場合には、CSS同様にsrcディレクトリに置いてReactのJSファイルからimportして利用します。

import image from "./image.png"
...

<img src={image} />

importした画像はビルド後に/build/static/mediaに自動的に配置されアプリケーションから読み込まれます。

build

CreateReactAppでは組み込みサーバーでアプリケーションの挙動を確認する事が出来ますが、そのままではデプロイ用に最適化されていないので完成したアプリケーションを実際に公開する際にはビルドを実行してやります。

ビルド用のnpmスクリプトが用意されているためアプリケーションのrootディレクトリでターミナルからnpm run bildを実行すると、buildディレクトリ以下にコーディングしたソースを元にコンパイルやminifyなどの最適化が施されたアプリケーションを作成してくれます。

npm run build

ビルドが完了すると作成したアプリケーションをローカルで実行するためのライブラリの案内が表示されるのでインストールして実行してみます。

pushstate-server – github

npm install -g pushstate-server
pushstate-server build

サーバーを起動してhttp://localhost:9000/に接続するとビルド後のアプリケーションの挙動を確認出来ます。

当然ですが開発中に組み込みサーバーで見ていたのと全く同じアプリケーションが表示されます。見た目が変わらないせいでアプリケーションがきちんと作成されたか今一ピンと来なかったので、VagrantとNginxを利用し別にサーバーを作ってbuildディレクトリを開いてみた所アプリケーションが問題なく表示出来ることが確認出来ました。

あとがき

前回につづいてアプリケーションのビルドを実行しました。
ReactはUIしか扱いませんが、それでもjQueryやSassに比べると環境を作るのは手間がかかるので、アプリケーションを最適化してまとめてくれるコマンドが用意されているのは便利だと思います。