ReactJS, maîtriser le framework JavaScript de Facebook

Wéi laang dauert d'Formatioun?

3,00 Dag(Deeg)

A wéi enger/n Sprooch(en) gëtt d'Formatioun gehalen?

Wéini ass déi nächst Sessioun?

Wien organiséiert dës Formatioun?

Leader de la formation aux technologies numériques, au management, au développement personnel et aux métiers de l’entreprise, ORSYS accompagne les entreprises et les organisations depuis plus de 49 ans en les aidant à améliorer leurs performances et à réussir leurs transformations digitale, managériale, commerciale, organisationnelle...

Méi gesinn

Den Inhalt vun dëser Säit ass net op Lëtzebuergesch verfügbar

U wie riicht sech d'Formatioun?

Développeurs JavaScript, architectes et chefs de projets Web.

Wéi eng Virkenntnesser muss een hunn?

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

Wéi eng Ziler gi verfollegt bzw. wéi eng Kompetenzen ugestrieft?

À l’issue de la formation, le participant sera en mesure de:

Développer avec ReactJS
Concevoir une SPA avec ReactJS et Flux
Comprendre le subset JavaScript JSX
Optimiser les performances des RIA

Wéi gesäit den Inhalt vun der Formatioun aus?

Rappels des composants des RIA

Les fondamentaux. HTML, CSS, JavaScript. Le DOM.
Design patterns applicatifs classiques. Limitations des applications JavaScript.
Ecosystème des frameworks JavaScript.
Principes de Data-Binding: dirty-checking, observable, virtual-dom.
ReactJS, positionnement et philosophie.
JSX, présentation. Mise en œuvre "Transpilers".
Environnement de développement. IDE et plug-ins.

Travaux pratiques
Mise en place de l'environnement de développement. Initiation à JSX. Définition de la structure de l'application.

Développer avec ReactJS

Approche: MVC et Virtual Dom, un choix de performance.
Utiliser JavaScript ou JSX.
Comprendre JSX en détail. Pièges à éviter.
Méthodes principales de l'API.
Création de composant de vues. Cycle de vie.
Initialisation de propriétés.
"Render Function": gestion des états de composant.

Travaux pratiques
Définition et réalisation de composants selon les spécifications déterminées.

Interactivité des composants

Gestion des événements. "autobinding" et délégation.
Design Pattern: stratégie pour les composants à état.
Composer par ensembles.
"Component Data Flow": propriétaire, enfants et création dynamique.
Composants réutilisables: contrôle et transfert de propriétés.
Contrôle des composants de formulaire.
Manipulation du DOM.

Travaux pratiques
Création d'un ensemble structuré de composant UI.

Application monopage avec ReactJS et Flux ou Redux

Flux/Redux: présentation. Propagation de données.
Comparaison des architectures.
Création de vues et contrôleurs dans Flux.
Rôle du "Dispacther" dans Flux pour les actions.
Les "Stores", gestionnaire d'états logique dans Flux.
Définition du Functionnal Programming.
Approche avec Redux. Le "Reducer".
Extension pour ReactJS: "hot-loader".

Travaux pratiques
Intégration d'une SPA.

Application isomorphique

Principe et bénéfices du développement isomorphique.
Ecosystème du JavaScript côté serveur.
Initiation à NodeJS.
Configuration de NodeJs pour ReactJS.
Organisation de routes.

Travaux pratiques
Prérendu serveur d'une application.

Introduction à React Native

Positionnement, différences avec Cordova.
De React aux composant iOS natifs, un projet à suivre.

Démonstration
Application utilisant React Native.

Wéi eng pedagogesch Methode gi benotzt?

Travaux pratiques
Vous réaliserez une application complète basée sur le framework ReactJS.
Méthodes pédagogiques;
Développement guidé. 50% de théorie illustrée par 50% de pratique.

Wéi gesäit d'Evaluatioun aus?

Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…Le participant complète également un test de positionnement pour valider les compétences acquises.