Votre application Web Laravel/React avec Inertia en 5 mins
Laravel est un framework PHP puissant et populaire pour le développement web. Inertia.js est une bibliothèque qui permet de construire des applications monopages (SPA) en utilisant Laravel et une bibliothèque front-end, comme React.
Dans ce tutoriel, nous allons voir comment créer une application Laravel qui utilise Inertia.js et React pour afficher les vues. Nous allons également voir comment installer et configurer Inertia.js, React et Laravel Mix pour compiler le code JavaScript.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :
- Un serveur local de développement comme XAMPP ou MAMP
- Composer installé sur votre système
- Node.js et NPM installés sur votre système
Étape 1 : Créer un nouveau projet Laravel
Pour commencer, ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet Laravel :
composer create-project --prefer-dist laravel/laravel inertia-react-app
Cette commande va créer un nouveau projet Laravel nommé "inertia-react-app" dans un nouveau dossier.
Étape 2 : Installer Inertia.js
Après avoir créé votre projet Laravel, vous devez installer Inertia.js. Pour ce faire, exécutez les commandes suivantes dans votre terminal :
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-react
La première commande installe le paquet Laravel Inertia, qui fournit une intégration Laravel pour Inertia.js. La deuxième commande installe les paquets JavaScript nécessaires pour utiliser Inertia.js et React.
Étape 3 : Installer React
Ensuite, vous devez installer React et les dépendances associées. Pour ce faire, exécutez les commandes suivantes :
npm install react react-dom
npm install -D @babel/preset-react @babel/plugin-proposal-class-properties
La première commande installe React et React DOM. La deuxième commande installe les plugins Babel nécessaires pour compiler le code JSX de React.
Étape 4 : Installer Laravel Mix
Laravel Mix est un outil de compilation pour Laravel qui facilite la création de projets utilisant des outils front-end modernes, comme React. Pour l'installer, exécutez la commande suivante :
npm install laravel-mix --save-dev
Étape 5 : Configuration de Laravel Mix
Maintenant que Laravel Mix est installé, vous devez le configurer pour compiler votre code JavaScript. Ouvrez le fichier webpack.mix.js à la racine de votre projet et remplacez le contenu par le code suivant :
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
.react()
.webpackConfig({
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
});
Ce code indique à Laravel Mix de compiler le fichier resources/js/app.js en utilisant React, et de le placer dans le dossier public/js. Il configure également l'alias @ pour pointer vers le dossier resources/js, ce qui vous permettra d'importer facilement des fichiers JavaScript depuis ce dossier.
Étape 6 : Créer une route et un contrôleur
Maintenant que nous avons installé Inertia.js, React et Laravel Mix, il est temps de créer une route et un contrôleur pour notre application. Pour ce faire, ouvrez le fichier routes/web.php et ajoutez la route suivante :
Route::get('/', function () {
return inertia('Welcome');
});
Cette route renvoie une vue nommée "Welcome", qui sera créée dans la prochaine étape. Le inertia helper fonctionne de la même manière que la méthode view de Laravel, mais au lieu de renvoyer une vue Blade, il renvoie une vue Inertia.
Ensuite, créez un nouveau contrôleur avec la commande artisan suivante :
php artisan make:controller WelcomeController
Ouvrez le fichier app/Http/Controllers/WelcomeController.php et ajoutez la méthode suivante :
public function __invoke()
{
return inertia('Welcome');
}
Cette méthode renvoie également une vue Inertia nommée "Welcome". Nous avons utilisé la méthode magique __invoke pour rendre notre contrôleur exécutable en tant que fonction.
Étape 7 : Créer une vue avec Inertia.js
Maintenant que nous avons configuré notre route et notre contrôleur, il est temps de créer une vue avec Inertia.js et React. Ouvrez le fichier resources/js/Pages/Welcome.js et ajoutez le code suivant :
import React from 'react';
import Layout from '@/Shared/Layout';
export default function Welcome() {
return (
<Layout>
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Welcome</div>
<div className="card-body">
Welcome to our application!
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
Ce code crée une composante React simple qui utilise le composant Layout pour afficher une carte Bootstrap avec le texte "Welcome to our application!".
Le composant Layout est créé dans le fichier resources/js/Shared/Layout.js. Ouvrez ce fichier et ajoutez le code suivant :
import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';
export default function Layout({ children }) {
return (
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light bg-light mb-3">
<a className="navbar-brand" href="#">Inertia App</a>
<div className="collapse navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<InertiaLink className="nav-link" href="/">Home</InertiaLink>
</li>
</ul>
</div>
</nav>
{children}
</div>
);
}
Ce code crée une composante Layout qui contient une barre de navigation Bootstrap avec un lien vers la page d'accueil.
Étape 8 : Compiler et afficher la vue
Maintenant que nous avons créé notre vue avec Inertia.js et React, il est temps de la compiler et de l'afficher dans notre application. Pour ce faire, exécutez les commandes suivantes dans votre terminal :
npm run dev
php artisan serve
La première commande compile le code JavaScript avec Laravel Mix. La deuxième commande démarre le serveur de développement de Laravel.
Ouvrez votre navigateur et accédez à l'URL http://localhost:8000. Vous devriez voir la page d'accueil de votre application avec le texte "Welcome to our application!".
Étape 9 : Passer des données à la vue
Maintenant que nous avons créé notre première vue avec Inertia.js et React, il est temps de passer des données à la vue. Pour ce faire, modifions la méthode __invoke de notre contrôleur pour renvoyer des données :
public function __invoke()
{
$name = 'John';
$age = 30;
return inertia('Welcome', compact('name', 'age'));
}
Nous avons créé deux variables, $name et $age, et nous les avons passées à la vue en utilisant la fonction PHP compact().
Ensuite, modifions la vue pour afficher ces données :
import React from 'react';
import Layout from '@/Shared/Layout';
export default function Welcome({ name, age }) {
return (
<Layout>
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Welcome</div>
<div className="card-body">
Welcome {name}, you are {age} years old!
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
Nous avons ajouté deux paramètres à la fonction Welcome, name et age, et nous les avons utilisés dans le texte affiché.
Étape 10 : Utiliser des formulaires avec Inertia.js
Maintenant que nous savons comment passer des données à la vue, il est temps de créer un formulaire et de l'utiliser pour soumettre des données à notre application.
Dans le contrôleur WelcomeController, nous allons créer une nouvelle méthode pour afficher le formulaire :
public function create()
{
return inertia('CreateUser');
}
Dans la vue CreateUser.js, nous allons créer un formulaire qui envoie les données au contrôleur UserController :
import React, { useState } from 'react';
import Layout from '@/Shared/Layout';
import { Inertia } from '@inertiajs/inertia';
export default function CreateUser() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
function handleSubmit(e) {
e.preventDefault();
Inertia.post('/users', {
name: name,
email: email,
});
}
return (
<Layout>
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Create User</div>
<div className="card-body">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" id="name" value={name} onChange={e => setName(e.target.value)} />
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input type="email" className="form-control" id="email" value={email} onChange={e => setEmail(e.target.value)} />
</div>
<button type="submit" className="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
Nous avons utilisé le hook useState pour gérer l'état du formulaire et la fonction Inertia.post() pour envoyer les données au contrôleur UserController. Lorsque l'utilisateur soumet le formulaire, la fonction handleSubmit est appelée, elle empêche le comportement par défaut du navigateur, puis envoie les données à l'URL /users en utilisant la méthode HTTP POST.
Dans le contrôleur UserController, nous allons créer une nouvelle méthode pour traiter la soumission du formulaire :
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|max:255',
'email' => 'required|email|unique:users,email',
]);
$user = User::create($validatedData);
return redirect()->back()->with('success', 'User created.');
}
Nous avons utilisé la méthode validate() de Laravel pour valider les données soumises, puis nous avons créé un nouvel utilisateur en utilisant la méthode create() de l'Eloquent ORM. Enfin, nous avons renvoyé l'utilisateur à la page précédente avec un message de succès.
Conclusion
Dans cet article, nous avons vu comment utiliser Inertia.js pour créer une application Laravel avec React. Nous avons appris comment créer des vues, passer des données à la vue, utiliser des formulaires et soumettre des données à l'application. Bien que la mise en place initiale puisse sembler un peu compliquée, l'utilisation d'Inertia.js peut simplifier considérablement le processus de développement d'une application Laravel avec React. J'espère que vous avez trouvé ce tutoriel utile et que vous vous sentez maintenant plus à l'aise avec Inertia.js et Laravel. N'hésitez pas à explorer la documentation d'Inertia.js pour en savoir plus sur toutes les fonctionnalités que cet outil peut offrir.