くずきのblog

技術とか色々

create-react-appを本番環境で使ってみた(導入編)

どうも、くずきです。くずさんって呼ばれるの目指してます。

React経験0の僕が、会社の新規WebアプリでReactを使った例をご紹介します。

 Reactについての説明はまた後日にするとして、手を動かしながら理解していきましょう。

create-react-appとは?

github.com

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のアプリが起動ができる。

f:id:kzkohashi:20170910210307p:plain

index.jsApp Componentをよんでるだけなので、構築をとりあえず楽にしたって意外は特になんもしてないですね。

(おまけ)githubにあげる

せっかくなんであげよう。

フォルダに入った状態で

$ git init
$ git remote add origin [自分のリポジトリURL]
$ git add .
$ git commit -m "create-react-appの導入編"
$ git push origin master

以上で終わり。

こちらのリポジトリで、今後の内容も含めてcommitしていく予定〜〜。

github.com