Adding React to Laravel

1. Setup the Page

Inside a Blade file add:

<div id="MyReactComponent" data-product_id=""></div>
<script src="{{mix('js/MyReactComponent.js')}}"></script>

2. Create React file

$ touch resources/react/pages/MyReactComponent.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class MyReactComponent extends Component {

  render() {
    return (
      <React.Fragment>
        <div className='container'>            
        </div>
      </React.Fragment>
    );
  }
  
}

export default MyReactComponent;

const element = document.getElementById('MyReactComponent');

if (element) {
  const props = Object.assign({},element.dataset);
  ReactDOM.render(<MyReactComponent {...props} />, element);
}

3. Add to Webpack:

Add inside webpack.mix.js file:

mix.react('resources/react/pages/MyReactComponent.js','public/js/').version();

4. Then Restart Yarn

$ yarn watch