NOUVELLE FORMATION

React : Développement d’applications Web

Formation #2322 - 4 jours

Sessions planifiées

16 mai 2017 - 2220 €
Paris - AnyWare
5 septembre 2017 - 2220 €
Paris - AnyWare
28 novembre 2017 - 2220 €
Paris - AnyWare

Intra-entreprise

Learning Tree au cœur de votre entreprise.

Demander un devis

À propos de cette formation :

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.

Vous apprendrez à :

  • 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

Travaux Pratiques :

  • 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)

À qui s'adresse cette formation ?

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.

Contenu de cette formation :

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

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

Activation des composants React

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

Développement de formulaires React

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

Développement d'applications Flux

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

Analyse des applications React

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

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

Inscrivez-vous dès maintenant - sans risque

Appelez le 01 49 68 53 00 ou inscrivez-vous en ligne en sélectionnant une date ci-dessus.

  • Pas de paiement à l'avance
  • Payez jusqu'à 30 jours après la formation
  • Votre satisfaction est garantie - ou vous ne payez pas la formation

Vous pouvez organiser cette formation dans votre entreprise

Organisez une formation Learning Tree sur votre lieu de travail avec notre solution intra-entreprise.
Que votre entreprise nécessite une seule formation ou un cursus complet, Learning Tree dispose de l'infrastructure, des technologies, des formateurs experts et de la maitrise pour gérer tous les aspects de votre formation - où et quand vous le souhaitez.

Suivez votre formation avec AnyWare d'où vous voulez

Suivez nos formations chez vous, du bureau ou dans le centre AnyWare de Learning Tree le plus proche et bénéficiez du même enseignement pratique de qualité délivré par nos formateurs.
AnyWare c'est notre plateforme de formation présidentielle à distance par Internet.

Financez votre formation

Le financement de votre formation ne doit pas être un obstacle. Nos conseillers vous aiderons dans vos démarches avec les OPCA par exemple.
Profitez également de la réduction Return to Learn qui récompense les participants ayant déjà suivi une formation Learning Tree.

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.