React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) - Version en ligne

Hakim MADANI

Découvrez l’univers de React avec ce support incontournable destiné aux développeurs qui offre une approche pédagogique progressive et concrète pour se familiariser avec cette puissante bibliothèque JavaScript dédiée à la création d’interfaces utilisateur dynamiques et interactives. Une solide base en HTML, CSS et JavaScript facilitera la lecture de ce livre. Chaque chapitre est enrichi de conseils pratiques, d’exercices stimulants et d’études de cas réelles pour une compréhension...

Aperçu de la version papier

Niveau Confirmé à Expert
Parution février 2024

Présentation

Découvrez l’univers de React avec ce support incontournable destiné aux développeurs qui offre une approche pédagogique progressive et concrète pour se familiariser avec cette puissante bibliothèque JavaScript dédiée à la création d’interfaces utilisateur dynamiques et interactives.

Une solide base en HTML, CSS et JavaScript facilitera la lecture de ce livre. Chaque chapitre est enrichi de conseils pratiques, d’exercices stimulants et d’études de cas réelles pour une compréhension approfondie des concepts fondamentaux de React.

Vous débuterez en explorant les bases essentielles de JavaScript pour rapidement créer vos premiers composants React et en maîtriser les concepts incontournables. Une fois les outils de développement installés, vous découvrirez le JSX, les props, les hooks, l’état local, les formulaires et bien d’autres concepts clés. Vous serez également guidé dans l’exploitation de l’écosystème React et explorerez la gestion du state avec Redux et celle du cache avec React Query.

Vous apprendrez à développer pour le mobile avec React Native en exploitant des fonctionnalités avancées permettant notamment d’intégrer des éléments tels que la géolocalisation et la gestion des contacts. Pour une expérience utilisateur optimale, l’auteur vous guidera dans l’utilisation de Storybook, ainsi que dans la connexion à une API GraphQL pour des requêtes efficaces.

Les design patterns, fréquemment utilisés en React, ainsi que les tests unitaires seront également explorés en profondeur, vous offrant les compétences nécessaires pour concevoir des applications robustes et fiables.

Caractéristiques

HTML
ISBN : 978-2-409-04327-7
EAN : 9782409043277
Ref. ENI : LNEIMREACT

Téléchargements

Des fichiers complémentaires (1 393 Ko)

Table des matières

Avant-propos

Introduction
1. 1. À qui s’adresse ce livre
2. 2. Pourquoi choisir React
  1. a. Réactivité
  2. b. Composabilité
  3. c. Communauté active
  4. d. React Native
3. 3. Comment utiliser ce livre
4. 4. À propos des exemples de code
Qu'est-ce que React ?
1. 1. Introduction à React
  1. a. Origine de React
  2. b. Objectif de React
  3. c. Pourquoi React est-il si populaire ?
  4. d. Principaux concepts de React
2. 2. Philosophie de React
  1. a. Composants : l’unité de base
  2. b. Réactivité : mise à jourefficace de l’interface utilisateur
  3. c. Composition : assemblage de composants réutilisables
  4. d. Une approche déclarative
3. 3. La communauté React
  1. a. Projets open source
  2. b. Contributeurs engagés
  3. c. Événements et conférences
4. 4. Versions de React et cycle de mise à jour
  1. a. Les différentes versions de React
  2. b. Changements majeurs et améliorations
  3. c. Suivre les nouvelles versions
Structure du livre
1. 1. Découverte de React
2. 2. Gestion de l’état dans React
3. 3. Développement mobile avec React Native
4. 4. Aller plus loin avec React

Bien démarrer avec React

Notions essentielles de JavaScript
1. 1. Le DOM (Document Object Model)
2. 2. Définir une variable en JavaScript
3. 3. Les types de valeurs
4. 4. Chaînes de caractères
5. 5. Tableaux
6. 6. Objets
7. 7. Classes
8. 8. Fonctions fléchées
  1. a. Syntaxe des fonctions fléchées
  2. b. Comparaison entre une fonction traditionnelle et unefonction fléchée
  3. c. Utilisation des fonctions fléchéesdans React
9. 9. Asynchronisme
  1. a. Callbacks
  2. b. Promesses (Promises)
  3. c. Async/Await
Prérequis, concepts et outils pour développer
1. 1. Installation des outils nécessaires
  1. a. NodeJS
  2. b. Éditeur
  3. c. Navigateur web et outils de développement
Une application basique
1. 1. Le minimum de code pour une application React
2. 2. Les composants React
Environnement de développement
1. 1. Introduction au JSX
2. 2. Initialisation d’un projet avec Vite
3. 3. Mise en place de Prettier dans VSCode
4. 4. Configuration d’ESLint
5. 5. Conclusion

Découvrir le JSX

Introduction au JSX
Syntaxe et éléments JSX
1. 1. Éléments JSX
2. 2. Attributs JSX
  1. a. Attributs booléens
  2. b. Attributs personnalisés
3. 3. Éléments React et fragments
4. 4. Commentaires JSX
5. 5. Utilisation de JavaScript dans le JSX
Construire une interface avec des composants
1. 1. Composition
2. 2. Isolation des fonctionnalités
3. 3. Profondeur de la composition
4. 4. Bonnes pratiques
  1. a. Découpage en composants réutilisables
  2. b. Profondeur de composition raisonnable
  3. c. Respect du principe de responsabilité unique
Les fragments JSX
1. 1. Utilisation des fragments JSX
2. 2. Fragment explicite
Expressions conditionnelles
1. 1. L’opérateur ternaire
2. 2. L’instruction if
Utiliser les listes et les clés
1. 1. Les clés des éléments deliste
  1. a. Pourquoi les clés sont-elles importantes ?
  2. b. Comment attribuer des clés ?
2. 2. Utiliser une liste
3. 3. Les clés et les performances

Les fondamentaux de React

Les composants
1. 1. Introduction aux composants
  1. a. Types de composants
  2. b. Créer un composant
  3. c. Importer un composant
2. 2. Utilisation des props
  1. a. Passer des props à un composant
  2. b. Utilisation des props dans le composant enfant
3. 3. Différences entre composants fonctionnelset de classe
4. 4. Cycle de vie des composants de classe
5. 5. Composants contrôlés et non contrôlés
  1. a. Composants contrôlés
  2. b. Composants non contrôlés
  3. c. Quand utiliser chaque approche ?
6. 6. Composants à état (stateful) etsans état (stateless)
  1. a. Composants à état
  2. b. Composants sans état
  3. c. Quand utiliser chaque type de composant ?
7. 7. Composition et hiérarchie des composants
Les props et l'état local
1. 1. Introduction aux props et à l’étatlocal
  1. a. Props
  2. b. Le state
2. 2. Utilisation des props
  1. a. Passer des données de parent à enfant
  2. b. Utiliser des props par défaut
3. 3. L’état local
  1. a. Utilisation du hook useState pour gérer l’étatlocal
  2. b. Modifier l’état local avec setState (pourles composants de classe)
  3. c. Comparaison entre props et état local
Les hooks
1. 1. Introduction aux hooks
2. 2. Les problèmes avec les composants de classe
3. 3. Les principaux hooks intégrés
  1. a. useState
  2. b. useEffect
  3. c. useContext
  4. d. useReducer
  5. e. useCallback
  6. f. useMemo
  7. g. useRef
  8. h. useImperativeHandle
  9. i. useLayoutEffect
  10. j. useDebugValue
4. 4. Création de vos propres hooks
5. 5. Bonnes pratiques pour l’utilisation des hooks
  1. a. Respecter l’ordre des hooks et ne pas les appelerconditionnellement
  2. b. Diviser les responsabilités des hooks pour éviterla complexité
6. 6. Limitations des hooks
Le style
1. 1. Introduction au style en React
  1. a. Utilisation des styles en ligne (Inline Styles)
  2. b. Utilisation de classes CSS
  3. c. Utilisation de modules CSS
  4. d. Utilisation de bibliothèques de styles (ex.Bootstrap, Material-UI)
2. 2. Tailwind
3. 3. La gestion des classes conditionnelles
4. 4. Les animations et transitions
Le routage
1. 1. Introduction au routage en React
  1. a. Comprendre le concept de routage dans une applicationweb
  2. b. React Router
2. 2. Utilisation des paramètres de l’URL (URLParameters)
Les formulaires
1. 1. Utilisation des formulaires contrôlés
  1. a. Gestion de l’état du formulaire avec useState
  2. b. Validation des champs du formulaire
  3. c. Soumission du formulaire
2. 2. Utilisation des formulaires non contrôlés
  1. a. Définition des formulaires non contrôlés
  2. b. Gestion des données du formulaire avec lesréférences (refs)
  3. c. Accès aux valeurs du formulaire soumises
3. 3. Utilisation des composants de formulaire
  1. a. Présentation de Formik
  2. b. Installation et configuration de Formik
  3. c. Création d’un formulaire avec Formik
  4. d. Validation des champs avec Formik
4. 4. Les champs de formulaire avancés
  1. a. Champ de sélection (select)
  2. b. Cases à cocher (checkbox) et boutons radio(radio button)
  3. c. Champ de fichier (file input)
  4. d. Champs de date (date picker)
5. 5. La validation des formulaires
6. 6. React-hook-form, l’alternative à Formik
7. 7. La gestion des formulaires complexes
  1. a. Formulaires avec champs dépendants
  2. b. Formulaires avec étapes
  3. c. Formulaires avec listes dynamiques (ajout/suppressionde champs)
Optimiser les performances d'une application
1. 1. Comprendre les enjeux de performance
  1. a. Réactivité de l’interface utilisateur
  2. b. Vitesse de chargement initial
  3. c. Gestion de l’état
  4. d. Rendu non nécessaire
  5. e. Gestion des requêtes et des données
  6. f. Rendu conditionnel
2. 2. Mise en cache et mémoïsation
3. 3. Lazy loading et Suspense
4. 4. Virtualisation
5. 5. Code splitting
6. 6. Analyse des performances
7. 7. Test de performance

Gestion du state

Introduction
Les différentes solutions
1. 1. L’état serveur (server state) et l’étatclient (client state)
2. 2. Le Context API
3. 3. Redux
4. 4. MobX
5. 5. Recoil
6. 6. Zustand
L'association du contexte et des hooks
1. 1. Création d’un contexte
2. 2. Utilisation de Context avec le hook useContext
3. 3. Utilisation de useReducer pour des étatsplus complexes
Redux
1. 1. Les éléments-clés de Redux
  1. a. Actions
  2. b. Réducteur (reducer)
  3. c. Store
  4. d. Redux Toolkit
2. 2. Création d’un store
3. 3. Utiliser createSlice
4. 4. Asynchronisme avec createAsyncThunk
5. 5. Testabilité
MobX
1. 1. Principes de base de MobX
  1. a. Observables
  2. b. Actions
  3. c. Réactions
  4. d. Computed values
2. 2. MobX avec React
3. 3. Conclusion

Gestion du state serveur avec React Query

Introduction
Installation
1. 1. Installer les dépendances
2. 2. Mise en place du provider
Requêtes (queries)
1. 1. La fonction de fetch
2. 2. Utilisation de useQuery
Mutations
Invalidation
1. 1. Différents moyens d’invalider une requête
2. 2. Autres moyens d’invalidation
3. 3. Invalidations conditionnelles
Utiliser les outils de développement dédiés

Développer pour le mobile avec React Native

Introduction
Présentation de React Native
1. 1. Composants natifs
2. 2. Réutilisation de la logique
3. 3. Accès aux fonctionnalités du périphérique
Créer une application avec Expo
1. 1. L’outil create-expo-app
2. 2. L’application Expo Go
Mettre en place la navigation
1. 1. Installer les dépendances et configurer leprojet
2. 2. Le répertoire app
3. 3. Naviguer entre les écrans
Ajouter du style
1. 1. Utilisation de styles en ligne
2. 2. Utilisation de styles externes
3. 3. Styles conditionnels
4. 4. Utiliser Tailwind

Fonctionnalités avancées avec React Native

Introduction
Utiliser la géolocalisation et accéder aux contacts
1. 1. Utiliser la géolocalisation
  1. a. Installer le module de géolocalisation
  2. b. Utilisation de la géolocalisation
2. 2. Accéder aux contacts
  1. a. Installer le module de contacts
  2. b. Utilisation de l’accès aux contacts
Exemple : utiliser un thème clair ou sombre avec l'API Context
Conclusion

Next.js, le framework React par Vercel

Introduction
1. 1. Pourquoi Next.js ?
  1. a. Rendu côté serveur (SSR) et générationde site statique (SSG)
  2. b. Routage simple et intuitif
  3. c. Préchargement des pages
  4. d. Optimisation des images
  5. e. Support CSS-in-JS et SCSS
Création d'un site avec Next.js
1. 1. Création d’un projet Next.js
2. 2. Création de pages
3. 3. Lancement de l’application
Naviguer entre les pages
1. 1. Utilisation du composant Link
2. 2. Route dynamique
3. 3. Naviguer avec useRouter
4. 4. Navigation programmative
Gestion des assets
1. 1. Dossiers publics
2. 2. Chargement des images
Utiliser SWR, l'équivalent de React Query
1. 1. Installation de SWR
2. 2. Utilisation de SWR
3. 3. Options de configuration avancées
Rendu côté serveur et génération de site statique
1. 1. Rendu côté serveur (SSR)
2. 2. Génération de site statique (SSG)
3. 3. Rafraîchissement automatique (ISR)
Présentation des React Server Components (RSC)

Introduction à Storybook

Découverte et installation
1. 1. Qu’est-ce que Storybook ?
2. 2. Installation de Storybook
3. 3. Création de stories
4. 4. Lancement de Storybook
5. 5. Ce qu’offre Storybook
Création d'un composant
1. 1. Création d’un composant
2. 2. Visualisation et test du composant
3. 3. L’utilité de la création de composantsdans Storybook
Utiliser des stories
1. 1. Visualisation et test de la story
2. 2. Avantages de la création de stories
Utiliser des add-ons
1. 1. Installation d’add-ons
2. 2. Utilisation d’add-ons
3. 3. Ce qu’offre l’utilisation d’add-ons
Conclusion

Connecter React à une API GraphQL

Présentation de GraphQL et premières requêtes
1. 1. Qu’est-ce que GraphQL ?
2. 2. Premières requêtes GraphQL avecReact
Création d’une API avec Hasura
Appel d’une API avec React et Apollo Client
1. 1. Configuration d’Apollo Client
2. 2. Appel de l’API créée avec Hasura
Conclusion

Maîtriser les design patterns React

Introduction
Higher-Order Components
1. 1. Fonctionnement des Higher-Order Components
2. 2. Ce qu’offrent les Higher-Order Components
3. 3. Cas d’utilisation des Higher-Order Components
4. 4. Limitations et considérations
  1. a. Les HOC en cascade
  2. b. Conflit de props
Render props
1. 1. Fonctionnement des render props
2. 2. Qualités des render props
3. 3. Cas d’utilisation des render props
  1. a. Contrôle de composants interactifs
  2. b. Gestion des états ou des données
4. 4. Limitations et considérations
Provider
1. 1. Fonctionnement du Provider Pattern
2. 2. Avantages du Provider Pattern
3. 3. Cas d’utilisation du Provider Pattern
4. 4. Limitations et considérations
Composants container et de présentation
1. 1. Composants container
2. 2. Composants de présentation
3. 3. Ce qu’offrent les composants container et de présentation
4. 4. Cas d’utilisation des composants container et de présentation
5. 5. Limitations et considérations
Hooks
1. 1. Les bases du pattern Hooks
2. 2. Hooks personnalisés
3. 3. Extraction de logique

Tester une application React

Utiliser Jest et React Testing Library
1. 1. Introduction à Jest
2. 2. Installation de Jest
3. 3. Écriture de tests avec Jest et React TestingLibrary
4. 4. Exécution des tests
5. 5. Jest et React Testing Library
6. 6. Limitations et considérations
Écrire son premier test
1. 1. Configuration de base
2. 2. Écriture de votre premier test
3. 3. Explication du test
4. 4. Exécution du test
5. 5. Pourquoi ce test simple ?
6. 6. Limitations et considérations
Tester les composants avec Cypress
1. 1. Configuration de base
2. 2. Installation de Cypress
3. 3. Écriture de tests avec Cypress
4. 4. Exécution des tests
5. 5. Ce qu’offre Cypress
6. 6. Limitations et considérations
7. 7. Playwright, l’alternative à Cypress
Conclusion
1. 1. L’importance des tests
2. 2. Choix de la méthode de test
3. 3. Bonnes pratiques de test
4. 4. Intégration et déploiement continus
5. 5. Évolution des tests

Conclusion

Aller plus loin
1. 1. Explorer des domaines connexes
2. 2. Contribuer à la communauté
3. 3. Créer des projets personnels
4. 4. Participer à des événementset des conférences
5. 5. Expérimenter avec de nouvelles technologies
Déployer avec Netlify
1. 1. Création d’un projet et build
2. 2. Création d’un compte Netlify
3. 3. Configuration de déploiement
4. 4. Déploiement
Utiliser une bibliothèque de composants
1. 1. Pourquoi utiliser une bibliothèque de composants ?
2. 2. Exemples de bibliothèques de composants
3. 3. Limitations
Ressources pour aller plus loin
1. 1. Documentation officielle
2. 2. Blogs
3. 3. Veille technologique

Auteur

Hakim MADANI

Aujourd’hui Développeur Front-end chez la Société Générale, Hakim Madani a plus de 10 ans d'expérience dans le développement Front End au sein de grandes entreprises. Il s'est spécialisé et a acquis une solide expertise autour de React. Tout au long de sa carrière, il a collaboré sur une multitude de projets, aidant ainsi des startups, PME et grandes structures à réaliser leurs produits numériques. Aujourd'hui, désireux de partager son savoir et d'accompagner d'autres développeurs dans leur parcours, il fait profiter le lecteur de toute son expertise sur React.