How to replace Vue.js with React in Laravel 5.4

Introduction

As you probably experienced, Laravel 5.4 comes with Vue.js bundled and bootstrapped. For some developers it is equivalent of Laravel being coupled with Vue.js in some way. Hopefully it's not the case. Laravel is completely agnostic when it come to JS frameworks and you are free to choose whichever you prefer.

Keep in mind though that Laravel community somehow fell in love with Vue.js, what is indirectly proven by following facts.

• Upcoming conferences Laracon US and Laracon EU will host Evan You as a speaker, which is creator of Vue.js.

• Jeffrey Way, creator of Laracasts, has tons of great videos about Vue.js, including

  • Learn Vue 2: Step By Step
  • Learning Vue 1.0: Step By Step
  • The Vast World of Vue.js 0.12

• Taylor Otwell, creator of Laravel, quite often reaches to Vue.js, what is visible in

  • Laravel Passport
  • Laravel Spark

The good news is Laravel 5.5 will use frontend presets, allowing to remove not only Vue.js, but also Bootstrap with ease. Angular lovers must still use my method - unfortunately no preset for them on the horizon.

Assumptions

• npm is installed
• php and composer are installed
• laravel command is available

Solution

Bootstrap new Laravel project

laravel new laravel-with-react
cd laravel-with-react

Replace Vue.js with React inside package.json

{
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",

    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "babel-preset-react": "^6.24.1"
  }
}

Update Laravel mix configuration in webpack.mix.js

mix.react('resources/assets/js/app.js', 'public/js')

Clean up resources/assets/js/app.js file

require('./bootstrap');
require('./components/App');

Remove Example.vue file and create resources/assets/js/components/App.js file.

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

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
      </div>
    );
  }
}

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

Update NPM package list and compile your assets

npm update
npm run dev

Create HTML element with app id and make sure app.js script is loaded inside resources/views/welcome.blade.php file.

<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>

That's all there is to it. Enjoy React.

Summary

If needed, you can try to replace Vue with other JavaScript frameworks, like Ember or Angular. Since Laravel Mix covers versatile configurations thanks to Webpack module bundler, the process should go smoothly. If not, you may choose to write your own custom Webpack configuration or simply report an issue in Laravel Mix repository.