How to integrate React with Laravel?

Set up Laravel as an API backend by installing Laravel, configuring the database, creating API routes, and returning JSON from controllers, optionally using Laravel Sanctum for authentication. 2. Choose between a standalone React SPA served separately or using Inertia.js for tighter Laravel integration, with Inertia allowing React components to work within Laravel’s routing and session system. 3. When using Inertia, install the required packages, configure Vite, create a root React component, place React pages in resources/js/Pages/, and return Inertia responses from routes with data passed as props. 4. For a decoupled setup, run Laravel and React on separate domains, use Axios or Fetch to call Laravel APIs from React, and handle CORS and authentication properly. 5. Best practices include using Vite for faster builds, organizing React components by feature, formatting API responses with Laravel API resources, and testing CORS and authentication early. The choice between Inertia and a standalone React app depends on project complexity and team preferences, with Inertia simplifying full-stack integration and standalone SPAs offering greater frontend flexibility, both valid approaches for modern Laravel-React applications.

Integrating React with Laravel allows you to build powerful, dynamic frontends while leveraging Laravel’s robust backend features like routing, authentication, and APIs. Here’s how to do it effectively in a modern Laravel project.

1. Set Up Laravel and Create an API

First, make sure Laravel is set up to act as a backend API.

• Install Laravel via Composer:

  

  composer create-project laravel/laravel your-project-name

• Configure your .env file with database settings and run migrations:

  php artisan migrate

• Create API routes in routes/api.php:

  

  Route::get('/posts', [PostController::class, 'index']);

• Ensure your controllers return JSON (API resources or Eloquent collections):

  public function index()
  {
      return Post::all();
  }

Use Laravel Sanctum if you need authentication for your React frontend.

2. Choose How to Serve React: SPA vs Inertia.js

You have two main approaches:

Option A: Standalone React App (SPA)

• Build React separately using Vite or Create React App.
• Serve it from a different domain (e.g., http://localhost:3000) or as static files.
• Configure Laravel to proxy API calls during development (optional).

✅ Best for large, complex frontends with many interactive components.

Option B: Use Inertia.js (Recommended for Simplicity)

Inertia lets you use React components while staying within Laravel’s routing and session system.

• Install Inertia:

  composer require inertiajs/inertia-laravel

• Set up frontend scaffolding:

  npm install @inertiajs/react react react-dom @vitejs/plugin-react

• Update vite.config.js:

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: 'resources/js/app.jsx',
        refresh: true,
      }),
      react(),
    ],
  });

• Create your root React component (resources/js/app.jsx):

  import { createRoot } from 'react-dom/client';
  import { createInertiaApp } from '@inertiajs/react';
  
  createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
      createRoot(el).render(<App {...props} />);
    },
    title: title => `My App | ${title}`,
  });

• Return Inertia responses from Laravel routes:

  use Inertia\Inertia;
  
  Route::get('/', function () {
      return Inertia::render('Welcome', ['message' => 'Hello from Laravel!']);
  });

✅ Great for full-stack apps where you want Laravel handling routing and React powering the UI.

3. Build React Components Inside Laravel

With Inertia or a bundled setup:

• Place React components in resources/js/Pages/.

• Example: resources/js/Pages/Posts/Index.jsx

  import { usePage } from '@inertiajs/react';
  
  export default function PostIndex({ posts }) {
    const { props } = usePage();
    return (
      <div>
        <h1>Posts</h1>
        {props.posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    );
  }

• Pass data from Laravel controller:

  return Inertia::render('Posts/Index', [
      'posts' => Post::all()
  ]);

? For dynamic data (e.g., search, pagination), use Inertia visits or Axios to hit Laravel API routes.

4. Use Laravel as API React as Frontend (Decoupled)

If you prefer a fully separate frontend:

• Keep Laravel running on api.yourapp.test (backend only).

• Build React app (using Vite, Next.js, etc.) on localhost:3000.

• Call Laravel APIs via Axios or Fetch:

  useEffect(() => {
    axios.get('http://api.yourapp.test/api/posts')
      .then(res => setPosts(res.data))
      .catch(err => console.error(err));
  }, []);

• Handle CORS: Install fruitcake/laravel-cors or use Laravel Sanctum’s SPA features.

  composer require fruitcake/laravel-cors

⚠️ Remember to manage authentication (Sanctum/Socialite) and CSRF if not stateless.

Final Tips

• Use Vite over Webpack (faster builds).
• Keep React components organized by page or feature.
• Use Laravel API resources to format JSON output cleanly.
• Test CORS and authentication early.

Basically, you can either tightly couple React via Inertia or keep it separate as a frontend SPA. Inertia reduces complexity and keeps you in the Laravel ecosystem, while a standalone React app gives more frontend flexibility. Choose based on your team and project needs.

The above is the detailed content of How to integrate React with Laravel?. For more information, please follow other related articles on the PHP Chinese website!