React と Laravel7 のプロジェクトを作成する

2020/05/25

プロジェクト作成

composer でプロジェクト名「laravel_app」を作成します。


$ composer create-project laravel/laravel laravel_app

Laravel のバージョンを確認しておきます。


Laravel Framework 7.12.0

UIパッケージをインストール

laravel_app に移動して、ComposerでLaravelのUIパッケージ laravel/ui をインストールします。


$ cd laravel_app
$ composer require laravel/ui

Reactをインストール

Reactを利用できるようにスカフォールドをインストールします。


$ php artisan ui react
//Authを利用する場合
$ php artisan ui react --auth

npmでインストール&ビルド(開発)

package.jsonに記述された内容で依存パッケージをインストールとLaravel Mixでビルドします。


$ npm install
$ npm run dev

関連ファイルの監視

関連ファイルの変更を監視しておきます。


$ npm run watch

これでReactがインストールされたLaravelプロジェクト作成が完了しました。

ここで Laravelサーバを起動して確認してみましょう。

おなじみの Laravel の画面は表示されましたが、この画面ではReact の動作実装されていません。

Reactを確認する

Laravel で React をインストールするとあらかじめサンプルファイルが作成されています。

app.js

resources/js/app.js には Bootstrap と Reactコンポーネント「Example」が読み込まれています。


require('./bootstrap');
require('./components/Example');

Example.js

resources/js/components/Example.js には、Reactコンポーネント「Example」の中身です。
Reactでは、HTMLレンダリングにJSXを利用しますが、JavaScriptに直接HTMLタグを記述できる点で便利です。


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

function Example() {
    return (
        ...JSX...
    );
}

export default Example;
...

レイアウトファイルの修正

現状だと Reactコンポーネントは表示できないため、Laravelのレイアウトファイル「resources/views/welcom.blade.php」を修正します。

Laravelのmix()関数で app.jsを読み込んでいます。


<script src="{{ mix('js/app.js') }}"></script>

また、Exampleコンポーネントを表示する場合、HTMLタグにidを指定して呼び出します。


<div id="example"></div>

動作確認

もういちど、サーバを確認してみると今度は、Exampleコンポーネントを読み込んだ状態で表示されました。

git push git pull にブランチ指定せずに実行する
git pull や git push できなくなったとき
Docker のコンテナからホストOS に接続
Mac で ローカル IP アドレス(ipv4)のみを表示する
ホストOS から Docker の MySQLコンテナに接続
caching_sha2_password のエラー
node-config で環境設定ファイルを利用する
rootパスワードを初期化(再設定)する
Git から clone したときのエラー対処
Mac に MySQL をインストール
Mac に PostgreSQL をインストール
Laravel 環境構築 - Mac ネイティブ編
Firebase 入門 - Firebase とは
Firebase 入門 - CLI インストールとデータベースの設定
AWS 無料枠(t2.micro)で容量とメモリエラー
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel7 リリース
v-html でHTML表示する
Laravel で Nuxt.js を使ってみる(Docker環境)
Laravel で Vue コンポーネントを使う
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Mac で Laradock の構築