React : Développement d'applications Web

Présentation et vue d'ensemble

• Caractéristiques de React et Flux
• Avantages du DOM virtuel
• Configurer le développement et créer l'environnement

Conception de composants React personnalisésAfficher un contenu React

• Utiliser les fonctions (factory) React.createElement() et React.DOM.*
• Rendu de l'application avec ReactDOM.render()
• Créer l'interface utilisateur (UI) sur le serveur avec renderToString()

Concevoir l'interface utilisateur avec JSX

• Coder des composants personnalisés avec React.createClass()
• Générer la sortie des composants avec la méthode render
• Créer une hiérarchie des composants JSX
• Intégrer des bibliothèques tierces

Activation des composants ReactParamétrage des composants

• Faire la différence entre l'état et les propriétés d'un composant
• Ajouter des propriétés au rendu avec this.props
• Passer des valeurs de propriétés avec les expressions JSX { }
• Initialiser les valeurs par défaut avec getDefaultProps()

Manipulation de l'état des composants

• Définir les valeurs initiales de l'état avec getInitialState()
• Lire les données d'une application avec this.state
• Mutation des données avec this.setState()
• Utiliser la liaison de donnée automatique (autobinding) et le regroupement des événements

Intégration dans le cycle de vie du composant

• Attacher et détacher les gestionnaires de la logique et des événements dans componentDidMount et componentWillUnmount
• Améliorer les performances avec componentShouldUpdate
• Gérer les modifications avec componentWillReceiveProps

Développement de formulaires ReactManipulation des composants pour la saisie des données dans les formulaires

• Utiliser les propriétés interactives
• value
• defaultValue
• checked
• selected
• Prendre en compte les mises à jour des composants des formulaires avec onChange
• Comparer les composants contrôlés et non contrôlés

Mise en œuvre du data-binding bidirectionnel

• Appliquer la convention onChange / setState()
• Utiliser LinkedStateMixin
• Passer des objets ReactLink dans la hiérarchie des propriétés

Connecter React et les services REST

• Appeler Ajax depuis React
• Mapper les accès CRUD aux actions REST
• GET
• POST
• PUT
• DELETE
• Identifier les composants avec key

Développement d'applications FluxModélisation de l'interactivité des données côté client

• Identifier les participants
• Actions
• Dispatcher
• Stores
• Views
• Utiliser le flux de données unidirectionnel
• Comparaison entre Flux, MVC (Model View Controller), Redux et Relay

Codage d'une application Flux

• Développer les fonctionnalités du dispatcher de Facebook
• Utiliser Node.js EventEmitter avec des stores personnalisés
• Refactoriser l'accès aux services REST de React avec « Action Creators » du composant "Flux"

Intégration du routage dans Flux

• Utiliser react-router pour les URL sémantiques
• Mapper les chemins et les paramètres des URL aux gestionnaires

Analyse des applications ReactOutils de développement

• Inspecter les composants React avec des extensions de navigateur
• Identifier et déboguer les erreurs de rendu

Tests unitaires

• Running tests with Jest
• Simuler un event dispatch avec ReactTestUtils.Simulate

Test des performances

• Définir une valeur de référence
• Surveiller les performances lors de l'exécution de React avec Perf.start() et stop()
• Améliorer la vitesse d'exécution

Animation des applications React

• Ajouter le module complémentaire react-css-transition-group
• Utiliser le composant ReactCSSTransitionGroup
• Créer des animations et des transitions CSS