DEV Community

loading...
Cover image for How to Install React in Laravel 8

How to Install React in Laravel 8

Suresh Ramani
Laravel & Vue.js Developer
Originally published at techvblogs.com ・2 min read

What is React.js?

React is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

In this blog, we will learn how to install React JS in Laravel 8. If you don't know how to install Laravel 8 in React JS, this example tutorial is for you. I will show you step by step to install react js in your Laravel 8 application.

We will use the Laravel UI package to install React JS in the Laravel 8 application. I will show you React JS installation process with auth or without auth in Laravel 8. So let's start our tutorial. So you will also see Laravel 8 React auth or Laravel 8 React authentication process.

If you are a beginner with Laravel 8, I am sure it will help you install React in Laravel 8. It's a straightforward and easy way to install React JS using the Laravel UI composer package.

Laravel UI package provides a way to install basic bootstrap, react and react setup, and Vue js or angular js. They also offer auth scaffold for login and registration with all of those javascript frameworks or libraries. Laravel 8 provides an easy way to work with bootstrap, react, vue, and angular js.

Install Laravel

First, open Terminal and run the following command to create a fresh Laravel project:

composer create-project laravel/laravel react-js
Enter fullscreen mode Exit fullscreen mode

or, if you have installed the Laravel 8 Installer as a global composer dependency:

laravel new react-js
Enter fullscreen mode Exit fullscreen mode

Install Laravel UI

Install Laravel UI package for starting with Laravel 8 with React JS. So if you want to start with Laravel 8 with React, run the below command:

composer require laravel/ui
Enter fullscreen mode Exit fullscreen mode

Install React

php artisan ui react
Enter fullscreen mode Exit fullscreen mode

Install React with Auth

php artisan ui react --auth
Enter fullscreen mode Exit fullscreen mode

Install Required Packages

I assume that you have the Node and NPM installed on your development machine. If not, then have a look at this tutorial: Install Node.js and npm

You can check the Node and NPM version, Run the following command:

# Node Version
node -v

# NPM Version
npm -v
Enter fullscreen mode Exit fullscreen mode

Now install NPM, Run the following command:

npm install
Enter fullscreen mode Exit fullscreen mode

Now run NPM, Run the following command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Run Laravel Server

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this blog.

Discussion (4)

Collapse
it718 profile image
IT Solutionist, Specialist

Thanks for your postsing. Does it work well?

Collapse
jsf00 profile image
Saf Venture

This worked for me. I encountered error while running npm install (npm ERR! Unexpected end of JSON input while parsing near '...) . I fixed it by executing

npm cache clean --force
npm install -g @angular/cli
then run npm install && npm run dev

Thanks.

Collapse
sureshramani profile image
Suresh Ramani Author

Yes

Collapse
storyofsoft profile image
Vlad Shedrin

This is a excellent article.