Laravel
[Laravel × React] Laravel×React(Typescript)の環境構築
はち
更新日:2021/08/12
はじめまして！ 最近入社しましたゴスケです！
今回は、Laravel×React(Typescript)の環境構築方法をご紹介します。
最近、ある社内システムのリニューアルを任されまして、せっかくなので知見がないLarevel×Reactで開発してみることにしました！
（本記事ではLaravelやReactについては詳しく説明しませんのであしからず。）
Laravelの準備
今回はLaravelのバージョン6を使用します。
|
1 |
composer create-project laravel/laravel=6.* larareact |
Reactの準備
Reactのインストール
続いて「laravel/ui」というパッケージをインストールします。これによりartisan uiコマンドが追加され、このコマンドからReactやVue用のボイラープレートを生成することができます。
|
1 2 |
composer require laravel/ui php artisan ui react |
※composer のインストールでエラーになる場合
laravel6に対応しているのはlaravel/ui v1なので、最新版のインストールはエラーになります。
|
1 |
composer require laravel/ui 1.* |
実行後、画面で指示されているとおり以下のコマンドを実行します。
|
1 |
npm install && npm run dev |
実行するとnode_moduleがインストールされてReactが使用可能になります。
※npmがインストールされていない場合は、node.jsをインストールします。node.jsにnpmが同梱されています。
Typescriptのインストール
まずはTypescriptをインストール。
|
1 |
npm install --save-dev typescript @types/node @types/react @types/react-dom |
続いて、以下のコマンドでtsconfig.jsonを作成します。
|
1 |
./node_modules/.bin/tsc --init |
tsconfig.jsonの”jsx”を”react”に変更。（念のため自分のtsconfig.jsonを掲載）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "compilerOptions": { "target": "es5", "module": "commonjs", "noImplicitAny": false, "jsx": "react", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } |
次にwebpack.mix.jsを以下のように変更。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/app.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css'); |
「resources/js」フォルダを削除し、「resources/ts」フォルダを作成する。（ここについては、Typescriptファイルをjsフォルダに入れるのが嫌なだけで必須ではありません。jsフォルダのまま使用する場合はmix.ts(‘resources/js/app.tsx’, ‘public/js’)にします。）
Reactコンポーネントの作成
「resources/ts/app.tsx」を作成し、以下を記載。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from 'react'; import ReactDOM from 'react-dom'; const App: React.FC = () => { return ( <div> Hello World </div> ) } if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } |
次に「resources/view/welcom.blade.php」を以下のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> </head> <body> <div id="app"></div> </body> </html> |
welcom.blade.phpの以下の部分と
|
1 2 3 |
<body> <div id="app"></div> </body> |
app.tsxの以下の部分が対応しており、Reactで作成したコンポーネントがwelcom.blade.phpに読み込まれます。
|
1 2 3 |
if (document.getElementById('app')) { ReactDOM.render(<App />, document.getElementById('app')); } |
Reactコンポーネントの表示
localサーバで確認する場合は以下のコマンドでlocalサーバを起動。
|
1 |
php artisan serve |
続いて、作成したReactコンポーネントをビルドしますが、変更のたびに「npm run dev」するのは面倒なので、以下のコマンド変更を監視します。
|
1 |
npm run watch |
これで、変更のたびに自動でビルドされるようになるので、ブラウザを更新すれば新しい内容に切り替わります。
画面に「Hello World」が表示されれば終了です！
これで、Laravel×Reactの開発環境が整いました！
正直create-react-appでtypescriptプロジェクト作ったほうが簡単で分かりやすいですね！
それでは！
