Come aggiungere React js a Laravel 11 con Vite

Laravel 11 e React.js è una combinazione ottimale per scrivere codice pulito ed efficiente.
In questo tutorial vedremo come aggiungere React js a Laravel 11 con Vite : dalla versione 9.19 Laravel è passato da Webpack a Vite , che diventa il bundler di asset frontend predefinito per le applicazioni Laravel.
Estimated reading time: 3 minuti
Integrare l’ultima versione di React.js con Laravel è un compito impegnativo, ma seguendo attentamente i passaggi descritti qui di seguito, vedrai che sarà tutto più semplice.
installazione laravel 11
Per prima cosa installiamo il framework Laravel 11, chiamando il progetto “larareact:
composer create-project --prefer-dist laravel/laravel larareact
Per l’installazione laravel utilizziamo Composer, l’opzione –prefer-dist influisce sul modo in cui vengono scaricate le dipendenze.
Praticamente l’opzione –prefer-dist indica a Composer di scaricare e decomprimere gli archivi delle dipendenze utilizzando GitHub o un’altra API quando disponibile. Nella maggior parte dei casi viene utilizzato per un download più rapido delle dipendenze.
Cioè, non scarica l’intera cronologia delle dipendenze del sistema di controllo della versione (VCS), il che lo rende meglio memorizzato nella cache. Gli archivi su GitHub potrebbero escludere alcuni file che non ti servono solo per usare la dipendenza. È l’opzione predefinita ed è utile per la maggior parte degli scenari in cui non lavori attivamente sulle dipendenze stesse.
Installare i pacchetti npm corretti
Prima di proseguire, ecco alcuni pacchetti che devi installare per integrare correttamente React.js 18 in Laravel 11!
Ora esegui il comando sottostante per installare tutte le librerie dal gestore pacchetti Node.
npm install
Installare il pacchetto laravel/ui
Accedi alla cartella del progetto larareact e installa il pacchetto laravel/ui utilizzando il comando seguente.
composer require laravel/ui

Configurazione di React in Laravel
Ora che abbiamo installato il pacchetto Composer UI, dobbiamo eseguire il comando indicato di seguito per configurare React in Laravel.
php artisan ui react
Ora, vai al file vite.config.js e importa il plugin ‘@vitejs/plugin-react’. Il file vite.config.js deve comprendere anche il react() nella plugins array:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
]
});
Avvio dei server
Puoi andare alla radice del progetto Laravel, aprire il terminale o la riga di comando e avviare Laravel e il server di sviluppo, che utilizzerà il caricamento a caldo e aggiornerà i file javascript.
npm run dev
php artisan serve
Assicuratevi che entrambi i server siano in funzione!
Impostazione del componente React
Dopo aver eseguito il comando php artisan ui react, all’interno della cartella resources/js , creiamo un componente jsx chiamato “Home.jsx” e aggiungi il codice sottostante a quel file.
import React from "react"
export default function Home() {
return (
<div className="container">
<div className="row my-5">
<div className="col-md-8 mx-auto">
<h1 className="text-danger"> Add React js to laravel 11 with vite</h1>
</div>
</div>
</div>
)
}
Ora all’interno della cartella resources/js , creiamo un componente jsx chiamato “app.jsx” e aggiungiamo il codice sottostante.
import './bootstrap';
import React from "react"
import ReactDOM from 'react-dom/client';
import Home from './Home';
ReactDOM.createRoot(document.getElementById('app')).render(
<Home />
);
Modificare il file blade per visualizzare il componente
Il passaggio finale consiste nel modificare un file blade che includerà il componente React, che visualizzerà la pagina web tramite il server Laravel.
Scrivi il codice seguente all’interno del 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 href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.jsx')
</body>
</html>
Salvare il file e assicurarsi che entrambi i server “npm run dev” e “php artisan serve” funzionino senza errori.
Se tutto funziona correttamente, vai a questo URL: http://localhost:8000/ e vedrai l’output!