Use ReactJS with your Laravel application

Use ReactJS with your Laravel application

May 05, 2019 / Ramesh Mhetre

As we already know, Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.

Laravel remove default frontend scaffolding

If you would like to remove the frontend scaffolding from your application, you may use the preset Artisan command. This command, when combined with the none option, will remove the Bootstrap and Vue scaffolding from your application, leaving only a blank SASS file and a few common JavaScript utility libraries:

php artisan preset none

Use ReactJS with your Laravel

As official document says, if you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding. On any fresh Laravel application, you may use the preset command with the react option:

php artisan preset react

This single command will remove the Vue scaffolding and replace it with React scaffolding, including an example component.

Now, instead of an Example.vue component, your application will contain an Example.js React 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!
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        );
	    }
	}
	

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

It's as simple as that! We are wishing you happy reacting with Laravel!


Similar Articles

Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...
Using Laravel's Eloquent ORM Efficiently

Using Laravel's Eloquent ORM Efficiently

Tips & tricks for Laravel's Eloquent ORM.
Read more...
Laravel Scout: Standard way to use algolia search with your Laravel application

Laravel Scout: Standard way to use algolia search with your Laravel application

Algolia search engine within your Laravel application using Laravel Scout.
Read more...