[Laravel11+React]インストールから画面が表示できるところまでやってみる。

私ブログへの投稿をサボりすぎ…

SAPはやってなかったのでとりあえず、インストールからなんとなくの画面が表示できるところまでをやってみる。

Laravel11のプロジェクト作成
Reactの設定
まとめ

Laravel11のプロジェクト作成

いつものコマンドでプロジェクト作成

composer create-project laravel/laravel react_study

ちょっと待つとプロジェクトが出来上がるのでDBを適当に作る。今回は使わないけど。

# mysql
> create database react_study default charset utf8;
> grant all privileges on react_study.* to react_study@"%" identified by 'react_study';

.envファイルを修正する。

DB_CONNECTION=mysql
DB_HOST=localhost
DB_DATABASE=react_study
DB_USERNAME=react_study
DB_PASSWORD=react_study

#SESSION_DRIVER=database
SESSION_DRIVER=file

#APP_TIMEZONE=UTC
APP_TIMEZONE=Asia/Tokyo
#APP_URL=http://localhost
APP_URL=http://localhost/react_study

#APP_LOCALE=en
#APP_FALLBACK_LOCALE=en
#APP_FAKER_LOCALE=en_US
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

私はXAMPPの環境なのでhtdocsに上記で作ったプロジェクトのシンボリックリンクをはる。

% cd /Applications/XAMPP/htdocs
% ln -s /path/to/react_study/public react_study

実行ユーザーと編集ユーザーは違うので、ログやらのパーミッションを変更する。

sudo chmod 666 storage/logs/*.*
sudo chmod -R 777 storage/framework/

ブラウザで表示すると、Laravelの初期画面が表示される。

Reactの設定

Laravel/uiをインストール

composer require laravel/ui
php artisan ui react
npm install && npm run dev

npmでワーニング系が出たら、node等最新版にアップデートする。
参考）https://qiita.com/arimuuuura/items/95e489a835d7bf31a4a5

resources/views/app.blade.phpを作成する。cssフレームワークはBULMAをセットしてみた。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"></head>
<body>
<div class="container py-5">
	<div id="example"></div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
@viteReactRefresh
@vite('resources/js/app.js')
</body>
</html>

※classとかは適当…

resources/js/components/Example.jsx の内容をBULMAのカードのHTMLを適当に書く。

import React from 'react';
import ReactDOM from 'react-dom/client';

function Example() {
    return (
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">Component</p>
                <button class="card-header-icon" aria-label="more options">
                <span class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
                </button>
            </header>
            <div class="card-content">
                <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
                iaculis mauris.
                <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
                <br />
                <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
                </div>
            </div>
            <footer class="card-footer">
                <a href="#" class="card-footer-item">Save</a>
                <a href="#" class="card-footer-item">Edit</a>
                <a href="#" class="card-footer-item">Delete</a>
            </footer>
        </div>

        //<div className="container">
        //    <div className="row justify-content-center">
        //        <div className="col-md-8">
        //            <div className="card">
        //                <div className="card-header">Example Component</div>

        //                <div className="card-body">I'm an example component!</div>
        //            </div>
        //        </div>
        //    </div>
        //</div>
    );
}

export default Example;

if (document.getElementById('example')) {
    const Index = ReactDOM.createRoot(document.getElementById("example"));

    Index.render(
        <React.StrictMode>
            <Example/>
        </React.StrictMode>
    )
}

ブラウザで表示すると、こんな感じで表示される。