Blog officiel du projet Web Apps Conception
layout: post title: “Développer un Front End en React.js” date: 2024-10-19 01:00:00 +0002 tags: react
Voici les exemples du livre React : Développez le Front End de vos applications web et mobiles avec JavaScript : React Exemples.
Le livre édité en janvier 2020 permet d’acquérir les bases du développement React.js. Cependant, les technologies évoluent tellement vites qu’il était déjà devenu obsolète lors de mon acquisition en 2022.
Exemple avec le chapitre 9 pour la création d’une API avec Graphcool, ce projet qui a pris fin le 1er juillet 2020, ce qui rend le chapitre inutilisable…
Le chapitre GraphQL est intéressant, mais il faut y trouver une application comme pour l’extraction de donnes depuis un CMS sous Wordpress afin de le convertir en site static, qui au passage est beaucoup plus sécurisé qu’un CMS accessible sur Internet.
Il y a aussi des références vers le framework Gatsby qui exploite également la fonctionnalité GraphQl, mais depuis qu’il a fusionné avec Netlify Cloud, la documentation et les exemples ne sont plus maintenus…
Cependant, j’ai trouvé deux projets dignes d’intérêt pour exploiter GraphQL :
Le moteur GraphQL Hasura est un serveur GraphQL ultra-rapide qui vous offre des API GraphQL instantanées et en temps réel sur Postgres, avec des déclencheurs webhook sur les événements de base de données et des schémas distants pour la logique métier. Voici un cas d’école : ebapps-conception/hasura-react-todo-app.
Nhost est une alternative open source à Firebase avec GraphQL, conçue avec les éléments suivants à l’esprit : Open Source, GraphQL, SQL, Great Developer Experience : webapps-conception/nhost-auth.
Le chapitre Redux est très instructif, il m’a permis de concevoir des applications complexes afin d’y stocker les données d’état dans le state, tout en organisant les objects dans un store qui peut être utilisable sur toutes les pages de l’application de manière globale, sans devoir passer le state dans une propriété de chaque composant. Redux permet de simpler le code, tout en le structurant fonctionnelement.
Pour les détails, je vous invite à consulter le site https://redux.js.org/.
Voici deux exemples simples permettant de comprendre le fonctionnement de Redux : webapps-conception/react-redux-actions et webapps-conception/redux-essentials-counter-example.
Redux Thunk est un middleware qui vous permet de faire un appel à l’action auprès des créateurs qui renvoie une fonction au lieu d’un objet d’action. Cette fonction reçoit la méthode de distribution du store. Elle permet donc d’envoyer des actions synchrones régulières dans le corps de la fonction une fois que les opérations asynchrones ont été terminées.
Voici deux exemples simples permettant de comprendre le fonctionnement de Redux Thunk : webapps-conception/redux-thunk-simple et webapps-conception/redux-thunk-services.
Personnelement, j’ai énormément utilisé la solution redux-thunk-services, car elle permet d’organiser l’ensemble des services dans une sous-arborescence contenant les actions et les reducers pour chaque service, le tout orchestré par le store, et les composants dans une autre arborescence contenant les vues. Cette structure me fait énormément penser au modèle MVC (Modèle, Vue, Contrôleur), le modèle de données étant géré par les reducers, le controleur exécute des actions, et bien sûre, les vues sont contenu dans les composants de l’application.
Vous trouverez de plus amples informations sur le site de Redux : Writing Logic with Thunks.
Redux-saga permet au store de communiquer de manière asynchrone avec des ressources extérieures à ce store, ce qui inclut l’accès au stockage local, les requêtes HTTP et l’exécution de services d’entrée et de sortie gérés efficacement.
Voici deux exemples simples permettant de comprendre le fonctionnement de Redux-saga : webapps-conception/redux-saga-simple et webapps-conception/redux-saga-full. Ce dernier permet de réaliser une API de recherche d’adressse proposée par l’administration française en intérrogeant une API de recherche api-adresse.data.gouv.fr.
Comme le livre contient tout un chapitre sur la sécurité et la persistance des données avec Firebase, ainsi, j’ai créé un exemple d’utilisation de Redux-Think pour la gestion d’une base de données en temps réel (Realtime database) accessible par une authentification : webapps-conception/react-firebase-auth-redux. Pour ceux qui font une alergie à Redux, j’ai également publié un exemple d’authentification Firebase sans la couche Redux : webapps-conception/react-firebase-auth.
À partir de ce chapitre, je ne traiterai plus les exemples du livres, même si ils sont tout aussi intéressant pour débuter en React.js, mais ils restent assez vieillissant par rapport aux versions actuelles…
React Router est un framework JavaScript qui nous permet de gérer le routage côté client et côté serveur dans les applications React. Il permet la création d’applications Web ou mobiles d’une seule page qui permettent de naviguer sans actualiser la page. Cela nous permet également d’utiliser les fonctionnalités d’historique du navigateur tout en préservant la bonne vue de l’application.
Pour bien compendre le fonctionnement du framework React Router v6, je vous conseille de suivre le tutoriel : webapps-conception/react-router-tutorial.
Comme j’adore utiliser Formik pour la création de mes formulaires, je vous joins également un exemple d’utilisation : webapps-conception/react-bootstrap-formik.
Pour créer une application multi-langues, le framework i18next est idéal pour gérer les différentes traductions de vos messages et formulaires. Voici un exemple d’utilisation : webapps-conception/i18n-translate-react.
Pour les amateurs du framework Bootstrap, voici un exemple compilé par mes soins d’utilisation de React Bootstrap : webapps-conception/website-react-bootstrap-test.
Auth0 est une plateforme utilisée par les entreprises et les développeurs Web pour vérifier l’identité d’un utilisateur avant de lui donner accès à des sites Web et à des applications. Il s’agit d’un moyen flexible, sécurisé et convivial de laisser entrer de véritables clients tout en empêchant les parties malveillantes et frauduleuses d’entrer. Voici un exemple d’utilisation : webapps-conception/auth0-react-login.
Voici un kit de démarrage du framework Next.js qui utilise NextAuth.js pour une simple connexion par e-mail + mot de passe, Prisma comme ORM et une base de données Vercel Postgres pour conserver les données : webapps-conception/nextjs-postgres-auth-starter.
Ce projet ajoute une fonctionnalité de commentaires à l’application de blog Next.js à l’aide d’Upstash et d’Auth0 : webapps-conception/blog-with-comments.
Quickstart Prisma : dans ce guide de démarrage rapide, vous apprendrez comment démarrer avec Prisma à partir de zéro en utilisant un projet TypeScript simple et un fichier de base de données SQLite local. Il couvre la modélisation des données, les migrations et l’interrogation d’une base de données.
webapps-conception/remix-prisma-mongodb : Application de démonstration utilisant Remix, MongoDB, Prisma et TailwindCSS que vous pouvez créer en suivant la série :
MongoDB est une base de données distribuée à usage général, basée sur des documents, conçue pour les développeurs d’applications modernes et pour l’ère du cloud. Cet exemple vous montrera comment vous connecter et utiliser MongoDB comme backend pour votre application Next.js.
webapps-conception/nextjs-with-mongodb : Si vous souhaitez en apprendre plus sur MongoDB, visitez les pages suivantes :