この記事の最終更新日: 2023年3月15日
はじめに
Laravel 10は、PHPの人気のあるWebアプリケーションフレームワークです。Reactは、効率的なコンポーネントベースのUI構築のためのJavaScriptライブラリで、Semantic UIは日本人好みのセンスの良いデザインのためのCSSフレームワークです。この記事では、Laravel 10プロジェクトにReactとSemantic UIを導入する方法について解説します。
Laravel 10プロジェクトのセットアップ
まず、新しいLaravelプロジェクトを作成します。以下のコマンドを実行して、Laravelインストーラを使用してプロジェクトを作成します。
composer global require laravel/installer
laravel new my-laravel-react-appプロジェクトフォルダに移動し、必要な依存関係をインストールします。
cd my-laravel-react-app
composer installReactのインストールと設定
次に、Laravel Mixを使用してReactをインストールします。以下のコマンドを実行して、Reactプリセットをインストールします。
composer require laravel/ui
php artisan ui react依存関係をインストールします。
npm installこれで、resources/jsフォルダにReactコンポーネントが作成されます。
Semantic UIのインストールと設定
Semantic UIをインストールするには、以下のコマンドを実行します。
npm install semantic-ui-react semantic-ui-css次に、resources/js/app.jsファイルを開き、以下のインポート文を追加します。
import 'semantic-ui-css/semantic.min.css';これで、Semantic UIの設定が完了しました。
コンポーネントの作成と表示
Laravel 10とReactを使用して新しいコンポーネントを作成し、それを表示してみましょう。例として、resources/js/components/ExampleComponent.jsファイルを編集します。
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'semantic-ui-react';
function ExampleComponent() {
return (
<div>
<h1>Hello, Laravel 10 + React + Semantic UI!</h1>
<p>This is an example component.</p>
<Button primary>Click me!</Button>
</div>
);
}
export default ExampleComponent;
if (document.getElementById('example')) {
ReactDOM.render(<ExampleComponent />,
document.getElementById('example'));
}
このコンポーネントを表示するには、`resources/views/welcome.blade.php`ファイルを編集し、`<div id=”example”></div>`を追加します。
<!-- 他のコード -->
<div id="example"></div>
<!-- 他のコード -->また、JavaScriptファイルを読み込むように、<body>タグの終わりの前に以下のコードを追加します。
<script src="{{ mix('js/app.js') }}"></script>まとめ
これで、Laravel 10プロジェクトにReactとSemantic UIを導入し、コンポーネントを表示する方法がわかりました。これらのツールを組み合わせることで、効率的にモダンなWebアプリケーションを構築することができます。
大阪のエンジニアが書いているブログ。
コメント