Laravelのインストール
Laravelのインストール
下記コマンドでLaravel(バージョン7系)をインストールする
composer create-project "laravel/laravel=7.*" プロジェクト名 --prefer-dist
「Application key set successfully.」と表示されればOK!! 作成が完了したらプロジェクトのルートディレクトに移動する ↓ ルートディレクトに存在するpackage.jsonを確認する
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.19", "cross-env": "^7.0", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader": "^8.0.0" } }
laravel/uiのインストール
composerで「Laravel-ui」をインストールする ※「Laravel-ui」とはフロントエンドフレームワークを使うことができるライブラリで、このライブラリをインストールすることでVue.jsやReactをインストールできるようになる
composer require laravel/ui:^2.4
「Package manifest genarated successfully.」と表示されればOK!!
reactスカホールドのインストール
Laravel-uiライブラリがインストールできると、reactスカホールドがインストールできるようになる
php artisan ui react
「React scaffolding installed successfully.Please run “npm install && npm run dev” to compile your fresh scaffolding.」と表示されていればOK!!
ここでpackage.jsonに「@babel/preset-react」「react」「react-dom」の3つが追記されていることを確認
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "@babel/preset-react": "^7.0.0", "axios": "^0.19", "bootstrap": "^4.0.0", "cross-env": "^7.0", "jquery": "^3.2", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", "popper.js": "^1.12", "react": "^16.2.0", "react-dom": "^16.2.0", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader": "^8.0.0" } }
Reactをインストールする
package.jsonに記述されているパッケージをインストール
npm install
ルートディレクトリ直下にnode_moduelsが生成されていることを確認
パッケージのインストールが完了したらプロジェクトのビルドを行う ※ビルドを行わないとReactの実行はできない
npm run dev
対象のファイルをコンパイルしてその後変更などあれば随時コンパイルを行う
npm run watch
Reactコンポーネントを使う
ローカルサーバを起動
php artisan serve
Laravelのプロジェクト内にReactのサンプルコンポーネントが用意されているのでそちらを使用
import React from 'react'; import ReactDOM from 'react-dom'; function Example() { return ( <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')) { ReactDOM.render(<Example />, document.getElementById('example')); }
実際にbladeファイルにReactコンポーネントを埋め込んだサンプル
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel</title> ... 省略 ... <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css"> </head> <body> <div class="flex-center position-ref full-height"> ... 省略 ... <div class="content"> <div class="title m-b-md"> Laravel </div> <div class="links"> <a href="https://laravel.com/docs">Docs</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://blog.laravel.com">Blog</a> <a href="https://nova.laravel.com">Nova</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://vapor.laravel.com">Vapor</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> <div id="example"></div> </div> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>