Tutoriel React FR — Partie 0 (Next.JS / Apollo / GraphQL / Express.js) [FR/EN]

Introduction et Sommaire

EN : Do not forget that if you are not French you can translate this tutorial

Bienvenue dans ce tutoriel consacré à React.js (plus précisément Next.js, sa version en Server Side Rendering (SSR)

Vous rêvez de développer une application à la Deliveroo, AirBnb, BlablaCar, DropBox et autres ? Ou vous souhaitez simplement accroître vos connaissances en développement car vous adorez les nouvelles (et bonnes) technologies ? Alors je pense que ce tutoriel est fait pour vous.

Il n’est pas impossible que le tutoriel au bout d’un certain moment passe en Membres Upgraded uniquement. Pour l’instant ce n’est pas encore le cas.

Ce tutoriel est fortement inspiré d’un tutoriel de WesBos (entrepreneur/développeur), bien que les versions utilisées seront mises à jour tout au long de ce tutoriel, et nous irons beaucoup plus loin dans le détail et l’explication de certaines parties assez compliquées notamment sur la configuration serveur et les requêtes. Le style et l’application en elle même seront créés au fût et à mesure donc je n’ai à l’heure actuelle aucune idée du rendu final de l’application, mais ayant fait 2 ans en tant qu’intégrateur web spécialisé en accessibilité, j’essayerai de faire quelque chose d’assez joli et ressemblant fortement à ce que l’on peut trouver dans les applications les plus connues du moment.

Sachez que 8 parties sont déjà sorties, les voici :

Partie 1, Partie 2, Partie 3, Partie 4, Partie 5, Partie 6, Partie 7, Partie 8 et Partie 9

N’hésitez pas à me contacter par mail : thibault.jeanpierre.dev@gmail.com

Ou directement via LinkedIn :

Voici une liste (non-exhaustive) de tout ce que je compte aborder dans ce tutoriel :

• Configuration de l’IDE (VS Code)
• Configuration du Projet Front
• Configuration du Projet Back
• Introduction à Next.js
• Introduction au Routing avec Next.js
• Utilisation du composant custom “_app.js” de Next.js
• Introduction aux styled-component (CSS dans le JS)
• Création d’un thème avec les Styled Components
• Thème Global avec StyledComponent
• Import d’une Police d’écriture et utilisation des media-queries
• Utilisation de NProgress pour changer d’URL (Effet de chargement à la Amazon)
• Introduction à GraphQL
• Configuration BackEnd: Introduction à Prisma.io
• Configuration et création du serveur GraphQL Yoga
• Introduction aux Query et Mutation ( Resolvers )
• Premier processus de requête entre Prisma et le serveur GraphQL Yoga
• Premières “Vraies” requêtes (Query/Mutation) pour tester l’architecture
• Introduction et Configuration du client Apollo avec Next.js
• Processus de création / lecture depuis le Front vers le Back
• Système d’Upload d’image + Formulaires
• Implémentation des mises à jour avec les Queries et Mutations
• Implémentation de suppressions
• Requêtes GraphQL plus précises (filtres sur les requêtes)
• Implémenter une pagination (dynamique)
• Processus de Création de compte utilisateur
• Processus de Connexion d’un compte utilisateur
• Système de déconnexion
• Système d’oubli de mot de passe (envoi de mail?)
• Permissions et Rôles au sein de notre application
• Configuration de Stripe
• Création d’un panier (achat)
• Ajouter/Supprimer des items d’un panier (et mise à jour du prix total)
• Barre de recherche Hyper-Performante avec Auto Complétion
• Paiement par Carte + Création d’une facture / Commande
• Tests avec Jest et Enzyme
• Déploiement sur Zeit.now
• Déploiement sur Heroku
• Conseils pour la suite et déploiement sur d’autres plateformes