Découvrez l’univers de React avec ce support incontournable des­tiné 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 utili­sateur 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 com­pré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 opti­male, 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.

Téléchargements

• Des fichiers complémentaires (1 393 Ko)

Avant-propos

1. 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
2. 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
3. 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

1. 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
2. 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
3. Une application basique
   1. 1. Le minimum de code pour une application React
   2. 2. Les composants React
4. 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

1. Introduction au JSX
2. 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
3. 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
4. Les fragments JSX
   1. 1. Utilisation des fragments JSX
   2. 2. Fragment explicite
5. Expressions conditionnelles
   1. 1. L’opérateur ternaire
   2. 2. L’instruction if
6. 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

1. 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
2. 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
3. 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
4. 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
5. 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)
6. 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)
7. 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

1. Introduction
2. 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
3. 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
4. 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é
5. 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

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

Développer pour le mobile avec React Native

1. Introduction
2. 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
3. Créer une application avec Expo
   1. 1. L’outil create-expo-app
   2. 2. L’application Expo Go
4. 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
5. 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

1. Introduction
2. 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
3. Exemple : utiliser un thème clair ou sombre avec l'API Context
4. Conclusion

Next.js, le framework React par Vercel

1. 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
2. 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
3. Naviguer entre les pages
   1. 1. Utilisation du composant Link
   2. 2. Route dynamique
   3. 3. Naviguer avec useRouter
   4. 4. Navigation programmative
4. Gestion des assets
   1. 1. Dossiers publics
   2. 2. Chargement des images
5. Utiliser SWR, l'équivalent de React Query
   1. 1. Installation de SWR
   2. 2. Utilisation de SWR
   3. 3. Options de configuration avancées
6. 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)
7. Présentation des React Server Components (RSC)

Introduction à Storybook

1. 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
2. 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
3. Utiliser des stories
   1. 1. Visualisation et test de la story
   2. 2. Avantages de la création de stories
4. 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
5. Conclusion

Connecter React à une API GraphQL

1. Présentation de GraphQL et premières requêtes
   1. 1. Qu’est-ce que GraphQL ?
   2. 2. Premières requêtes GraphQL avecReact
2. Création d’une API avec Hasura
3. 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
4. Conclusion

Maîtriser les design patterns React

1. Introduction
2. 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
3. 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
4. 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
5. 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
6. Hooks
   1. 1. Les bases du pattern Hooks
   2. 2. Hooks personnalisés
   3. 3. Extraction de logique

Tester une application React

1. 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
2. É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
3. 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
4. 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

1. 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
2. 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
3. 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
4. Ressources pour aller plus loin
   1. 1. Documentation officielle
   2. 2. Blogs
   3. 3. Veille technologique