Autoplay
Autocomplete
Vidéo précédente
Terminer et continuer
React 18 - React Router 6 - Strapi 4
Générer un serveur Strapi et un client React
Créer un Backend Strapi 4 (6:54)
Créer une application React avec Vite (5:57)
Routage
Mettre en place le nouveau routage React Router Dom v6 (14:59)
Poster un formulaire
Form et Route Action de React Router v6 (12:09)
fetch() vers le endpoint de login proposé par Strapi 4 (8:41)
Créer un utilisateur dans Strapi 4 depuis React (21:12)
Créer des APIs REST avec Strapi
Créer une collection et y accéder (12:05)
Créer une collection comportant une jointure (16:22)
Consommer une API REST Strapi avec React
Requêter une API REST contenant une jointure depuis un client React (12:25)
Maper la réponse d’une API REST en tableau d’objets fortement typé (12:32)
Composant FoodCard stylisé avec un module CSS (10:51)
Gérer les dates
date-fns pour calculer une date dans le futur (8:00)
Filtrer avec Strapi
Filtrer une requête vers Strapi par adresse email (7:29)
Protéger une route des utilisateurs anonymes (9:37)
POST vers une collection Strapi comportant une jointure
Récupérer des catégories de nourritures depuis une collection Strapi (13:36)
POST d’un nouvel aliment (17:00)
Peupler une colonne de type "relation" (11:58)
Fix - attributes["food_category"] devient attributes.foodcategory (1:01)
Améliorer l’expérience utilisateur
Styliser le lien de navigation actif (8:26)
Redirection après soumission d’un formulaire (3:49)
DELETE avec confirmation de suppression
Confirmation de suppression (9:10)
CSS personnalisée + bouton d’annulation (5:29)
Supprimer un Food Item de Strapi (18:03)
Mise à jour de données
Créer une popup de mise à jour (5:56)
Styliser le formulaire d’ajout (4:07)
Pré-remplir les champs du formulaire (17:39)
Update dans Strapi (18:00)
Ordonner une collection Strapi
Créer un Toggle Switch en CSS (8:42)
Centrer les Toggles avec Flexbox (2:50)
Gérer le changement d’état d’un Toogle (17:04)
Gérer le changement sur le Toggle de dates (4:18)
Implémenter le tri par date (11:53)
Suggestions
Mettre en place le nouveau routage React Router Dom v6
Contenu verrouillé
Si vous êtes déjà inscrit
vous devrez vous connecter
.
S'inscrire à la formation pour déverrouiller