JSフレームワークをやってみようと思い立ったので、Reactを使ってみた記録です。
マシンスペック
- Mac mini 2018
- macOS Catalina（10.15.x）
- Intel Core-i7 3.2GHz 6コア
- メモリ 32GB
- SSD 512GB
#サーバー環境
- CentOS7.x
- MySQL5.7.x
- Nginx最新版
- PHP7.1.x
- Laravel5.6
- Visual Studio Code最新版
#フロント環境
- React最新版
- Bootstrap最新版
- Visual Studio Code最新版
やること
- ReactとLaravelでCRUDアプリを作る
補足
各環境の操作は、下記のように記載します。
[Cent]$ MacのターミナルからCentOSに接続して作業
[Mac]$ MacのターミナルでMac内の作業
#前提
サーバー環境は構築済み
【コピペ】VirtualBox＋Vagrant＋AnsibleでLaravel開発環境を構築その弐
サーバーの準備
この記事用に作りました！
https://github.com/bobtabo/laravel5.6
[Mac]$ vagrant ssh
[Cent]$ rm -fdR laravel5
[Cent]$ git clone https://github.com/bobtabo/laravel5.6.git laravel5
[Cent]$ cd laravel5
[Cent]$ composer install
[Cent]$ chmod -R 777 storage
[Cent]$ chmod -R 777 bootstrap/cache
[Cent]$ cp -p .env.example .env
[Cent]$ php artisan key:generate
[Cent]$ vi .env
★DB設定を置換
:%s/DB_DATABASE=homestead/DB_DATABASE=hoge/g
:%s/DB_USERNAME=homestead/DB_USERNAME=fuga/g
:%s/DB_PASSWORD=secret/DB_PASSWORD=vagrant#VAGRANT1234/g
:wq
[Cent]$ bin/clear-laravel.sh
[Cent]$ php artisan migrate:refresh --seed
フロントの準備＆練習
[Mac]$ brew install npm
[Mac]$ brew install node
[Mac]$ mkdir react-dev
[Mac]$ cd react-dev
[Mac]$ mkdir -p src/js
[Mac]$ npm init -y
★npm install --save-dev webpack webpack-cli webpack-dev-serverでエラーになったら行う
[Mac]$ sudo rm -rf $(xcode-select -print-path)
[Mac]$ sudo rm -rf /Library/Developer/CommandLineTools
[Mac]$ xcode-select --install
[Mac]$ npm install --save-dev webpack webpack-cli webpack-dev-server
[Mac]$ npm install -g webpack webpack-cli
[Mac]$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
[Mac]$ npm install --save-dev react react-dom
下記のサイトに従って、ファイルを作成する
今から始めるReact入門 〜 React の基本
- webpack.config.js
- src/index.html
- src/js/client.js
[Mac]$ webpack --mode development
[Mac]$ open -a '/Applications/Google Chrome.app' ./src/index.html
※参考
今から始めるReact入門 〜 React の基本
npm install でエラー。gyp: No Xcode or CLT version detected!
Macでコマンドから指定したURLをChromeで開く
フロントを作ってみた
上記の練習で作ったファイル（src/index.html、src/js/client.js）を色々いじってみた
https://github.com/bobtabo/react
[Mac]$ cd ..
[Mac]$ rm -fdR react-dev
[Mac]$ git clone https://github.com/bobtabo/react.git react-dev
[Mac]$ cd react-dev
[Mac]$ npm install
[Mac]$ webpack --mode development
[Mac]$ open -a '/Applications/Google Chrome.app' ./src/index.html
APIのレスポンス表示できた！
※参考
React+axiosでLaravel APIからJSON取得
LaravelでAPIを作成して、Reactで取得したい
感想
LaravelをVSCodeで書いてみたけど、やっぱりPhpStormが良いかな。
プラグインあれこれ入れたけど、PhpStormの快適さを超えられなかった。
ReactでCRUDアプリ作ろう！と思ったけど、R作ったところで、お腹いっぱい。
続きは、また今度！