React : Développement d’applications Web

Formation #2322 - 4 jours

React est une bibliothèque JavaScript open-source conçue par Facebook pour le développement d'applications Web HTML5 modernes. Elle permet aux développeurs de créer des interfaces utilisateur très performantes avec ses composants JSX ciblant un DOM virtuel (Document Object Model). Flux offre un modèle d'architecture complémentaire pour développer les fonctionnalités des applications côté client. Au cours de cette formation, vous apprendrez à créer une application complète avec React.

  • Développer une application Web isomorphe avec Facebook React et Flux
  • Créer l'interface utilisateur avec les composants JSX et JavaScript de la bibliothèque React
  • Coder des composants React interactifs avec des propriétés et des états
  • Connecter des formulaires React à des services REST (serveur) en Ajax
  • Appliquer le modèle Flux pour les applications : dispatcher, stores et actions
  • Combiner les composants React avec les animations et les transitions CSS3

  • Concevoir une interface utilisateur dynamique pilotée par les données avec les composants React
  • Déployer une application React sur le serveur et sur le client
  • Connecter des formulaires intégrant des composants React aux données d'un service REST
  • Coder des stores et des actions Flux pour mettre en œuvre un flux de données unidirectionnel
  • Utiliser le routeur React pour améliorer les liaisons et le référencement auprès d'un moteur de recherche (SEO)

Aux testeurs, concepteurs et développeurs Web qui veulent apprendre à créer des applications Web côté client bien conçues avec React et Flux.

Une expérience en développement de pages Web avec JavaScript, HTML et CSS du niveau de la formation 2319, JavaScript : Développement Web pour les appareils modernes est supposée acquise.

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

Afficher 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

Paramé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

Manipulation 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

Modé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

Outils 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
  • Ajouter le module complémentaire react-css-transition-group
  • Utiliser le composant ReactCSSTransitionGroup
  • Créer des animations et des transitions CSS

Sessions planifiées inter-entreprises

Contactez-nous au 01 49 68 53 00 pour planifier une session.

Demander un devis

Intra-entreprise

Organisez cette formation Learning Tree sur votre lieu de travail avec notre solution intra-entreprise.

Demander un devis

Financez votre formation

  • Programmes Visa Société et Passeport
  • Réduction Return to Learn

Pour en savoir plus, cliquez ici.

Notre catalogue

Vous souhaitez parcourir toute notre offre de formation ultérieurement ?

Téléchargez notre catalogue

Suivez une formation Learning Tree et profitez des avantages de SUPINFO International University !

Pour toute formation que vous aurez suivi chez Learning Tree, SUPINFO International University vous offre pendant un an le statut Advanced Member d'une valeur de 250€.
Ce statut privilégié vous permettra de profiter de ressources pédagogiques sélectionnées par SUPINFO :

* Services disponibles prochainement.