Building a Laravel Project with React: A Step-by-Step Guide

Introduction

Laravel and React are two powerful tools for modern web development.

Laravel is a robust PHP framework for building server-side applications, while React is a popular JavaScript library for building interactive user interfaces.

Combining these two can result in a highly scalable and responsive web application.

In this guide, we’ll walk you through the steps to set up a Laravel project with React.

Prerequisites

Before we begin, make sure you have the following installed:

PHP (version 8.2 or higher)

2. MySQL (or another database)

3. Composer

4. Node.js and npm

5. A basic understanding of Laravel and React

Step 1: Setting Up the Laravel Project

First, let’s create a new Laravel project.

Create a New Laravel Project
Run the following command in your terminal:

composer create-project --prefer-dist laravel/laravel my-laravel-react-app

This will create a new Laravel project in a folder named my-laravel-react-app.

2. Navigate to the Project Directory
Move into the project directory:

cd my-laravel-react-app

3. Set Up Environment Variables
Copy the .env.example file to .env:

cp .env.example .env

Then, open the .env file and set your database credentials:

DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

4. Generate the Application Key
Run the following command to generate a new application key:

php artisan key:generate

5. Migrate the Database
Finally, run the migrations to set up your database schema:

php artisan migrate

Step 2: Setting Up React in Laravel

Now that we have a Laravel project set up, let’s integrate React.

1. Install Laravel Vite Plugin and React
Laravel uses Vite for asset bundling. Install the necessary dependencies:

npm install
npm install @vitejs/plugin-react --save-dev
npm install react react-dom

2. Configure Vite for React
Open the vite.config.js file and update it to include the React plugin:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

3. Create a React Component
Create a new resources/js directory (if it doesn’t already exist) and create a React component:

mkdir -p resources/js
touch resources/js/app.jsx

In app.jsx, add the following React code:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
        <div>
            <h1>Hello, React in Laravel!</h1>
        </div>
    );
}

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

4. Update the Blade Template
Modify your resources/views/welcome.blade.php file to include the React app:

<!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 React App</title>

    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>
<body>
    <div id="app"></div>
</body>
</html>

This code sets up a div with an id of app, where your React components will be rendered.

5. Compile the Assets
Run the following command to compile your assets:

npm run dev

This will start the Vite development server and watch for any changes in your React files.

Step 3: Testing the Integration

Now, visit your Laravel application’s URL in your browser (typically http://localhost:8000). You should see “Hello, React in Laravel!” displayed on the screen, indicating that React has been successfully integrated with your Laravel project.

Step 4: Building for Production

When you’re ready to deploy your application, you’ll need to build your assets for production.

1. Build the Assets
Run the following command to build the assets:

npm run build

This will create optimized versions of your assets in the public directory.

2. Deploy the Application
Now, you can deploy your Laravel application as you normally would.

Conclusion

In this guide, we’ve walked through setting up a Laravel project with React. You’ve learned how to create a new Laravel project, install and configure React, and integrate the two seamlessly. With this setup, you can now start building powerful, interactive applications using Laravel for the backend and React for the frontend.

Happy coding :)

Spread the love

Enter your email to get the Latest Updated