How to Install React in Laravel 10

Discover the seamless integration of React into Laravel 10 with our step-by-step guide. Learn how to effortlessly install React and enhance your Laravel projects for a dynamic and interactive user experience.

Smit Pipaliya

Published:

4 months ago

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 10. If you don't know how to install Laravel 10 in React JS, this example tutorial is for you. I will show you step by step to install react js in your Laravel 10 application.

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

If you are a beginner with Laravel 10, I am sure it will help you install React in Laravel 10. 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 10 provides an easy way to work with bootstrap, react, vue, and angular js.

How to Install React in Laravel 10

Install Laravel

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

composer create-project laravel/laravel react-js

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

laravel new react-js

Install Laravel UI For React

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

composer require laravel/ui

Install React in Laravel

php artisan ui react

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 versions, Run the following command:

# Node Version
node -v

# NPM Version
npm -v

Now install NPM, Run the following command:

npm install

Add the Following Code to resources/views/welcome.php file:

// welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        @viteReactRefresh
        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    </head>
    <body>
        <div id="example"></div>
    </body>
</html>

Now run NPM, Run the following command: