Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:Javascript PHP
タグ:
公開日:2020/09/25(金)

[Laravel × React] Laravel×React(Typescript)の環境構築

はじめまして! 最近入社しましたゴスケです!

今回は、Laravel×React(Typescript)の環境構築方法をご紹介します。

最近、ある社内システムのリニューアルを任されまして、せっかくなので知見がないLarevel×Reactで開発してみることにしました!

(本記事ではLaravelやReactについては詳しく説明しませんのであしからず。)

Laravelの準備

今回はLaravelのバージョン6を使用します。

Reactの準備

Reactのインストール

続いて「laravel/ui」というパッケージをインストールします。これによりartisan uiコマンドが追加され、このコマンドからReactやVue用のボイラープレートを生成することができます。

※composer のインストールでエラーになる場合
laravel6に対応しているのはlaravel/ui v1なので、最新版のインストールはエラーになります。

 

実行後、画面で指示されているとおり以下のコマンドを実行します。

実行するとnode_moduleがインストールされてReactが使用可能になります。
※npmがインストールされていない場合は、node.jsをインストールします。node.jsにnpmが同梱されています。

 

Typescriptのインストール

まずはTypescriptをインストール。

続いて、以下のコマンドでtsconfig.jsonを作成します。

tsconfig.jsonの”jsx”を”react”に変更。(念のため自分のtsconfig.jsonを掲載)

次にwebpack.mix.jsを以下のように変更。

「resources/js」フォルダを削除し、「resources/ts」フォルダを作成する。(ここについては、Typescriptファイルをjsフォルダに入れるのが嫌なだけで必須ではありません。jsフォルダのまま使用する場合はmix.ts(‘resources/js/app.tsx’, ‘public/js’)にします。)

Reactコンポーネントの作成

「resources/ts/app.tsx」を作成し、以下を記載。

次に「resources/view/welcom.blade.php」を以下のように書き換えます。

welcom.blade.phpの以下の部分と

app.tsxの以下の部分が対応しており、Reactで作成したコンポーネントがwelcom.blade.phpに読み込まれます。

 

Reactコンポーネントの表示

localサーバで確認する場合は以下のコマンドでlocalサーバを起動。

続いて、作成したReactコンポーネントをビルドしますが、変更のたびに「npm run dev」するのは面倒なので、以下のコマンド変更を監視します。

これで、変更のたびに自動でビルドされるようになるので、ブラウザを更新すれば新しい内容に切り替わります。

 

画面に「Hello World」が表示されれば終了です!
これで、Laravel×Reactの開発環境が整いました!
正直create-react-appでtypescriptプロジェクト作ったほうが簡単で分かりやすいですね!

それでは!

 

 

この記事を書いた人:ゴスケ


シェアのご協力をお願いいたします!

カテゴリー

アーカイブ