Laravel React TypeScript プログラミング

Mampを使ったReact TypeScript Laravelの開発環境構築について

 

最近はreactを使った開発が好きな、なおぴです。

reactを勉強しているとSPA開発をやってみたくなりますよね。

今回はMampを使いReact、TypeScript Laravelを連携するところまでやってみようと思います。

 

バージョン

  • React 18系
  • Typescript 4系
  • Laravel 8系

 

Laravelの開発環境構築

まずはバックエンドから開発をしていきます。

cd /Applications/MAMP/htdocs/

でhtdocsまで移動をします。その後以下のコマンドをターミナルで入力

 ターミナル

composer create-project laravel/laravel laravel-sns "8.*" --prefer-dist

作成した laravel-snsに移動して

php artisan serveで以下の画面が出たらOK。

laravel初期画面

DB設定

使用するDBはなんでもいいと思いますが今回はMampを使っているので

MySqlを使用します。Mampを開いてWebStartからphpMyAdminを開いて

データベースを作成後、ユーザを作っておいてください。

次に.envに設定してDB情報を記述して、php artisan migrateでmigrationが通ればOK。

 

React TypeScriptインストール

まずwebpack.mix.jsを書き換える必要があります。

 webpack.mix.js
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.ts("resources/ts/index.tsx", "public/js").sass(
"resources/sass/app.scss",
"public/css"
);
if (mix.inProduction()) {
mix.version();
}

その後ターミナルを開いて以下のコマンドを順番に入力してください。

 ターミナル

npm install npm i -D react react-dom @types/react @types/react-dom npm install ts-loader typescript sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps tsc --init --jsx react

次にresources/ts/index.tsx resources/sass/app.scssを作成してください。

その後index.tsxを最低限動くようにします

 

 index.tsx
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <h1>Laravel SPA</h1>;
};
ReactDOM.render(<App />, document.getElementById("app"));

 

変更したらターミナルでnpm run prodを入力。ビルドが完了したら

resources/views/welcome.blade.phpをindex.blade.phpに変更して以下のように記述

 index.php
<!DOCTYPE html>
<html lang="ja"">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app"></div>
<script src="{{mix('js/index.js')}}"></script>
</body>
</html>

web.phpのルート変更も忘れずにしてください!

最後にサーバを立ち上げて以下の画面になれば完了です!

設定完了画面

 

-Laravel, React, TypeScript, プログラミング