ReactでCRUDアプリを作ってみた記録

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://qiita.com/_bobtabo_/items/e43736e4f1bc9d4297a0)

# サーバーの準備

この記事用に作りました！
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 の基本](https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048#%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90)

* 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 の基本](https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048)
[npm install でエラー。gyp: No Xcode or CLT version detected!](https://qiita.com/baby-0105/items/18f6fbc073e160bf83ac)
[Macでコマンドから指定したURLをChromeで開く](https://qiita.com/nwtgck/items/4b9c83227bc334576552)

# フロントを作ってみた

上記の練習で作ったファイル（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のレスポンス表示できた！
<img width="1172" alt="スクリーンショット 2020-07-24 15.29.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111551/66aaca10-d74d-497b-941d-04d78269541e.png">


※参考
[React+axiosでLaravel APIからJSON取得](https://qiita.com/dyoshikawa/items/c8b09cde728388c8feec)
[LaravelでAPIを作成して、Reactで取得したい](https://qiita.com/rei67/items/273ebef44d19912733b7)

# 感想
LaravelをVSCodeで書いてみたけど、やっぱりPhpStormが良いかな。
プラグインあれこれ入れたけど、PhpStormの快適さを超えられなかった。

ReactでCRUDアプリ作ろう！と思ったけど、R作ったところで、お腹いっぱい。
続きは、また今度！