create-react-appでReactアプリを簡単に作成

概要

React環境の作り方
はじめはQiitaの記事にも書いたように一生懸命0から開発してましたが、Facebookのcreate-react-appコマンドを使ったら恐ろしく簡単に実現できました。
私本当はバックエンドのロジック部分をコアスキルにしたいので、もうこの辺はFacebook先生によろしく整えてもらうとするよ

Githubでリポジトリ作成&クローン

Githubあたりでリポジトリ作成そしてクローン

mkdir ~/git/future_front
cd ~/git/future_front
git clone [作成したリポジトリURL] .

node.jsをインストール

create-react-appを実行するにはnpmが必要
node.jsをインストールするとnpmが使えるようになるので
「node.js インストール mac」とかで調べて頑張ってインストールしてみたくだされ！！

npm -v                                          
6.3.0

create-react-appコマンドでアプリ作成

こんな感じでコマンドうつとReact動くソースができてる

cd ~/git/future_front
create-react-app .

実はトーナメントアプリ作成時はTypeScriptでやってたので以下オプションを付けてたんですが、正直TypeScriptの型エラーで相当イライラしたのでもう次作るときはTypeScriptじゃなくていいっす。ECMAScriptでいいっす。

cd ~/git/future_front
create-react-app . --scripts-version=react-scripts-ts

Reactアプリの実行方法

以下コマンド打ち込んでhttp://localhost:3000/にアクセスすればいいだけ

cd ~/git/future_front
npm start

Reactアプリのデプロイ

以下コマンド実行してbuildディレクトリに出力されたファイルをWEBサーバーのドキュメントルートに配置するだけ

cd ~/git/future_front
npm run build