React : développez le front end de vos applications web et mobiles avec JavaScript

Auteur(s) :

Madani, Hakim Découvrir l'auteur

Résumé

Après avoir présenté le framework React, l'auteur décrit l'ensemble de ses fonctionnalités pour maîtriser les langages de programmation JavaScript, afin de développer le front end des applications web et mobiles. Avec des exemples concrets et des éléments complémentaires disponibles en téléchargement, ainsi que la version numérique. ©Electre 2024

Éditeur(s)
- Éditions ENI
Date
- C 2024
Notes
- La couv. porte en plus : "Informatique technique" ; "Version en ligne offerte ! pendant 1 an"
- Contient un "flashcode" permettant d'accéder à un contenu via Internet"
Langues
- Français
Description matérielle
- 1 vol. (316 p.) : ill. ; 21 cm
Collections
- Expert IT
Sujet(s)
ISBN
- 978-2-409-04326-0
Indice
- 681.230 Langages de script
Quatrième de couverture
- React
  Développez le Front End de vos applications web et mobiles avec JavaScript
  Découvrez l'univers de React avec ce livre 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.
Tables des matières
- - React
  - Développez le Front End de vos applications web et mobiles avec JavaScript
  - Nouvelle édition
  - Éditions Eni
  - Chapitre 1
  - Avant-propos
  - 1. Introduction17
  - 1.1 À qui s'adresse ce livre17
  - 1.2 Pourquoi choisir React18
  - 1.2.1 Réactivité18
  - 1.2.2 Composabilité18
  - 1.2.3 Communauté active18
  - 1.2.4 React Native19
  - 1.3 Comment utiliser ce livre19
  - 1.4 À propos des exemples de code20
  - 2. Qu'est-ce que React ?20
  - 2.1 Introduction à React20
  - 2.1.1 Origine de React20
  - 2.1.2 Objectif de React20
  - 2.1.3 Pourquoi React est-il si populaire ?20
  - 2.1.4 Principaux concepts de React21
  - 2.2 Philosophie de React22
  - 2.2.1 Composants : l'unité de base22
  - 2.2.2 Réactivité : mise à jour efficace de l'interface utilisateur23
  - 2.2.3 Composition : assemblage de composants réutilisables23
  - 2.2.4 Une approche déclarative23
  - 2.3 La communauté React24
  - 2.3.1 Projets open source24
  - 2.3.2 Contributeurs engagés ...25
  - 2.3.3 Événements et conférences25
  - 2.4 Versions de React et cycle de mise à jour25
  - 2.4.1 Les différentes versions de React25
  - 2.4.2 Changements majeurs et améliorations26
  - 2.4.3 Suivre les nouvelles versions26
  - 3. Structure du livre27
  - 3.1 Découverte de React27
  - 3.2 Gestion de l'état dans React27
  - 3.3 Développement mobile avec React Native27
  - 3.4 Aller plus loin avec React28
  - Chapitre 2
  - Bien démarrer avec React
  - 1. Notions essentielles de JavaScript29
  - 1.1 Le DOM (Document Object Model)30
  - 1.2 Définir une variable en JavaScript31
  - 1.3 Les types de valeurs32
  - 1.4 Chaînes de caractères34
  - 1.5 Tableaux35
  - 1.6 Objets36
  - 1.7 Classes38
  - 1.8 Fonctions fléchées40
  - 1.8.1 Syntaxe des fonctions fléchées40
  - 1.8.2 Comparaison entre une fonction traditionnelle et une fonction fléchée41
  - 1.8.3 Utilisation des fonctions fléchées dans React41
  - 1.9 Asynchronisme42
  - 1.9.1 Callbacks42
  - 1.9.2 Promesses (Promises)43
  - 1.9.3 Async/Await44
  - 2. Prérequis, concepts et outils pour développer44
  - 2.1 Installation des outils nécessaires44
  - 2.1.1 NodeJS44
  - 2.1.2 Éditeur45
  - 2.1.3 Navigateur web et outils de développement46
  - 3. Une application basique47
  - 3.1 Le minimum de code pour une application React47
  - 3.2 Les composants React48
  - 4. Environnement de développement50
  - 4.1 Introduction au JSX50
  - 4.2 Initialisation d'un projet avec Vite51
  - 4.3 Mise en place de Prettier dans VSCode51
  - 4.4 Configuration d'ESLint54
  - 4.5 Conclusion55
  - Chapitre 3
  - Découvrir le JSX
  - 1. Introduction au JSX57
  - 2. Syntaxe et éléments JSX60
  - 2.1 Éléments JSX60
  - 2.2 Attributs JSX61
  - 2.2.1 Attributs booléens61
  - 2.2.2 Attributs personnalisés62
  - 2.3 Éléments React et fragments63
  - 2.4 Commentaires JSX64
  - 2.5 Utilisation de JavaScript dans le JSX65
  - 3. Construire une interface avec des composants65
  - 3.1 Composition66
  - 3.2 Isolation des fonctionnalités67
  - 3.3 Profondeur de la composition70
  - 3.4 Bonnes pratiques71
  - 3.4.1 Découpage en composants réutilisables72
  - 3.4.2 Profondeur de composition raisonnable72
  - 3.4.3 Respect du principe de responsabilité unique72
  - 4. Les fragments JSX72
  - 4.1 Utilisation des fragments JSX73
  - 4.2 Fragment explicite74
  - 5. Expressions conditionnelles74
  - 5.1 L'opérateur ternaire75
  - 5.2 L'instruction if75
  - 6. Utiliser les listes et les clés76
  - 6.1 Les clés des éléments de liste76
  - 6.1.1 Pourquoi les clés sont-elles importantes ?76
  - 6.1.2 Comment attribuer des clés ?77
  - 6.2 Utiliser une liste77
  - 6.3 Les clés et les performances79
  - Chapitre 4
  - Les fondamentaux de React
  - 1. Les composants81
  - 1.1 Introduction aux composants81
  - 1.1.1 Types de composants81
  - 1.1.2 Créer un composant82
  - 1.1.3 Importer un composant83
  - 1.2 Utilisation des props84
  - 1.2.1 Passer des props à un composant84
  - 1.2.2 Utilisation des props dans le composant enfant85
  - 1.3 Différences entre composants fonctionnels et de classe86
  - 1.4 Cycle de vie des composants de classe87
  - 1.5 Composants contrôlés et non contrôlés88
  - 1.5.1 Composants contrôlés88
  - 1.5.2 Composants non contrôlés89
  - 1.5.3 Quand utiliser chaque approche ?90
  - 1.6 Composants à état (stateful) et sans état (stateless)90
  - 1.6.1 Composants à état91
  - 1.6.2 Composants sans état91
  - 1.6.3 Quand utiliser chaque type de composant ?92
  - 1.7 Composition et hiérarchie des composants92
  - 2. Les props et l'état local93
  - 2.1 Introduction aux props et à l'état local93
  - 2.1.1 Props94
  - 2.1.2 Le State95
  - 2.2 Utilisation des props97
  - 2.2.1 Passer des données de parent à enfant97
  - 2.2.2 Utiliser des props par défaut98
  - 2.3 L'état local99
  - 2.3.1 Utilisation du hook useState pour gérer l'état local99
  - 2.3.2 Modifier l'état local avec setState (pour les composants de classe)100
  - 2.3.3 Comparaison entre props et état local102
  - 3. Les hooks103
  - 3.1 Introduction aux hooks103
  - 3.2 Les problèmes avec les composants de classe103
  - 3.3 Les principaux hooks intégrés104
  - 3.3.1 useState104
  - 3.3.2 useEffect105
  - 3.3.3 useContext107
  - 3.3.4 useReducer109
  - 3.3.5 useCallback ...110
  - 3.3.6 useMemo112
  - 3.3.7 useRef114
  - 3.3.8 useImperativeHandle115
  - 3.3.9 useLayoutEffect117
  - 3.3.10 useDebugValue118
  - 3.4 Création de vos propres hooks120
  - 3.5 Bonnes pratiques pour l'utilisation des hooks121
  - 3.5.1 Respecter l'ordre des hooks et ne pas les appeler conditionnellement123
  - 3.5.2 Diviser les responsabilités des hooks pour éviter la complexité124
  - 3.6 Limitations des hooks126
  - 4. Le style126
  - 4.1 Introduction au style en React126
  - 4.1.1 Utilisation des styles en ligne (Inline Styles)126
  - 4.1.2 Utilisation de classes CSS127
  - 4.1.3 Utilisation de modules CSS128
  - 4.1.4 Utilisation de bibliothèques de styles (ex. Bootstrap, Material-UI)130
  - 4.2 Tailwind131
  - 4.3 La gestion des classes conditionnelles132
  - 4.4 Les animations et transitions136
  - 5. Le routage138
  - 5.1 Introduction au routage en React138
  - 5.1.1 Comprendre le concept de routage dans une application web138
  - 5.1.2 React Router139
  - 5.2 Utilisation des paramètres de l'URL (URL Parameters)140
  - 6. Les formulaires141
  - 6.1 Utilisation des formulaires contrôlés141
  - 6.1.1 Gestion de l'état du formulaire avec useState142
  - 6.1.2 Validation des champs du formulaire143
  - 6.1.3 Soumission du formulaire144
  - 6.2 Utilisation des formulaires non contrôlés146
  - 6.2.1 Définition des formulaires non contrôlés146
  - 6.2.2 Gestion des données du formulaire avec les références (refs)147
  - 6.2.3 Accès aux valeurs du formulaire soumises148
  - 6.3 Utilisation des composants de formulaire149
  - 6.3.1 Présentation de Formik149
  - 6.3.2 Installation et configuration de Formik150
  - 6.3.3 Création d'un formulaire avec Formik150
  - 6.3.4 Validation des champs avec Formik151
  - 6.4 Les champs de formulaire avancés153
  - 6.4.1 Champ de sélection (select)153
  - 6.4.2 Cases à cocher (checkbox). et boutons radio (radio button)154
  - 6.4.3 Champ de fichier (file input)156
  - 6.4.4 Champs de date (date picker)157
  - 6.5 La validation des formulaires159
  - 6.6 React-hook-form, l'alternative à Formik161
  - 6.7 La gestion des formulaires complexes162
  - 6.7.1 Formulaires avec champs dépendants162
  - 6.7.2 Formulaires avec étapes163
  - 6.7.3 Formulaires avec listes dynamiques (ajout/suppression de champs)166
  - 7. Optimiser les performances d'une application169
  - 7.1 Comprendre les enjeux de performance169
  - 7.1.1 Réactivité de l'interface utilisateur170
  - 7.1.2 Vitesse de chargement initial170
  - 7.1.3 Gestion de l'état170
  - 7.1.4 Rendu non nécessaire170
  - 7.1.5 Gestion des requêtes et des données170
  - 7.1.6 Rendu conditionnel171
  - 7.2 Mise en cache et mémoïsation171
  - 7.3 Lazy loading et Suspense171
  - 7.4 Virtualisation172
  - 7.5 Code splitting173
  - 7.6 Analyse des performances173
  - 7.7 Test de performance174
  - Chapitre 5
  - Gestion du state
  - 1. Introduction175
  - 2. Les différentes solutions175
  - 2.1 L'état serveur (server state) et l'état client (client state)176
  - 2.2 Le Context API176
  - 2.3 Redux176
  - 2.4 MobX177
  - 2.5 Recoil177
  - 2.6 Zustand177
  - 3. L'association du contexte et des hooks178
  - 3.1 Création d'un contexte178
  - 3.2 Utilisation de Context avec le hook useContext179
  - 3.3 Utilisation de useReducer pour des états plus complexes180
  - 4. Redux182
  - 4.1 Les éléments-clés de Redux182
  - 4.1.1 Actions182
  - 4.1.2 Réducteur (reducer)183
  - 4.1.3 Store183
  - 4.1.4 Redux Toolkit184
  - 4.2 Création d'un store184
  - 4.3 Utiliser createSlice185
  - 4.4 Asynchronisme avec createAsyncThunk186
  - 4.5 Testabilité187
  - 5. MobX188
  - 5.1 Principes de base de MobX188
  - 5.1.1 Observables188
  - 5.1.2 Actions189
  - 5.1.3 Réactions189
  - 5.1.4 Computed values189
  - 5.2 MobX avec React190
  - 5.3 Conclusion191
  - Chapitre 6
  - Gestion du state serveur avec React Query
  - 1. Introduction193
  - 2. Installation193
  - 2.1 Installer les dépendances193
  - 2.2 Mise en place du provider194
  - 3. Requêtes (queries)195
  - 3.1 La fonction de fetch195
  - 3.2 Utilisation de useQuery196
  - 4. Mutations198
  - 5. Invalidation200
  - 5.1 Différents moyens d'invalider une requête200
  - 5.2 Autres moyens d'invalidation201
  - 5.3 Invalidations conditionnelles201
  - 6. Utiliser les outils de développement dédiés202
  - Chapitre 7
  - Développer pour le mobile avec React Native
  - 1. Introduction205
  - 2. Présentation de React Native205
  - 2.1 Composants natifs205
  - 2.2 Réutilisation de la logique206
  - 2.3 Accès aux fonctionnalités du périphérique206
  - 3. Créer une application avec Expo206
  - 3.1 L'outil create-expo-app207
  - 3.2 L'application Expo Go207
  - 4. Mettre en place la navigation209
  - 4.1 Installer les dépendances et configurer le projet209
  - 4.2 Le répertoire app211
  - 4.3 Naviguer entre les écrans212
  - 5. Ajouter du style213
  - 5.1 Utilisation de styles en ligne213
  - 5.2 Utilisation de styles externes.214
  - 5.3 Styles conditionnels215
  - 5.4 Utiliser Tailwind216
  - Chapitre 8
  - Fonctionnalités avancées avec React Native
  - 1. Introduction219
  - 2. Utiliser la géolocalisation et accéder aux contacts220
  - 2.1 Utiliser la géolocalisation220
  - 2.1.1 Installer le module de géolocalisation220
  - 2.1.2 Utilisation de la géolocalisation220
  - 2.2 Accéder aux contacts222
  - 2.2.1 Installer le module de contacts222
  - 2.2.2 Utilisation de l'accès aux contacts223
  - 3. Exemple : utiliser un thème clair ou sombre avec l'API Context225
  - 4. Conclusion228
  - Chapitre 9
  - Next.js, le framework React par Vercel
  - 1. Introduction229
  - 1.1 Pourquoi Next.js ?229
  - 1.1.1 Rendu côté serveur (SSR) et génération de site statique (SSG)229
  - 1.1.2 Routage simple et intuitif230
  - 1.1.3 Préchargement des pages230
  - 1.1.4 Optimisation des images230
  - 1.1.5 Support CSS-in-JS et SCSS230
  - 2. Création d'un site avec Next.js231
  - 2.1 Création d'un projet Next.js231
  - 2.2 Création de pages232
  - 2.3 Lancement de l'application233
  - 3. Naviguer entre les pages233
  - 3.1 Utilisation du composant Link233
  - 3.2 Route dynamique234
  - 3.3 Naviguer avec useRouter235
  - 3.4 Navigation programmative235
  - 4. Gestion des assets236
  - 4.1 Dossiers publics236
  - 4.2 Chargement des images237
  - 5. Utiliser SWR, l'équivalent de React Query238
  - 5.1 Installation de SWR238
  - 5.2 Utilisation de SWR239
  - 5.3 Options de configuration avancées240
  - 6. Rendu côté serveur et génération de site statique241
  - 6.1 Rendu côté serveur (SSR)241
  - 6.2 Génération de site statique (SSG)242
  - 6.3 Rafraîchissement automatique (ISR)243
  - 7. Présentation des React Server Components (RSC)243
  - Chapitre 10
  - Introduction à Storybook
  - 1. Découverte et installation247
  - 1.1 Qu'est-ce que Storybook ?247
  - 1.2 Installation de Storybook248
  - 1.3 Création de stories249
  - 1.4 Lancement de Storybook249
  - 1.5 Ce qu'offre Storybook250
  - 2. Création d'un composant250
  - 2.1 Création d'un composant250
  - 2.2 Visualisation et test du composant252
  - 2.3 L'utilité de la création de composants dans Storybook252
  - 3. Utiliser des stories253
  - 3.1 Visualisation et test de la story253
  - 3.2 Avantages de la création de stories253
  - 4. Utiliser des add-ons254
  - 4.1 Installation d'add-ons254
  - 4.2 Utilisation d'add-ons 255
  - 4.3 Ce qu'offre l'utilisation d'add-ons255
  - 5. Conclusion256
  - Chapitre 11
  - Connecter React à une API GraphQL
  - 1. Présentation de GraphQL et premières requêtes257
  - 1.1 Qu'est-ce que GraphQL ?257
  - 1.2 Premières requêtes GraphQL avec React258
  - 2. Création d'une API avec Hasura262
  - 3. Appel d'une API avec React et Apollo Client266
  - 3.1 Configuration d'Apollo Client266
  - 3.2 Appel de l'API créée avec Hasura266
  - 4. Conclusion267
  - Chapitre 12
  - Maîtriser les design patterns React
  - 1. Introduction269
  - 2. Higher-Order Components270
  - 2.1 Fonctionnement des Higher-Order Components270
  - 2.2 Ce qu'offrent les Higher-Order Components271
  - 2.3 Cas d'utilisation des Higher-Order Components271
  - 2.4 Limitations et considérations272
  - 2.4.1 Les HOC en cascade272
  - 2.4.2 Conflit de props273
  - 3. Render props274
  - 3.1 Fonctionnement des render props274
  - 3.2 Qualités des render props275
  - 3.3 Cas d'utilisation des render props275
  - 3.3.1 Contrôle de composants interactifs275
  - 3.3.2 Gestion des états ou des données276
  - 3.4 Limitations et considérations277
  - 4. Provider278
  - 4.1 Fonctionnement du Provider Pattern278
  - 4.2 Avantages du Provider Pattern278
  - 4.3 Cas d'utilisation du Provider Pattern279
  - 4.4 Limitations et considérations279
  - 5. Composants container et de présentation280
  - 5.1 Composants container280
  - 5.2 Composants de présentation281
  - 5.3 Ce qu'offrent les composants container et de présentation281
  - 5.4 Cas d'utilisation des composants container et de présentation282
  - 5.5 Limitations et considérations282
  - 6. Hooks282
  - 6.1 Les bases du pattern Hooks283
  - 6.2 Hooks personnalisés283
  - 6.3 Extraction de logique284
  - Chapitre 13
  - Tester une application React
  - 1. Utiliser Jest et React Testing Library287
  - 1.1 Introduction à Jest287
  - 1.2 Installation de Jest288
  - 1.3 Ecriture de tests avec Jest et React Testing Library288
  - 1.4 Exécution des tests289
  - 1.5 Jest et React Testing Library289
  - 1.6 Limitations et considérations ..289
  - 2. Ecrire son premier test290
  - 2.1 Configuration de base290
  - 2.2 Écriture de votre premier test290
  - 2.3 Explication du test291
  - 2.4 Exécution du test291
  - 2.5 Pourquoi ce test simple ?292
  - 2.6 Limitations et considérations292
  - 3. Tester les composants avec Cypress292
  - 3.1 Configuration de base293
  - 3.2 Installation de Cypress293
  - 3.3 Écriture de tests avec Cypress293
  - 3.4 Exécution des tests294
  - 3.5 Ce qu'offre Cypress294
  - 3.6 Limitations et considérations294
  - 3.7 Playwright, l'alternative à Cypress295
  - 4. Conclusion296
  - 4.1 L'importance des tests296
  - 4.2 Choix de la méthode de test296
  - 4.3 Bonnes pratiques de test296
  - 4.4 Intégration et déploiement continus297
  - 4.5 Évolution des tests297
  - Conclusion
  - 1. Aller plus loin299
  - 1.1 Explorer des domaines connexes299
  - 1.2 Contribuer à la communauté300
  - 1.3 Créer des projets personnels300
  - 1.4 Participer à des événements et des conférences300
  - 1.5 Expérimenter avec de nouvelles technologies300
  - 2. Déployer avec Netlify301
  - 2.1 Création d'un projet et build301
  - 2.2 Création d'un compte Netlify301
  - 2.3 Configuration de déploiement301
  - 2.4 Déploiement302
  - 3. Utiliser une bibliothèque de composants303
  - 3.1 Pourquoi utiliser une bibliothèque de composants ?303
  - 3.2 Exemples de bibliothèques de composants303
  - 3.3 Limitations304
  - 4. Ressources pour aller plus loin304
  - 4.1 Documentation officielle304
  - 4.2 Blogs305
  - 4.3 Veille technologique305
  - Index307
Origine de la notice:
- Electre