Installare React in Laravel 8

Category: blog, laravel, react
2.988 views Tempo di lettura: 6 minuti

Ho deciso di scrivere questo breve tutorial per dimostrarvi come sia semplice installare React in Laravel 8. Lo faremo passo passo in brevi e semplici steep.

Installare React in Laravel 8: requisiti prima di iniziare

Mi aspetto che abbiate quanto meno le basi della libreria js e del framework php, in caso contrario potete seguire i miei corsi su Udemy. Inoltre sono richieste conoscenze di base di css, bootstrap, php ed html5.

React è una libreria JavaScript open source per lo sviluppo di UI (User interface). È stata creata da Facebook e da una comunità di singoli sviluppatori e organizzazioni. Questa  fornisce una base per lo sviluppo di applicazioni a pagina singola (SPA) e per il mobile con React Native.

Laravel è un framework web PHP open source, creato da Taylor Otwell e destinato allo sviluppo di applicazioni web seguendo il modello architetturale MVC (Model View Controller), si basa su Symfony.

Prima di iniziare scaricatevi Git Bash e Composer, quest’ultimo necessario per poter lavorare con Laravel.

Perchè Laravel e React?

Nello sviluppo delle applicazioni moderne si opta nella soluzione della separazione delle responsabilità. In parole povere si utilizza un framework o libreria js che gestisca la parte front end delle applicazioni.

Oggi tecnologie come React, Angular  o Vue.js ci consentono di realizzare single page application offrendo un’esperienza di navigazione e prestazioni maggiori rispetto a quello che non offre una tecnologia realizzata in php, come Laravel.

Inoltre nello sviluppo in team ciò da la possibilità agli sviluppatori di dedicarsi ad una parte del codice piuttosto che ad un’altra.

Laravel e React si adattano benissimo nonostante esiste una documentazione con supporto con Vue.js, in quanto i due framework condividono la stessa filosofia basata sulla semplificazione della realizzazione dei progetti, ma questo lo discuteremo in altra sede.

Installare React in Laravel 8: Laravel project

Come recita la documentazione ufficiale di Laravel abbiamo  due possibilità per installare il framework: via composer oppure con il programma di installazione di Laravel.

Via composer

Createvi una directory a piacere nel vostro pc  e da terminale , all’interno di essa digitate:

composer create-project laravel/laravel example-app

poi spostatevi all’interno del progetto:

cd example-app

ed avviate il server:

php artisan serve

Con programma di installazione Laravel

Questo metodo è più veloce del precedente e lo utilizzeremo nel corso della guida, da terminale digitate:

composer global require laravel/installer

così avete installato laravel installer globalmente, quindi installate il progetto Laravel, spostatevi all’interno dello stesso ed avviate il server:

laravel new example-app

cd example-app

php artisan serve

Installare React in Laravel 8: il nostro progetto

Bene ora che abbiamo capito come fare procediamo con il realizzare il nostro progetto, da terminale:

laravel new laravel-react

una volta installata l’applicazione procediamo con l’installazione di Laravel/ui, ricordatevi prima di spostarvi all’interno del progetto:

cd laravel-react

composer require laravel/ui

Laravel / UI è un pacchetto ufficiale che offre uno scaffolding (impalcatura) dell’interfaccia utente di accesso e registrazione per React, Vue e jQuery nel progetto Laravel.

Installa React in Laravel

Una volta installato il pacchetto dell’interfaccia utente del composer possiamo  installare React in Laravel, da terminale digitate:

php artisan ui react

come ci suggerisce il nostro Git Bash:

lucio@LENOVO MINGW64 /f/APP/LARAVEL/forBlog/laravel-react
$ php artisan ui react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

compiliamo lo scaffolding creando la directory node_modules  con il comando:

npm install

Prima di eseguire npm install ricordatevi che è necessario installare NodeJs nel vostro pc se non lo avete di già.

Impostare il component React in Laravel

Se provate ad eseguire l’applicazione laravel mostrerà la Home page relativa alla view welcome.blade, quindi non vediamo ancora nessun componente  React. Non ci resta di dire a Laravel di utilizzarlo.

Se aprite il progetto con il vostro IDE noterete sotto resources\js\components\Example.js :

Example.js è un componente realizzato da react ui di default per noi.

Se aprite il file resources\js\app.js noterete che questo è registrato per poter essere utilizzato da laravel:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');

nel momento in cui realizzate nuovi componenti ricordatevi sempre di registrarli in questo file.

Utilizzo dei componenti React in Laravel

Aprite il file resources\views\welcome.blade.php e cancellatene il contenuto, quindi digitate questo codice:

<!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>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

    <!-- React root DOM -->
    <div id="example">
    </div>

    <!-- React JS -->
    <script src="{{ asset('js/app.js') }}" defer></script>

</body>
</html>

in pratica gli diciamo di utilizzare i percorsi relativi al css ed al js di React. Inoltre per poter eseguire il rendering della libreria dobbiamo definire un div con id , in questo caso example per poter appunto utilizzare il component example visto in precedenza.

Compila i file javascript con il comando:

npm run watch

Nota Bene: se la compilazione dei file js vi restituisse un errore , come se mancasse laravel-mix, allora prima installatelo con il comando:

npm install laravel-mix -D

come devDependencies.

quindi avvia il server:

php artisan serve

e vi troverete la seguente pagina: