Laravel React.js

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
laravel/ui installazione
laravel/ui installazione

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!

Autore