>>composer create-project laravel/laravel example-app
>>cd example-app
>>npm install laravel-mix --save-dev
>>npm install touch-cli -g
>>touch webpack.mix.js
>>npm install --save-dev react react-dom
---------------------------------------------
resources/js/components/HelloReact.js
---------------------------------------------
// resources/js/components/HelloReact.js
import React from 'react';
import ReactDOM from 'react-dom';
export default function HelloReact() {
return (
<h1>Hello React!</h1>
);
}
if (document.getElementById('hello-react')) {
ReactDOM.render(<HelloReact />, document.getElementById('hello-react'));
}
-----------------------------------------------
resoureces/js/app.js
----------------------------------------------
// resoureces/js/app.js
require('./bootstrap');
// React Components
require('./components/HelloReact')
-------------------------------------------------
// webpack.mix.js
----------------------------------------------
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', 'public/css', [
//
]);
------------------------------------------------
resources/views/welcome.blade.php
------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel React</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="hello-react"></div>
</body>
</html>
------------------------------------------------
>> php artisan serv
>> npm mix
>> php artisan serv
reference:
https://adevait.com/laravel/using-laravel-with-react-js
https://adevait.com/laravel/using-laravel-with-react-js
https://laravel-mix.com/docs/6.0/installation
No comments:
Post a Comment