How to use React js in blade template
Solution 1
One of this way you pass data from laravel controller to react component.
A React Component interact with view id element document.getElementById('example')
on your laravel viewpage.
Your Laravel Controller like.
class HomeController extends Controller
{
public function index(){
$data = [
'john', 'doe'
];
return view('welcome')->with('data', json_encode($data));
}
}
Make sure you passing data controller to view as json. Your Blade View
..
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="example" data='{{ $data }}'></div>
<script src="js/app.js"></script>
</body>
Your Example Component in reources/assets/js/components/Example.js like
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
constructor(props){
super(props);
console.log('data from component', JSON.parse(this.props.data));
}
render() {
return (
<div className="container">
.....
</div>
);
}
}
if (document.getElementById('example')) {
var data = document.getElementById('example').getAttribute('data');
ReactDOM.render(<Example data={data} />, document.getElementById('example'));
}
Make sure, when you change of Example.js Component code then you must run npm run dev
command on your command prompt.
Solution 2
You want to pass some server-side string/array/collection/whatever to your JavaScript
In above situation You can use Package PHP-Vars-To-Js-Transformer
this package is maintained by reputed site laracasts
so you don't have to much worry about bugs and side effects.
Here is simple example after successful installation and boot up package.
use JavaScript; // declare name space.
// Class method
public function index()
{
JavaScript::put([
'foo' => 'bar',
'user' => User::first(),
'age' => 29
]);
return View::make('hello');
}
Using the code above, you'll now be able to access foo
, user
, and age
from your JavaScript.
console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29
For more visit: PHP-Vars-To-Js-Transformer
Barbell
Updated on June 24, 2022Comments
-
Barbell almost 2 years
I would like to use React js as a front-end for my laravel project . So i did the preset with:
php artisan preset react
Now i would like to know, how react component should be implemented in my blade views so they can access data passed to those views via controllers...
For exemple, in my homeController i pass some data:
return views('theview')->with('datas',$datas);
In theview.blade.php i can access them like this:
{{ $datas }}
but how can i use this to update react component?
-
Barbell about 6 yearsbut why data as to be passed as json , can you tell me please ?
-
Ikram - Ud - Daula about 6 yearsBecause a HTML tag attribute hold only string as a value.
<div id="example" data='{{$data}}'></div>
-
smartworld-dm over 5 yearsNice explanation
-
shireef khatab almost 4 yearsIt woud have been better to refer to the YouTube vid for that particular example. youtube.com/watch?v=Un3DbIvqPoA