React, les bases
Maîtrisez React pour concevoir des interfaces utilisateur modernes et réactives, et propulsez vos compétences en développement web vers de nouveaux sommets!
Description
Cette formation est conçue pour vous plonger dans l'univers captivant de React, une bibliothèque JavaScript incontournable pour le développement d'interfaces utilisateur dynamiques et performantes.
Vous commencerez par explorer l'évolution de React, en découvrant les différentes versions et les meilleures méthodes de configuration pour lancer votre projet avec succès.
Au fil des modules, vous maîtriserez les concepts fondamentaux de React, notamment la création et la gestion de composants, l'utilisation de JSX pour structurer votre code, et la gestion de l'état avec les hooks. Vous apprendrez également à manipuler des événements et à rendre vos interfaces interactives, tout en optimisant les performances de votre application.
La formation mettra également un accent particulier sur les techniques avancées de stylisation avec Emotion, et la gestion globale de l'état avec des outils comme Redux et Recoil. Enfin, vous aborderez les bonnes pratiques pour tester votre code, et mettre en production une application robuste et prête pour le déploiement.
Publics visés
- Développeurs front-end voulant maîtriser React.
- Développeurs web avec expérience en JavaScript, intéressés par React.
- Étudiants en informatique cherchant à apprendre React.
- Chefs de projet technique souhaitant comprendre React.
- Professionnels en reconversion vers le développement web.
Pré-requis
- Connaissance de base en HTML, CSS et JavaScript.
- Expérience préalable avec une bibliothèque ou un framework JavaScript est un plus.
- Familiarité avec les concepts de programmation orientée objet.
- Notions de base sur les systèmes de gestion de versions (Git).
- Environnement de développement configuré avec Node.js et un éditeur de code.
Compétences
Compréhension approfondie de l'histoire et des versions de React.
Capacité à configurer et initialiser un projet React.
Maîtrise de la création et gestion de composants React.
Utilisation efficace de JSX pour structurer le code.
Gestion de l'état des applications avec les hooks React.
Mise en œuvre d'événements utilisateurs pour des interfaces interactives.
Application de styles complexes avec Emotion et CSS-in-JS.
Gestion de l'état global avec Redux et Recoil.
Compétence en tests unitaires avec Jest pour garantir la qualité du code.
Déploiement d'une application React sur une plateforme Cloud comme Firebase.
Contenu du cours
Plongez dans l'univers captivant de React. Explorez son évolution, comprenez les différentes versions et choisissez la meilleure méthode de configuration pour démarrer votre projet. Vous découvrirez également les bases essentielles des composants React et de JSX pour créer des interfaces utilisateur modernes et réactives.
Parlons de l'historique de React, de ses débuts à son évolution récente.
Découvrons les versions de React, apprenons à nous renseigner et à monter de version quand il le faudra.
Installons React sous forme de librairie Javascript, la manière la plus simple de faire du React, n'importe où.
Mettons en place pas à pas une application React à l'aide du CLI (Create React App) pour un démarrage rapide.
Voyons les concepts de base des composants React, leur utilité et leur structuration.
Découvrons le JSX (JavaScript XML), une extension de syntaxe utilisée dans React pour décrire l'apparence des interfaces utilisateur.
Apprenons à maitriser les technique de rendu et les conditions dans les applications React pour afficher dynamiquement du contenu.
Commençons d'abord par tout nettoyer pour disposer d'une base saine.
Découvrons comment créer de toute pièce un composant et l'afficher.
Il est important de bien comprendre le passage d'information, pour aller plus loin dans la composition.
Il est tout à fait possible de composer une vue et d'avoir des enfants dans des parents.
Afin d'avoir un projet déjà acceptable en terme de structure, nous allons préparer les différents composants.
Créons des classes et du style inline pour appliquer des styles en CSS.
En utilisant les techniques vues précédemment, stylons notre application entièrement.
Dans une application, nous aurons souvent besoin de gérer des enfants, auto-générés, parlons de boucles.
Comprenons l'importance de la gestion des événements dans les applications React et son utilisation pour rendre les applications interactives.
Apprenons la gestion d'événements de clic pour détecter et répondre aux clics de l'utilisateur sur un élément.
Apprenons à gérer les événements de survol pour détecter lorsque le curseur de la souris entre ou quitte un élément.
Apprenons à gérer les événements de formulaire tels que la soumission de formulaire ou les changements d'entrée.
Utilisons les événements de clavier pour détecter et répondre aux pressions de touches de l'utilisateur.
Apprenons à utiliser setTimeout et setInterval pour déclencher des événements après un certain délai.
Explorons les différentes façons de gérer l'état d'une application React en utilisant les props et les hooks.
Il est important de bien prendre en considération le cycle de vie des composants, élément essentiel de tout environnement Frontend.
Utilisons des props pour passer des données à un composant React et apprenons à créer des composants réutilisables.
Découvrons des technique pour passer un état entre les composants enfants et parents.
Découvrons le hook UseState pour gérer l'état dans les composants fonctionnels.
Grâce aux states et à CSS, il est possible de jouer sur l'interface, pour faire varier les éléments ou afficher des décorations spécifiques.
Jsx nous permet également de dynamiser en jouant sur les affichages conditionnelles, dans certains cas, c'est préférable.
Pour finaliser notre première interface complète, nous devons ajouter une tâche, une fois que l'information est soumise par l'utilisateur.
Il est tout à fait possible d'avoir un state de départ basé sur une donnée existante, voyons un exemple avec le storage du navigateur.
Pour que notre application soit entièrement fonctionnelle, la suppression d'une tâche sera la dernière étape.
Utilisons le hook useEffect pour gérer les effets primaires et secondaires dans les composants React.
Explorons des hooks supplémentaires tels que useCallback, useMemo, useContext, useReducer et useRef pour optimiser la gestion de l'état et améliorer la performance des composants React.
Les stores sont une manière bien plus simple de gérer l'état des composants au sein d'un application React, découvrons ici le plus connu, Redux et des alternatives intéressantes, comme Recoil.
Si vous utilisez des states globaux, alors les stores sont pour vous, ils permettent un meilleur découpage de l'architecture applicative.
Parlons de Recoil, la librairie de stores de Facebook, et pourquoi elle est intéressante.
Installons Recoil dans notre application et vérifions qu'il n'y a aucun effet de bord.
Maintenant que notre système de store est installé, il va falloir initialiser notre premier state.
Un store nous permet de stocker de la données et de la lire.
Avec les actions, nous allons mettre à jour le store et dynamiser notre application.
Dans certains cas, il sera important d'utiliser les capacité de chargement dans nos applications.
De nombreuses méthodes existent pour que votre application web soit en mesure de communiquer avec l'éxterieur, voyons Fetch et Axios.
Fetch est la solution la plus simple, car intégrée à l'api HTML5, mais elle est aussi assez limitée.
Axios est une librairie courante quand on parle d'appels HTTP, elle est complète et simple d'utilisation.
Suspense est une méthode très importante de React, pour afficher un contenu quand les composants chargent.
Pour disposer d'un exemple concret et complet, mettons en place Axios dans nos méthodes Recoil avec du Suspense.
Axios ne permet pas simplement de faire de la lecture en GET, il peut aussi nous permettre des appels avec de la données, en POST/PUT et même DELETE.
Découvrons Emotion, une bibliothèque CSS-in-JS populaire utilisée pour créer des styled components avec React.
Voyons les avantages d'utiliser des composants stylisés plutôt que du CSS éxterieur ou du css en ligne.
Avec Emotion, nous allons créer des composants à la volée.
Emotion nous permet de gérer les imbrications comme dans le style en React basique.
Quand on souhaite appliquer du style en pseudo-éléments, il est tout à fait possible de le faire avec Emotion.
Un composant Emotion peut facilement devenir dynamique, grâce aux props.
Il est tout à fait possible d'avoir du CSS, des composants provenant d'autres endroits en même temps qu'Emotion.
Pour naviguer de page en page, il est important de bénéficier d'un système simple de définition de routes.
La librairie react-router est une des meilleure solution pour bénéficier du routing dans son application.
Mettons en place un système de routing simple dans notre application, pour une page de contact.
Nous allons pouvoir très simplement créer de nouvelles pages.
Une route peut recevoir des paramètres et les transmettre à son composant.
Le layout permet de définir un gabarit de page et un emplacement où seront chargés les composants.
Avec une api simple, la librairie de routing nous permet de faire des liens aisément dans notre application.
Les test-unitaires sont importants pour garder une application propre et évolutive, découvrons le monde des TU.
Parlons de l'intêret de tester, des librairies et de ce que nous devons à tout prix tester pour garantir un logiciel de qualité.
Jest est la librairie la plus connue actuellement et la plus simple à utiliser, peu importe votre contexte.
Voyons ensemble comment implémenter un test sur un composant ou une méthode.
Dans certains cas, vos composants disposent de dépendances, Jest peut vous aider à les émuler facilement.
Avec les outils en ligne de commande et un peu de configuration, vous serez à même de générer des statistiques de couverture.
Pour finaliser une application React, il est important de comprendre les commandes de mise en production.
Avec les commande de build, il sera simple de construire un projet pour une mise en production.
Avant d'envoyer votre code en production, penser à le tester en local est une étape importante, pour ne rien casser.
Voyons comment mettre en place notre application sur un provider Cloud, tel que Firebase.
Découvrons des outils et librairies, pour aller plus loin dans votre apprentissage.
De nombreuses librairies existent pour gérer les formulaire, mais react-form-hook reste une des meilleures solutions.
Pour aller plus vite et disposer d'un set complet de composant, Material-UI est une solution plus qu'intéressante.
React nous propose des outils navigateur permettant d'améliorer notre expérience de développeur, installons les outils.
Enseignant
Julien Moulin
Fondateur & Formateur Js/Ts
Julien Moulin est un expert en développement full stack (JS/TS) et un leader technique reconnu. Il excelle dans l'adoption de technologies innovantes tout en répondant aux besoins clients. Son approche allie pragmatisme et innovation, avec une expertise couvrant les plateformes e-commerce, les applications métiers et la modernisation des architectures existantes. En mentor passionné, il partage ses connaissances avec pédagogie, encourage l’apprentissage continu, et inspire ses équipes à relever des défis ambitieux.
Vous aimerez aussi
Découvrez de fabuleux cours dans les mêmes sujets
