新規投稿画面に「画像選択(プレビュー付き)コンポーネント」を追加 (React+Typescript 導入)

[tamurayk]

概要

• JS で実装
• Laravel Mix
  • デフォルトは Vue.js => React に scaffold を切り替える
• JSファイル(or TSファイル)を作成し、Laravel Mixでコンパイル => blade でコンパイルしたjsファイルをロード
• React で 画像プレビューコンポーネント を書く

document

• Laravel 6.x JavaScriptとCSSスカフォールド - Reactの使用

参考

• LaravelにReactを導入する。Vue.js→Reactへスカフォールド切り替え
• Laravel5.7でReactを利用した開発をしてみる
• LaravelのフロントエンドでTypeScriptとReactを使う

TODO

• [x] Scaffold を React に変更

  • [x] Scaffold を React に変更
    • php artisan preset react https://github.com/tamurayk/laravel-photo-sharing-app/pull/17/commits/27a5154c0bd424e8f5de18db2f47390ca113578f
  • [x] まずは <div>this is React Component.</div> だけを返すシンプルなcomponentを実装 https://github.com/tamurayk/laravel-photo-sharing-app/pull/17/commits/eb9f979b2a3b5950d58d45dca88d48d1a492f7a7
    • ./components/Test/index.js
      • ReactDOM.render(<Test />, document.getElementById('test'));
  • [x] 上記のコンポーネントを blade に組み込む
    • <div id="test"></div> を追加
  • [x] Laravel Mixでコンパイ
    • [x] resouces/js/app.js で require('./components/Test');
    • yarn dev

• [x] Laravel の Scaffold では、React のコンポーネントがどのような構成で動作しているのか、を把握する

  • => note: 構成 を参照

• [x] Typescript 導入

  • [x] TypeScript と 型定義 をインストール
    • $ yarn add -D typescript ts-loader @types/node @types/react @types/react-dom
  • [x] tsconfig.json を作成
    • $ ./node_modules/.bin/tsc --init
  • [x] webpack.mix.js と tsconfig.json の設定を変更 https://github.com/tamurayk/laravel-photo-sharing-app/pull/17/commits/90c4e94c92d0868a01374719d5f31d7ebb65ec64
  • [x] 既存の .js ファイルを .ts / .tsx に変更

• [ ] 画像プレビュー用のcomponentを作る

  • [ ] まずはプレビューなしのFormを作る
    • [ ] Fetch API で POST
      • [x] リクエストヘッダにCSRFトークン付与
  • [ ] 画像プレビュー追加

• [ ] ブログにまとめる

  • Laravel: React + TypeScript の component を使う

note

• php artisan preset react

root@887d95824752:/srv# php artisan ui react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

laravel-photo-sharing-app $ git status -s
 M src/package.json
 M src/resources/js/app.js
 M src/webpack.mix.js
 D src/yarn.lock
?? src/resources/js/components/

laravel-photo-sharing-app $ ls -la src/resources/js/components/
total 8
drwxr-xr-x  3 tamurayk  staff   96 Feb  2 07:23 .
drwxr-xr-x  5 tamurayk  staff  160 Feb  2 07:23 ..
-rw-r--r--  1 tamurayk  staff  669 Feb  2 07:23 Example.js

note: 構成

• Nginx コンテナには、コンパイル済みの生 JavaScript (public/js/app.js) が置かれる

  • node.js は不要
  • app.js => Host OS 側で Laravel Mix でコンパイル&バンドル済み

• PHP-FPM コンテナ

  • JavaScript は動作しない

• Host OS

  • node.js
  • resources/js/components/ 以下に React のコンポーネント
  • Laravel Mix を実行し、React コンポーネントを app.js にコンパイル&バンドル
    • $ yarn dev