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

Connect your laravel application to Sqlite DB

Connect your laravel application to Sqlite DB

Quickly connecting with sqlite database within laravel application
Read more...
Laravel v6 & Laravel Vapor is going to release soon 🚀

Laravel v6 & Laravel Vapor is going to release soon 🚀

Laravel v6 is is releasing soon. Serverless laravel is next big thing in laravel community!
Read more...
Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...