React Développez le Front End de vos applications web et mobiles avec JavaScript

Présentation

Ce livre s'adresse aux développeurs qui souhaitent lever la complexité apparente du framework Front End React pour réaliser des applications web et mobiles bien architecturées et aisées à maintenir. Pour bien appréhender la lecture de ce livre, un minimum de connaissances sur le langage JavaScript, et en particulier sur les nouveautés apportées par ES2015, est un plus.

L'auteur commence par présenter les fonctionnalités natives de React avant d'expliquer comment la bibliothèque Redux permet de structurer et développer des applications plus complexes, notamment grâce aux apports de Redux Saga. Puis le lecteur étudie le développement mobile avec React Native, en détaillant notamment la mise en place de listes ou de la navigation.

Dans la suite du livre, l'auteur poursuit avec des notions plus avancées du développement avec React telles que le routage, la gestion de formulaires, les problématiques de sécurité ou l'utilisation de Firebase pour l'authentification ou le stockage de données distantes. L'auteur présente également GraphQL comme alternative à Firebase pour permettre l'appel à une API.

Dans les derniers chapitres, le lecteur trouvera les informations nécessaires pour développer des composants plus faciles à maintenir grâce aux hooks, ainsi que des pistes pour apprendre à tester une application développée avec React et Redux.

Tout au long du livre, les notions présentées sont accompagnées d'exemples concrets que le lecteur pourra mettre en pratique au fil de sa lecture. Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.

Quizinclus dans
la version en ligne !

Testez vos connaissances à l'issue de chaque chapitre
Validez vos acquis

Table des matières

Avant-propos

1. React
2. À qui s’adresse ce livre ?
3. Que trouverez-vous dans ce livre ?
4. À propos des exemples
5. Rester informé et en savoir plus

Découverte de React

1. Installation des outils requis
1. 1.1 NodeJS
2. 1.2 Un éditeur de texte
3. 1.3 Et ensuite ?
2. Création du premier projet
1. 2.1 Explication du code
2. 2.2 Composants et propriétés
3. Le langage JSX
4. Un composant par fichier
5. Ajouter du style
6. Prochaines étapes

Ajouter du comportement aux composants

1. Conserver un état local dans le composant
2. Réagir aux actions et entrées de l’utilisateur
3. Requêtes Ajax et cycle de vie des composants React
4. Simplifier les composants grâce aux hooks
1. 4.1 Gérer le state local avec useState
2. 4.2 Optimiser le rendu avec useCallback
3. 4.3 Requête Ajax au démarrage avec useEffect
4. 4.4 Un point d’attention important sur les hooks
5. Déclarer et typer les propriétés des composants
6. En conclusion

Concevoir une application avec Redux

1. Introduction
2. Découverte de Redux
1. 2.1 Concepts de base
  1. 2.1.1 Le state
  2. 2.1.2 Les actions
  3. 2.1.3 Le reducer
  4. 2.1.4 Le store
2. 2.2 Premier exemple
3. Utilisation avec React
1. 3.1 Découverte de React-Redux
2. 3.2 Connecter un composant à Redux à l’aide des hooks
4. Actions complexes et asynchrones
5. Un exemple complet
1. 5.1 Les services
2. 5.2 Les composants
6. Conclusion

Gérer les effets de bord avec Redux-Saga

1. Introduction
2. Les générateurs
3. Les effets de Redux-Saga
4. Un exemple plus complet
5. Conclusion

Développer pour le mobile avec React Native

1. Présentation de React Native
1. 1.1 Un peu d’historique
2. 1.2 Outils utilisés
2. Une première application
1. 2.1 Génération de l’application et premier lancement
2. 2.2 Premiers composants
3. 2.3 Gérer des entrées de l’utilisateur
  1. 2.3.1 Gestion de la navigation
3. Affichage de listes

Fonctionnalités avancées avec React Native

1. Utiliser une fonctionnalité native : l’appareil photo
2. Ajouter Redux à l’application
3. Plus loin avec la navigation
1. 3.1 Une modale pour l’édition d’un contact
2. 3.2 Intégration de la prise de photo
4. Conclusion

Gestion de formulaires et du routage

1. Introduction
2. Création de formulaires avec Formik
1. 2.1 Premier formulaire : inscription d’un utilisateur
2. 2.2 Deuxième formulaire : création/modification d’une dépense
3. Gestion du routage avec React Router
1. 3.1 Refactoring et définition des routes
2. 3.2 Ajout du routage avec React Router
3. 3.3 Persister des données dans le navigateur
4. 3.4 Ajout d’un nouvel écran
4. Prochaines étapes

Sécurité et persistance avec Firebase

1. Découverte de Firebase
2. Gestion de l’authentification
1. 2.1 Inscription d’un utilisateur
2. 2.2 Connexion d’un utilisateur
3. 2.3 Gestion de l’authentification dans l’application
3. Persistance de données avec Firebase
4. En conclusion

Connecter React à une API GraphQL

1. Présentation de GraphQL et premières requêtes
1. 1.1 Qu’est-ce que GraphQL ?
2. 1.2 Premières requêtes avec l’API de GitHub
3. 1.3 Ajout de données liées à la requête
4. 1.4 Écrire des données
5. 1.5 Prochaines étapes
2. Création d’une API avec Graphcool
1. 2.1 Installation et création du projet Graphcool
2. 2.2 Ajout de nouveaux modèles et relations
3. Appel d’une API avec React et Apollo Client
1. 3.1 Lire des données en envoyant des queries
2. 3.2 Gestion de l’authentification
3. 3.3 Écrire des données à l’aide de mutations

Écrire des composants réutilisables

1. Introduction
2. Principes pour des composants réutilisables
1. 2.1 Des composants aussi simples que possible
2. 2.2 Des composants pour une interface homogène
3. 2.3 Sortir la logique des composants
4. 2.4 Limiter le state local et les effets de bord
5. 2.5 En conclusion
3. Les high-order components
1. 3.1 Exemple : champ de saisie d’un numéro de téléphone
  1. 3.1.1 Premier HOC : n’accepter que certains caractères
  2. 3.1.2 Deuxième HOC : mettre en forme la valeur entrée
2. 3.2 En conclusion
4. Les render props
5. Les hooks
6. Les contextes et le pattern Provider/Consumer
7. Conclusion

Tester une application React

1. Que tester dans une application React ?
2. Test unitaire de composants avec Enzyme
1. 2.1 Initialisation de l’application à tester
2. 2.2 Jest et Enzyme
3. 2.3 Écriture des tests du composant
4. 2.4 Spécificité du shallow rendering d’Enzyme
3. Tester le store Redux et les sagas avec Redux Saga Test Plan
4. En conclusion

Conclusion

1. Aller plus loin
2. Reason : un autre langage pour faire du React
3. Générer des sites statiques avec Gatsby
4. Des bibliothèques de composants utiles
1. 4.1 Material-UI et Paper
2. 4.2 React-Select et React-Table
3. 4.3 React-Intl pour internationaliser votre application
5. Le mot de la fin

Annexes

1. Utiliser les React Dev Tools
2. Construire et déployer une application React
3. Création d’une application Firebase
Index

Auteur

Sébastien CASTIELEn savoir plus

Ingénieur et développeur depuis près de dix ans, Sébastien Castiel est spécialisé dans le développement web et le développement Front End, notamment avec le langage Javascript. Son envie de transmettre ses connaissances l'a tout naturellement conduit à se consacrer à l'écriture de ce livre pour partager au plus grand nombre son expertise sur le framework React. Il propose ainsi un livre 100% opérationnel pour permettre au lecteur de développer des applications web et mobiles performantes.