Laravel 5.5 React

Question

I am trying to use the default React scaffolding that Laravel 5.5 provides.

So my steps so far are

Install fresh 5.5 laravel application
php artisan make:auth
php artisan migrate
php artisan preset react
npm install

The followin 2 steps are just for watchin my react files so I dont have to build manualy after changes

npm install [email protected]
npm run watch
I added <Example /> in the default register view.

This should display the Example component provided by Laravel or am I mistaken?

Example component:

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

export default class Example extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-8 col-md-offset-2">
            <div className="panel panel-default">
              <div className="panel-heading">Example Component</div>
                <div className="panel-body">
                  I'm an example component!sdjf
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

I also tried just adding a div with id: example but this also doesn't display the example component.

I have the chrome react developer tools and it says that my page is using react so there is no issue there. I don't see the component in my view nor in my dev tools.

I get no errors when building so I have no clue why it is not working.

Im not sure if you need to also run "npm run dev" before watch? — ajthinking
I'm having the same problem. Created a fresh new Laravel project, run the php artisan preset react and npm install && npm run dev but the <Example /> component doen't work in the welcome.blade.php view. Any tip on what I'm missing? — AngelGris

mfakhrusy mfakhrusy · Accepted Answer · 2018-05-03T02:47:14

I might be late but hopefully, it will help anyone that visit this question.

Answer:

Insert your script tag in your master blade view (the default one is welcome.blade.php), kind of like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="{{asset('js/app.js')}}" defer></script>
  <title>Document</title>
</head>
<body>
  <div id="root"></div>

</body>
</html>

Point the reactDOM to root id (default one is example) for common practice.

If you have external CSS, don't forget to put that too!

Laravel 5.5 React

1 Answers