読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

React:Create React Appコマンドを試してみました

Reactのアプリ開発に必要な雛形ファイルを生成できる『create-react-app』コマンドを試してみました。
f:id:tyoshikawa1106:20160724232730p:plain

Create Apps with No Configuration | React


Qiitaに投稿されているのを見て知ったコマンドです。

使い方

コマンドインストール

最初にnpm installをつかってコマンドを利用できるようします。

$ npm install -g create-react-app

f:id:tyoshikawa1106:20160724233115p:plain

雛形ファイル生成

次のコマンドでアプリの雛形が生成されます。

$ create-react-app <your app name>

f:id:tyoshikawa1106:20160724233603p:plain


これで必要なファイルが生成されました。
f:id:tyoshikawa1106:20160724233814p:plain

アプリの起動

あとはnpm startコマンドでアプリを動かすことができます。

$ cd <your app name>
$ npm start

f:id:tyoshikawa1106:20160724234028p:plain


値を変更して保存すると、npm startコマンドを再実行しなくても自動で反映されます。
f:id:tyoshikawa1106:20160724234156p:plain

f:id:tyoshikawa1106:20160724234227p:plain


誤字・脱字などコードにミスがあった場合、ターミナルにエラー箇所が表示される仕組みが用意されているのですごく便利です。
f:id:tyoshikawa1106:20160724234507p:plain

ビルド

次のコマンドでビルド処理を実行できます。

$ npm run build

f:id:tyoshikawa1106:20160724235434p:plain


実行後はbuildディレクトリが生成されます。
f:id:tyoshikawa1106:20160724235539p:plain


build後のファイルを起動するには次のコマンドを実行します。
http-serverのインストール

$ npm install -g http-server


次の手順でlocalhost:8080で起動できます。『hs』コマンドが起動コマンドでした。

$ cd build
$ hs
open http://localhost:8080

f:id:tyoshikawa1106:20160725000108p:plain

Herokuにデプロイ

基本的な使い方を確認できたので、Herokuで動かすときの手順も確認してみました。buildフォルダ内のファイルをHerokuにデプロイすればいいと思います。


まずは、package.jsonファイルの生成から。

$ npm init

f:id:tyoshikawa1106:20160725000711p:plain

expressのinstall

$ npm install express --save


server.jsの作成

$ touch server.js


server.jsの内容はこんな感じ。

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;

// Serve static files
app.use(express.static(__dirname + '/'));

// Serve your app
console.log('Served: http://localhost:' + port);
app.listen(port);


Procfile

web: node server.js


Gitファイルの準備

$ git init
$ gibo OSX Windows SublimeText Node >> .gitignore
$ git add .
$ git commit -m "commit"


Herokuアプリの作成

$ heroku create
$ git push heroku master
$ heroku open


これでHerokuにデプロイすることができました。
f:id:tyoshikawa1106:20160725001438p:plain


もしかするともっと簡単にできるかもしれませんが、とりあえずエラーも無かったのでこれで大丈夫じゃないかなと思います。

BuildファイルをHerokuにデプロイするときのコマンドまとめ
$ npm init
$ npm install express --save
$ touch server.js

$ git init
$ gibo OSX Windows SublimeText Node >> .gitignore
$ git add .
$ git commit -m "commit"

$ heroku create
$ git push heroku master
$ heroku open


Create React AppコマンドをつかったReactアプリの雛形ファイル生成はこんな感じでした。あとは自分のファイル構成にして開発を進められるかいろいろ確認してみようと思います。