Use ReactJS with your Laravel application


The standard way to start using ReactJS with your laravel application

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 <span class="hljs-class">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 className="panel-body">
	                                I'm an example component!


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

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

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot