Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use React js in blade template

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?

like image 856
Barbell Avatar asked Apr 15 '18 14:04

Barbell


People also ask

Can I use ReactJS with Laravel?

Q: Can I use React JS with Laravel? Laravel doesn't require you to use any specific Javascript framework. As long as you've configured Laravel Mix properly, any framework should work.

Can you use React with Hugo?

Hugo, that I use for my static site, does not directly have support for transpiling React. But with a few small steps you can make React transpiling as a part of your Hugo build and use React for your user experiences.

Can we use templates in React?

Custom Templates enable you to select a template to create your project from, while still retaining all of the features of Create React App. You'll notice that Custom Templates are always named in the format cra-template-[template-name] , however you only need to provide the [template-name] to the creation command.


2 Answers

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.

like image 157
Ikram - Ud - Daula Avatar answered Oct 11 '22 00:10

Ikram - Ud - Daula


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

like image 39
dipenparmar12 Avatar answered Oct 10 '22 23:10

dipenparmar12