{"componentChunkName":"component---gatsby-theme-teklog-src-templates-post-tsx","path":"/how-to-replace-vue-js-with-react-in-laravel-5-4","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.tekmi.nl","author":{"name":"Teklog","avatar":"/img/tekmi-icon.svg"}}},"blogPost":{"frontmatter":{"title":"How to replace Vue.js with React in Laravel 5.4","slug":"how-to-replace-vue-js-with-react-in-laravel-5-4","series":null,"date":"2017-07-02","datePretty":"02 July, 2017","coverImage":{"childImageSharp":{"fixed":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHRpVS85on/xAAaEAACAgMAAAAAAAAAAAAAAAAAEgECAxEi/9oACAEBAAEFApxCaEkl6nQ1z//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AYQ//8QAFREBAQAAAAAAAAAAAAAAAAAAABP/2gAIAQIBAT8Boo//xAAcEAABBAMBAAAAAAAAAAAAAAAAAQIxMhASkSH/2gAIAQEABj8C8UbrOJXpZS7un//EABwQAQADAAIDAAAAAAAAAAAAAAEAESExUUFxgf/aAAgBAQABPyHQsfZECijO3WEAOqHz0ONiNX8I/9oADAMBAAIAAwAAABDnH//EABcRAAMBAAAAAAAAAAAAAAAAAAABEVH/2gAIAQMBAT8Qbl6f/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAgEBPxBKTh//xAAcEAEAAwACAwAAAAAAAAAAAAABABEhMXFBYbH/2gAIAQEAAT8QN0g3IHuW4XlpFfZLdY2quwhVWm0qA5rUTw6gWkl+D5P/2Q==","width":1000,"height":750,"src":"/static/9de6c77db58082794446544c34cd5bf1/a7715/cloudsFieldTree.jpg","srcSet":"/static/9de6c77db58082794446544c34cd5bf1/a7715/cloudsFieldTree.jpg 1x"}}},"author":null,"authorAvatar":null},"timeToRead":3,"excerpt":"Introduction As you probably experienced, Laravel 5.4 comes with Vue.js bundled and bootstrapped. For some developers it is equivalent of Laravel…","html":"

Introduction

\n

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.

\n

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

\n\n

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.

\n

Assumptions

\n\n

Solution

\n

Bootstrap new Laravel project

\n
laravel new laravel-with-react\ncd laravel-with-react
\n

Replace Vue.js with React inside package.json

\n
{\n  \"devDependencies\": {\n    \"axios\": \"^0.15.3\",\n    \"bootstrap-sass\": \"^3.3.7\",\n    \"cross-env\": \"^3.2.3\",\n    \"jquery\": \"^3.1.1\",\n    \"laravel-mix\": \"0.*\",\n    \"lodash\": \"^4.17.4\",\n\n    \"react\": \"^15.5.4\",\n    \"react-dom\": \"^15.5.4\",\n    \"babel-preset-react\": \"^6.24.1\"\n  }\n}
\n

Update Laravel mix configuration in webpack.mix.js

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

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

\n
require('./bootstrap');\nrequire('./components/App');
\n

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

\n
import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport default class App extends Component {\n  render() {\n    return (\n      <div>\n        <h1>App</h1>\n      </div>\n    );\n  }\n}\n\nif (document.getElementById('app')) {\n  ReactDOM.render(<App/>, document.getElementById('app'));\n}
\n

Update NPM package list and compile your assets

\n
npm update\nnpm run dev
\n

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

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

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

\n

Summary

\n

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.\nIf not, you may choose to write your own custom Webpack configuration or simply report an issue in Laravel Mix repository.

"}},"pageContext":{"postId":"69880bb1-a29c-56b9-9f38-c6d896aabadc","slug":"how-to-replace-vue-js-with-react-in-laravel-5-4"}}}