Aller au contenu principal
Afficher le fil d'ariane

PLB CONSULTANT : 06. React JS - Développement d'applications web

Organisme

PLB CONSULTANT
3-5 RUE MAURICE RAVEL
92300 LEVALLOIS PERRET
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

21 heures

Modalités

Formation

  • Classe virtuelle
  • Présentiel

Évaluation

Travaux pratiques. Auto-évaluation en début et en fin de formation.

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
840€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3360€ HT / groupe
4 stagiaires minimum

Public

Développeurs, architectes, chefs de projets…

Pré-requis

Avoir des connaissances pratique du développement Web, maîtrise et pratique de JavaScript (ES5 minimum).

Objectifs pédagogiques

- Connaître les spécificités de ReactJS 

- Savoir développer des applications web performantes avec ReactJS 

- Concevoir une SPA avec ReactJS et Flux 

- Comprendre le subset JavaScript JSX 

- Optimiser les performances des RIA 

- Être en mesure de comprendre les impacts du choix d'une architecture incluant ce type d'application

Programme détaillé

 

Introduction à React

Philosophie de React

Les autres Frameworks JavaScript

Environnement de développement

Outils de debug

Travaux pratiques

Mise en place de l’environnement de développement

Mise en place pour le début de liens directs vers les fichiers react et react-DOM

Voir la différence avec un import de fichiers optimisés par le web pack

 

Les nouveautés ECMAScript

Présentation d’ECMAScript

Les nouveautés ES6/ES2015

ES2017 : les fonctions « async »

 

Premiers développements avec ReactJS

Le composant

Principe et conséquences du Virtual Dom

La fonction render()

'props' et 'state'

Le langage JSX

Travaux pratiques

Initiation à JSX. Définition de la structure de l’application.

Réalisation d’un générateur de formulaires en JSX pour utiliser des class/fonctions réutilisables. L’objectif est de se créer une bibliothèque de composants réutilisables.

 

Les possibilités de build

Build complet avec webpack

Build managé avec la cli create-react-app

Les différents packages de bootstraping React

Optimisation et construction des fichiers nécessaires à l’affichage complet du site (js, mais aussi images et css)

Comparaison de la version lien dans le html/ la version développement et la version production

 

Les Composants React

Les composants fonctionnels et de classe

Composition de multiple composants

Cycle de vie d'un Composant de classe

Les Hooks des composants fonctionnels

Gestion des événements click, mouseover...

 

Styliser ces composants

Les différentes approches pour styliser un composant

La bibliothèque de « styled-components » Emotion

 

Interaction de l'utilisateur avec les composants

Gestion d'Ajax

Gestion des formulaires

Manipulation du DOM, DOM virtuel

Travaux pratiques

Création d’un ensemble structuré de composant UI.

Mise en place d’une page qui permet de déclarer des variables et de donner à l’internaute de modifier ces valeurs et de déclencher un nouveau rendu de la page. Nous allons créer une page formulaire avec des données venant d’une api externe et contrôler les valeurs saisies dans le formulaire par l’internaute pour pouvoir envoyer les données du formulaire.

 

Gestion centralisée des données

Présentation des différentes technologies de gestion (Redux, MobX, context, Recoil etc.)

Présentation de Redux

Le Store et les Actions

Création de Reducteurs pour les Actions

Utilisation avec React

 

Application monopage avec ReactJS et un module de store de variables

Flux/Redux : présentation. Propagation de données.

Comparaison des architectures.

Création de vues et contrôleurs dans Flux.

Rôle du "Dispacther" store reducer action.

Travaux pratiques

Apprendre à manipuler ces stores de données

Créer un projet avec des composants et partager les variables entre eux 

Le store permet de simplifier les changements de données au sein de l’application en centralisant tout à un unique endroit.

 

Le Router

Les différents Routers

HashRouter ou PushState

Conséquences sur le déploiement

 

Application isomorphique

Présentation de NodeJS

Principe et bénéfices du développement isomorphique

Découverte du Framework NextJs

Travaux pratiques

Prérendu serveur d’une application.

Créer un projet de plusieurs vues avec tous les éléments vus précédemment

Un mini-site avec plusieurs vues accessibles via les routes 

Différents composants faisant appel à des données venant d’apis et des variables partagées entre certains composants.

Sessions

Filtrer les résultats

46 résultats

Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.

0 résultat