Video tutorial
Tutorial part 1
Tutorial part 2
React.js
Install react
// 1- install laravel/ui
composer require laravel/ui
// 2- Generate basic scaffolding...
php artisan ui react
// 3- Install
npm installroutes/web.php
Route::get('react-message', function() {
return view('message');
});resources/views/message.blade.php
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<style type="text/css">
html,body {height: 100%;}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer { height: 60px; }
#footer { background-color: #f5f5f5; }
.container { width: auto; max-width: 680px; }
.container .credit { margin: 20px 0; }
</style>
</head>
<body>
<div id="app">
<div id="wrap">
<div class="container">
<div class="page-header">
<h1>Laravel + Websockets + React.js</h1>
</div>
<h3> Message </h3>
<!-- component react -->
<div id="example"></div>
</div>
</div>
</div>
<!-- importar component vue -->
<script src="{{ asset('js/app.js') }}" ></script>
</body>
</html>
Import pusher
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>Component React
resources/js/app.js
require('./components/MessageComponent');resources/js/components/MessageComponent.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Message extends Component {
render() {
return (
<div className="container">
<p>I'm an component message!</p>
</div>
);
}
}
if (document.getElementById('message-component')) {
ReactDOM.render(<Message />, document.getElementById('message-component'));
}
state
constructor() {
super();
this.state = {
message:[]
};
}componentDidMount
componentDidMount()
{
console.log("Mounted component message");
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('XXXXXXXXXXXXXXX', {
cluster: 'us2',
forceTLS: true
});
const this2 = this
var channel = pusher.subscribe('channel-tutofox');
channel.bind('event-pusher', function(data) {
const message = this2.state.message
message.push(data.data)
this2.setState({message:message})
});
}Render
render() {
return (
<div className="container">
<p>I'm an component message 2!</p>
{
this.state.message.map((msg)=>{
return(
<p> <b>{msg.user} </b> = {msg.message}</p>
)
})
}
</div>
);
}
