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