見出し画像

React/Typescript/Laravel8の環境構築

yossi

タイトル記載の環境構築したので、記録。

Laravelのインストール。

composer create-project 'laravel-laravel=8.*' sample --prefer-dist

プロジェクトディレクトリ移動

cd sample

LaravelMixの設定。

webpack設定はwebpack.mix.jsファイルで設定。
TypeScripとSassでコンパイルするようにする。

mix.ts('resources/ts/app.tsx', 'public/js')
    .sass('resources/sass/app.scss', 'public/css', [
        //
    ]);

npmインストール

npm install

なんか適当に走らせる。

npm run watch

モジュール不足で停止するが、package.jsonにtypescriptとかsassが追加されてる。

lodashとかpostcssが必要なければ削除。

Reactのインストール。

npm i -D react react-dom @types/react @types/react-dom

npmインストール実行。

npm install

TypeScriptの設定

tsconfig.jsonファイル作成。

npx tsc --init --jsx react

React17以降は下記

npx tsc --init --jsx react-jsx

下記ファイル生成される

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "strict": true,
        "esModuleInterop": true
    }
}

resources/ts/app.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { createRoot } from 'react-dom/client';
 
const App = () => {
    const title: string = 'Hello TypeScript React'
    return (
        <h1>{title}</h1>
    )
}
 
const container: any = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

コンパイル実行。

npm run prod

resources/views/welcome.blade.php

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

これでHello TypeScript React表示されれば、おk。

この記事が気に入ったらサポートをしてみませんか？