Hello, Bienvenue! 

Dans ce tutoriel, nous allons voir ensemble comment installer React JS dans une application Laravel.

Laravel est un framework web PHP gratuit et open-source, créé par Taylor Otwell et destiné au développement d’applications web suivant le modèle architectural modèle-vue-contrôleur et qui est basé sur Symfony et doté d’un ORM hyper cool qui vous rend le développement tellement plus facile et amusant.

React est une bibliothèque javascript open-source qui nous permet de créer des interfaces utilisateurs. Elle a été créée par Facebook et est maintenue actuellement par Facebook et une communauté de développeurs individuels et d’organisations.

Pré-requis:

Tu dois avoir composer et node installés sur ta machine.

Si c’est fait, allons y.

Installer l’application Laravel:

L’installation de l’application Laravel est la première étape de notre processus. Pour cela, tape la commande ci-dessous.

composer create-project laravel/laravel laravel-react-app

Si tu avais déjà installé Laravel comme une dépendance globale, tu pourrais procéder de cette manière.

laravel new laravel-react-app

Installer Laravel/UI:

Laravel/UI est un paquet officiel qui offre un squelette d’interface utilisateur simple ou de connexion et d’enregistrement pour React, Vue et jQuery dans un projet Laravel.

Pour installer Laravel/UI, exécute la commande ci-dessous:

composer require laravel/ui

Installe ReactJs

php artisan ui react

Installe le module node:

npm install

En exécutant cette commande Laravel Mix( un outil qui nous permet de compiler et d’optimiser le Javascript, le CSS et les ressources de notre application Laravel qui seront utilisées par le navigateur) sera automatiquement installé comme dépendance de développement.

Configure ton composant React et la vue 

Pour cela, vas dans le dossier js qui se trouve dans ressources (ressources/js),  crée un composant Index.js et colle à l’intérieur le code ci-dessous:

import React from “react”;
import ReactDOM from “react-dom”;
 
const Index = () => {
   return (
       <div className=”container pt-5″>
           <div className=”row justify-content-center”>
               <div className=”col-md-8″>
                   <div className=”card”>
                       <div className=”card-header”>
                           Mon 1er composant React dans une application Laravel
                       </div>
                       <div className=”card-body”>Wow, C’est fantastique.</div>
                   </div>
               </div>
           </div>
       </div>
   );
};
 
export default Index;
 
// DOM element
if (document.getElementById(“my-app”)) {
   ReactDOM.render(<Index />, document.getElementById(“my-app”));
}

Maintenant, Enregistre ton composant dans le fichier app.js, ressources/app.js:

require(‘./Index’);

Ensuite copier ce code et coller le dans la view welcome.blade.php(views/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>Mon application React dans Laravel</title>
   <!– Styles –>
   <link rel=”stylesheet” href=”{{ asset(‘css/app.css’) }}”>
</head>
<body>
    <!– La div qui contient le document –>

    <div id=”my-app”>
   </div>
   <!– React JS –>
   <script src=”{{ asset(‘js/app.js’) }}” defer></script>
</body>
</html>

Lance l’application

php artisan serve
npm run watch

Ouvre maintenant ton navigateur et tape: http://localhost:8000/ et tu verras cela à l’écran:

A partir de là, je te laisse faire opérer la magie. J’espère que le tutoriel t’a plu et t’a aidé. Si c’est le cas, tu peux le partager sur tes réseaux et en faire profiter les autres également. Merci!