title: Laravel 5.5 render a React component in a blade view with data from the controller
body: <p>My goals is to be able to do something like this in my blade view.</p>
  
  <pre><code>&lt;Example name="{{ $user-&gt;name }}" /&gt;
  </code></pre>
  
  <p>But this doesn't render anything.</p>
  
  <p>When I do: <code>&lt;div id="example"&gt;&lt;/div&gt;</code>it renders the component without the props value which is normal.</p>
  
  <p>So I am trying to pass data that came from my controller to my React component as a prop.</p>
  
  <p>I am not sure if it's even possible.</p>
  
  <p>This is my App.js:</p>
  
  <pre><code>require('./components/Example');
  </code></pre>
  
  <p>This is my Example.js component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  class Example extends Component {
      render() {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-8 col-md-offset-2"&gt;
                          &lt;div className="panel panel-default"&gt;
                              &lt;div className="panel-heading"&gt;Example&lt;/div&gt;
  
                              &lt;div className="panel-body"&gt;
                                  Hello, {this.props.name}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  if (document.getElementById('example')) {
      ReactDOM.render(&lt;Example /&gt;, document.getElementById('example'));
  }
  </code></pre>