Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React

【React】Reactアプリケーション開発環境の構築

どうも、とがみんです。

以前の記事で、RailsにReactを導入する方法と、その際に生成される、hello_react.jsxに書かれているコード について説明しました。



この記事では、Railsを使用しない場合に「React」を用いて、Webアプリケーションを作成するための環境構築と、「Hello World !!」が構築されるまでを紹介して行きます。

Reactの開発環境の構築

Reactの配布形態

Reactには「開発版」と「製品版」の2種類があります。

「開発版」のReactは、非圧縮で、コメントやエラー情報が残されているため、何か問題があった際に、デバックが容易です。

「製品版」のReactは圧縮され、デバックに必要な情報が全て除去されているため、高速に動作します。

開発時には、「開発版」本番環境にデプロイする際に、製品版のReactに差し替えます。


create-react-appのインストール

create-react-appを利用すると、React開発に必要なファイルを一気にインストールできるため、Reactのアプリケーションを作成するための開発環境を効率化できます。

これを使用するためには、事前に「Node.js」がインストールされている必要があります。


以下のコードをターミナルで実行することによって、create-react-appをインストールします。

$ npm install -g create-react-app

Reactプロジェクトの作成

以下のコードをターミナル上で実行し、プロジェクトを作成します。

$ create-react-app react-test

実行すると、「react-test」というフォルダが作成され、reactreact-domBabelbrowserifywebpack等、その他Reactでアプリケーションを作成するに当たって必要なファイルがインストールされます。

react:Reactのコンポーネントを定義するために必要。
react-dom:Reactのための、DOMの操作とサーバーレンダリング機能を提供。
Babel:新しいJavaScriptの構文を以前のバージョンに変換するためのツール。
browserify:Node.jsのモジュールをブラウザ上で使えるようにし、JavaScriptファイルをパッケージングする。
webpack:JavaScriptファイルだけでなく、CSSファイルや、画像ファイルもパッケージングする。その他機能多数。

作成されたプロジェクトのディレクトリに移動し、以下のコード を実行することで、サーバーが立ち上がり、http://localhost:3000/に以下のような画面が表示されます。

$ npm start

ファイルの編集

http://localhost:3000/に接続した状態で、srcディレクトリのsrc/App.jsファイルを編集し、保存すると、その変更がブラウザに反映されます。

src/index.jsファイルが、src/App.jsファイルを呼び出し、public/index.html<div id=”root”></div>内にDOMが生成されます。

src/App.js

src/index.js

public/index.html

製品版としてビルドする

$ npm run build

まとめ

ReactでWebアプリケーションを作成するための環境構築方法について紹介しました。

参考文献

>コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」