- React, Vueの基本的な開発フロー
- SPAの開発
- webpack, babelを使ったjsのビルド周り
- SPAのデプロイ方法やDocker周りも少し学べます!
2チームに分かれてモブプロで開発を進めます。
- (参加人数が多ければ)チームを2つに分ける
- チームAにはReactで書かれたアプリケーションを、チームBにはVueで書かれたアプリケーションを渡をする
- チームAは、Reactで書かれたアプリケーションを元にVueで同じ挙動をするアプリケーションを開発をする
- チームBは、Vueで書かれたアプリケーションを元にReactで同じ挙動をするアプリケーションを開発をする
- 最初の15分程度の時間に、2チームともコードリーディングと設計をする
- ドライバーは1人15分で交代し、一周したら1名が他のチームに移る
- 2周したら切り上げ、ReactとVueについて2チーム合同で議論してみる
配布するコードはzipで固められていますので、事前に伝えたパスワードを使って解凍して動作することを確認してください。 下記のコマンドを実行することで、アプリが動作することが分かります。
git@github.com:morosawamikihito/react-vue-webpack.git
cd /path/to/react-vue-webpack.git
unzip -P [password] [react or vue].zip
cd [react or vue]
yarn install
yarn run dev # localhost:18080にアプリがバインディングされます
ソフトウェア | バージョン |
---|---|
nodejs | v10.15.1 |
npm | v6.4.1 |
yarn | v1.13.0 |
docker | v18.09.2 |
make | v3.81 |
# devサーバの立ち上げ方
下記のコマンドでlocalhost:18080にサーバがバインディングされます
cd /path/to/react-vue-webpack/[react | vue]
root@host yarn run dev
# ビルド
下記のコマンドでnginx + 成果物が配置されたdockerイメージが作成されます
cd /path/to/react-vue-webpack/[react | vue]
root@host make build
# イメージの実行
下記のコマンドで作成されたイメージが起動します
cd /path/to/react-vue-webpack/[react | vue]
root@host make run