Construisez une application React avec un Laravel Back End: Partie 2, React

Il s'agit de la deuxième et dernière partie de la série sur la construction d'une application React avec un back-end Laravel. Dans la première partie de la série, nous avons créé une API RESTful utilisant Laravel pour une application de liste de base sur le produit. Dans ce tutoriel, nous développerons le frontal en utilisant React.

Nous considérerons également toutes les options disponibles pour combler l'écart entre Laravel et React. Vous n'avez pas besoin d'avoir suivi la première partie de la série pour comprendre ce tutoriel. Si vous êtes ici pour voir comment React et Laravel se réunissent, vous pouvez, en fait, éviter la première partie. Vous devez vous diriger vers GitHub, cloner le repo et suivre le récapitulatif rapide ci-dessous pour commencer.

Un récapitulatif rapide

Dans le tutoriel précédent, nous avons développé une application Laravel qui répond aux appels API. Nous avons créé des itinéraires, un contrôleur et un modèle pour l'application de liste de produits simples. Comme il s'agissait du travail du contrôleur de retourner une réponse aux demandes HTTP, la section View a été entièrement ignorée.

Ensuite, nous avons discuté des techniques de gestion et de validation des exceptions à l'aide de Laravel. À la fin du tutoriel, nous avions une API Back-end Laravel. Nous pouvons désormais utiliser cette API pour créer des applications pour le Web et une large gamme d'appareils mobiles.

Dans ce tutoriel, nous allons nous concentrer sur l'avant. La première moitié du tutoriel consiste à configurer React dans un environnement Laravel. Je vous présenterai également Laravel Mix (soutenu par Laravel 5.4 et plus tard), qui est une API pour compiler les actifs. Dans la seconde moitié du tutoriel, nous commencerons à construire une application React à partir de zéro.

La mise en place de la réaction dans Laravel

Laravel Mix a été introduite dans Laravel 5.4, et c'est actuellement le moyen idéal de connecter React et Laravel. Avec Laravel 7, l'ensemble du processus a été rendu beaucoup plus facile. J'ai décrit les deux méthodes ci-dessous.

en utilisant la commande react Preset (Laravel 5.5 et Laravel 7)

Laravel 5.5 est livré avec une fonctionnalité qui vous permet d'échanger le code pour les composants React à l'aide de Laravel / UI composé et de l'utiliser pour créer un scaffolldage réactif:

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

La commande réactive:

Composants de connexion et d'enregistrement, à la fois pour l'authentification des utilisateurs.

En arrière-plan, Laravel utilise Laravel Mix, qui est un wrapper lisse pour WebPack. WebPack, comme vous le savez peut-être déjà, est un bundler de module. Il résout toutes les dépendances du module et génère les actifs statiques nécessaires pour JavaScript et CSS. React nécessite un bundler de module pour fonctionner et WebPack s'inscrit parfaitement à ce rôle. Laravel Mix est donc le calque qui se trouve au-dessus de WebPack et facilite l'utilisation de WebPack dans Laravel. Une meilleure compréhension du fonctionnement de Laravel Mix est important si vous avez besoin de personnaliser la configuration de webpack plus tard. La commande react Preset ne nous donne aucune information sur le fonctionnement des choses en arrière-plan. Alors supprimons le préréglage de la réaction et retracez les étapes manuellement à la place.

Méthode manuelle (Laravel 5.4)

Si vous exécutez Laravel 5.4, ou si vous êtes juste curieux de voir à quel point Laravel Mix est configuré, voici les étapes que vous devez suivre:

Installer UseState et les dépendances champ, remplacez les champs réactifs existants par les suivants:

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

useEffect

s'exécutera. À l'intérieur, nous utilisons la méthode RenderProducts pour décrire l'interface utilisateur du composant. Tous les produits sont rendus là-bas. De plus, nous n'avons pas encore d'éléments interactifs. Faisons le titre du produit cliquable, et en cliquant, plus de détails sur le produit seront rendus.

Affichage des données du produit

Voici la liste des choses que nous devons couvrir:

un état pour suivre le produit qui a été cliqué. Appelons cela le composant principal

. Le composant principal

, qui est le parent, transmet une référence de fonction comme accessoires. Le composant enfant, composant principal

, nous déclarons le composant produit

, tandis que la fonction de mise à jour devrait avoir son propre composant. Je vous encourage à relever ce défi et à terminer les composants manquants.

Résumé

• Nous avons parcouru un long chemin à partir de l'endroit où nous avons commencé. Tout d'abord, nous avons créé une API REST en utilisant le framework Laravel. Ensuite, nous avons discuté de nos options pour mélanger Laravel et React. Enfin, nous avons construit un frontal à l'API en utilisant React. Bien que nous nous concentrions principalement sur la création d'une application d'une seule page à l'aide de React, vous pouvez créer des widgets ou des composants qui sont montés sur des éléments spécifiques dans vos vues. React est très flexible car c'est une bibliothèque, et une bonne. Au cours des dernières années, React a gagné en popularité. En fait, nous avons un certain nombre d'articles sur le marché qui sont disponibles à l'achat, à l'examen, à la mise en œuvre, etc. Si vous recherchez des ressources supplémentaires sur React, n'hésitez pas à les vérifier.

  Avez-vous déjà essayé d'expérimenter avec Laravel et React? Que pensez-vous? Partagez-les avec nous dans le forum.

  Ce message a été mis à jour avec les contributions de Kingsley Ubah. Kingsley est passionnée par la création de contenu qui éduque et inspire les lecteurs. Les passe-temps incluent la lecture, le football et le vélo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!