create-react-appを本番環境で使ってみた（導入編）
どうも、くずきです。くずさんって呼ばれるの目指してます。
React経験0の僕が、会社の新規WebアプリでReactを使った例をご紹介します。
Reactについての説明はまた後日にするとして、手を動かしながら理解していきましょう。
create-react-appとは？
React（というかフロントエンド）の課題として、一からの構築がなり大変なのは構築したことある方はお分かりかと思います。
Get Started Immediately
You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
Just create a project, and you’re good to go.
READEMEから引用したもの。
TOEIC400点代の僕がやんわり略すと、「お前はコードを書くことに集中しろ」だ。 つまり、イニシャルの構築で必要なWebpackなどそういうのは俺がやっとくぜと・・・かなり粋な計らいですね。
実際にやってみましょう。 （ほとんど上記のgithubページのやり方なのでそちらみた方が早いっちゃ早い）
create-react-appのインストール
$ npm install -g create-react-app
npmでグローバルでインストールする。
$ npm -v 3.10.9
また、一応npmのバージョンのせておきます。
Reactアプリの構築
次に、実際にアプリを構築していく。
$ create-react-app create-react-app-practice
色々インストールされる。
webpackとかbableとかフロントエンドで知ったような名前がでてきてます。
$ cd create-react-app-practice $ tree -L 2 -I 'node_modules' . ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js
実際にフォルダに入って中身を見てみる。
ちょっとオシャレにみたいので、treeコマンドを使うといい感じにみれますよ。
node_modsulesは余計なのがいっぱいなので省く。
Reactの起動
ここまでも簡単ですが、ここまできても簡単です。 フォルダに入った状態で、
$ npm run start
とやれば、勝手に http://localhost:3000でReactのアプリが起動ができる。
index.jsでApp Componentをよんでるだけなので、構築をとりあえず楽にしたって意外は特になんもしてないですね。
（おまけ）githubにあげる
せっかくなんであげよう。
フォルダに入った状態で
$ git init $ git remote add origin [自分のリポジトリURL] $ git add . $ git commit -m "create-react-appの導入編" $ git push origin master
以上で終わり。
こちらのリポジトリで、今後の内容も含めてcommitしていく予定〜〜。
