LaravelのフロントエンドにReactを使ってみようと思い、環境を構築した
環境
- Laravel 5.5
手順
Reactの導入
# フロントエンドをreactに変更
php artisan preset react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
# Reactを追加
$ yarn install
yarn install v1.12.1
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning laravel-mix > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 435.92s.
めっちゃwarning出ているが、一旦進める。
resources/assets/js/components/にあるReactのサンプルを確認。
exampleのidに対しレンダリングしているようなので、対応する画面を作る。
Example.js
# 一部抜粋
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
/resources/views配下にreact.blade.phpを作成
herokuにアップした時、jsが読み込めなくてエラーになったので、
local環境とheroku上の環境を分けて、herokuではsecure_assetで読み込む。
react.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@if(app('env')=='local')
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
@endif
@if(app('env')=='production')
<link href="{{secure_asset('css/app.css')}}" rel="stylesheet" type="text/css">
@endif
</head>
<body>
<div id="example"></div>
@if(app('env')=='local')
<script src="{{asset('js/app.js')}}" ></script>
@endif
@if(app('env')=='production')
<script src="{{secure_asset('js/app.js')}}" ></script>
@endif
</body>
</html>
routes/web.phpを編集。以下を追加。
web.php
Route::get('/react', function () {
return view('react');
});
yarn run dev
php artisan serve
http://localhost:8000/react
を確認すれば、Reactで作成された画面が表示された！
参考
https://www.ritolab.com/entry/34
https://qiita.com/sakuraya/items/411dbc2e1e633928340e