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
-
Taylor Otwell, creator of Laravel, quite often reaches to Vue.js, what is visible in
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.