☀️ C'est l'été chez ITTA ! Profitez de 10% de réduction jusqu'au 31 juillet sur une sélection de formations 🌴

Formation : ReactJS

Ref. REACTJS
Durée :
3
 jours
Examen :
Non certifiant
Niveau :
Fondamental

Formation ReactJS

Maîtrisez le développement d’applications avec ReactJS

ReactJS est aujourd’hui l’une des bibliothèques JavaScript les plus populaires pour le développement d’applications à page unique. Avec notre formation ReactJS, vous apprendrez à construire des interfaces dynamiques, à manipuler les états et à comprendre l’importance des composants. Ce cours couvre l’essentiel d’ES6 et de React, depuis les bases de JavaScript moderne jusqu’à la création d’applications web robustes. Vous découvrirez comment utiliser JSX, gérer les props et l’état, et mettre en place un routage efficace. Idéal pour les développeurs souhaitant élargir leurs compétences front-end avec ReactJS.

Profils des participants

  • Développeurs et architectes Javascript

Objectifs

  • Coder en utilisant les nouvelles fonctionnalités du langage ES6
  • Développer une application à partir de zéro en utilisant React
  • Comprendre les avantages du flux de données unidirectionnel
  • Comprendre et utiliser React, React Router, Redux
  • Utiliser des composants stylés pour créer des composants de présentation (CSS dans JS)
  • Profiter des outils de développement React et Redux
  • Profiter de la bibliothèque immutable.js
  • Tester les composants React, Redux à l’aide de Jest et Enzyme

Connaissances Préalables

  • Expérience importante en développement JavaScript
  • Avoir suivi ou maîtriser les notions incluses dans le cours suivant : Introduction à JavaScript

Contenu du cours

Module 1 : Primaire ES6

  • Histoire de Javascript
  • Qu’est ce que l’ES6
  • Un mot sur « bable »
  • Portée du bloc, let & const
  • Littéraux de modèle
  • Fonctions de flèche
  • Opérateurs d’étalement et de repos
  • Amélioration littérale des objets
  • La destruction
  • Des classes
  • Héritage
  • Propriétés et méthodes statiques
  • Promesses
  • Itérateurs et Iterables
  • Générateurs
  • Modules
  • Set et carte

Module 2 : Introduction à React

  • Qu’est ce que React?
  • Pourquoi réagir?
  • Réagir à l’historique des versions
  • Just React – Hello World
  • Utiliser create-react-app
  • Projet d’anatomie de React
  • Lancer l’application
  • Débogage de la première application React

Module 3 : Templating avec JSX

  • Travailler avec React.createElement
  • Expressions
  • Utiliser des opérateurs logiques
  • Spécifier les attributs
  • Spécifier les enfants

Module 4 : Tout est question de composants

  • Importance de l’architecture des composants
  • Types de composants
  • Fonctionnels
  • Basés sur la classe
  • Purs
  • Composition des composants

Module 5 : Travailler avec l’état et les props

  • Qu’est-ce que l’état et sa signification
  • Lire l’état et définir l’état
  • Transmission de données à un composant à l’aide de props
  • Valider les props à l’aide de propTypes
  • Fournir des valeurs par défaut aux props à l’aide de defaultProps

Module 6 : Listes de rendu

  • Utiliser Rea key prop
  • Utilisation de la fonction de carte pour effectuer une itération sur des tableaux pour générer des éléments

Module 7 : Gestion des événements dans React

  • Comprendre React au système d’événements
  • Comprendre l’événement synthétique
  • Passer des arguments aux gestionnaires d’événements

Module 8: Comprendre le cycle de vie des composants

  • Comprendre le cycle de vie des composants

Module 9 : Travailler avec des formulaires

  • Composants contrôlés
  • Composants non contrôlés
  • Comprendre la signification du support defaultValue
  • Utiliser react ref prop pour avoir accès à l’élément DOM

Module 10 : Routage avec routeur de React

  • Mise en place du routeur de React
  • Comprendre le routage dans des applications à une page
  • Travailler avec les composants BrowserRouter et HashRouter
  • Configuration de l’itinéraire avec le composant Route
  • Utilisation du composant Switch pour définir des règles de routage
  • Rendre les routes dynamiques en utilisant les paramètres de route
  • Travailler avec des routes imbriquées
  • Navigation vers les pages à l’aide du composant Link et NavLink
  • Rediriger les routes à l’aide de RedirectComponent
  • Utilisation du composant Invite pour obtenir le consentement de l’utilisateur pour la navigation
  • Path moins Route pour gérer les requêtes ayant échoué

Module 11 : Just Redux

  • Ce qui est redux
  • Pourquoi Redux
  • Principes de redux
  • Installer et configurer redux
  • Créer des actions, réducteur et stocker

Module 12 : Immutable.js pour les infrastructures de données immuables

  • Qu’est-ce que Immutable.js?
  • Collections immuables
  • Les listes
  • Les Maps
  • Les Sets

Module 13 : Réagir Redux

  • Qu’est-ce que React Redux?
  • Pourquoi réagir en redux
  • Installer et configurer
  • Composants de présentation et de conteneur
  • Comprendre le composant d’ordre élevé
  • Comprendre l’utilisation de mapStateToProps et mapDispatchtToProps

Module 14 : Tests unitaires en React

  • Comprendre la signification des tests unitaires
  • Comprendre le jargon des tests unitaires et les outils

Documentation

  • Support de cours numérique inclus

Lab / Exercices

  • Lab 1 : Primaire ES6
  • Lab 2 : Introduction à React
  • Lab 3 : Templating avec JSX
  • Lab 4 : Tout est question de composants
  • Lab 5 : Travailler avec l’état et les props
  • Lab 6 : Listes de rendu
  • Lab 7 : Gestion des événements dans React
  • Lab 8 : Comprendre le cycle de vie des composants
  • Lab 9 : Travailler avec des formulaires
  • Lab 10 : Routage avec routeur de React
  • Lab 11 : Just Redux
  • Lab 12 : Immutable.js pour les infrastructures de données immuables
  • Lab 13 : Ract Redux
  • Lab 14 : Tests unitaires en React

Cours complémentaires

Financement Temptraining

ITTA est partenaire de Temptraining, le fonds de formation continue pour les travailleurs temporaires. Ce fonds de formation peut subventionner des formations continues pour toute personne qui travaille pour un employeur assujetti à la Convention collective de travail (CCT) Location de services.

Informations additionnelles

Formation ReactJS : Maîtrisez les fondamentaux et techniques avancées

La formation ReactJS que nous proposons vous permet de développer des compétences solides en codage avec React. Ce framework JavaScript est aujourd’hui incontournable pour la création d’interfaces utilisateurs dynamiques. De l’apprentissage des bases à la maîtrise des concepts avancés comme Redux et Immutable.js, notre programme est conçu pour vous fournir une expertise complète. Que vous soyez débutant ou développeur cherchant à approfondir vos connaissances, cette formation vous guidera pas à pas dans l’univers de ReactJS.

Découverte de Javascript ES6

Dans ce premier module, nous revenons sur les fondamentaux de JavaScript et de l’ES6, la version la plus moderne du langage, qui introduit des concepts essentiels comme les fonctions fléchées et les promesses. Vous apprendrez également à utiliser des outils tels que babel pour convertir votre code, à manipuler des objets via la destruction, et à comprendre des concepts comme les classes et l’héritage. Maîtriser ces notions est indispensable avant de plonger dans React.

Introduction à ReactJS : Comprendre les bases

Pour commencer, qu’est-ce que ReactJS ? Pourquoi choisir ce framework pour vos projets ? Ce module présente non seulement l’historique de React, mais également ses avantages pour le développement d’applications interactives. Vous allez rapidement apprendre à utiliser create-react-app pour mettre en place votre première application et explorer son anatomie, de la création des composants à leur débogage.

Templating avec JSX : Simplifiez votre code

L’une des forces de ReactJS est son langage de templating JSX. Dans ce module, vous découvrirez comment JSX vous permet d’écrire du code JavaScript qui ressemble à du HTML, rendant ainsi le développement plus intuitif. Que vous utilisiez des opérateurs logiques ou spécifiiez des attributs, ce module vous montre comment optimiser l’écriture de vos composants et améliorer la lisibilité de votre code.

Architecture des composants : La clé d’une application performante

Avec ReactJS, tout tourne autour des composants. Une architecture bien pensée garantit la stabilité et la flexibilité de vos applications. Vous découvrirez différents types de composants comme les composants fonctionnels, les classes ou encore les purs, et apprendrez à composer ces derniers de manière optimale. Cette section est cruciale pour tout développeur ReactJS qui souhaite coder de manière modulaire et réutilisable.

Gestion de l’état et des props : Maîtrisez la communication entre composants

Comprendre la gestion de l’état dans ReactJS est indispensable pour créer des applications dynamiques. Vous apprendrez à manipuler l’état de vos composants et à le transmettre à travers les props. Ce module vous enseignera aussi l’importance des propTypes pour valider les types de données que vous transmettez, garantissant ainsi la robustesse de votre code.

Gestion des événements et cycle de vie : Interagir avec vos utilisateurs

Dans ce module, nous abordons la gestion des événements dans ReactJS. Grâce au système d’événements de React, vous apprendrez à déclencher des actions en réponse à l’interaction des utilisateurs. Vous comprendrez également comment gérer le cycle de vie des composants, une compétence clé pour optimiser le comportement et la performance de vos applications, notamment lors de l’utilisation de hooks modernes.

Travailler avec Redux : Une gestion d’état centralisée

Pour des applications de grande envergure, gérer l’état de manière efficace devient un défi. C’est là qu’intervient Redux. Vous apprendrez pourquoi utiliser Redux pour centraliser l’état de votre application, comment configurer le store, et écrire des actions et réducteurs. En combinant React et Redux, vous serez capable de développer des applications encore plus robustes et maintenables.

Apprendre à tester ses applications ReactJS

Une application bien développée doit être correctement testée. Nous vous apprenons les bases des tests unitaires en ReactJS, un indispensable pour assurer la qualité et la fiabilité de votre code. Vous apprendrez à écrire des tests efficaces qui vérifient les composants individuellement et garantissent le bon fonctionnement global de vos projets.

Utilisation de modules avancés avec Immutable.js et React Redux

En complément de Redux, nous introduisons Immutable.js pour gérer des structures de données immuables, cruciales pour éviter les erreurs dans les grandes applications. Ce module vous permet de manipuler des collections immuables comme des Sets ou des Maps en toute simplicité.

Pourquoi suivre cette formation ReactJS ?

Apprendre à coder avec ReactJS est un investissement pour toute personne souhaitant travailler dans le développement web. Grâce à notre formation, vous maîtriserez non seulement les bases, mais vous deviendrez également capable de construire des applications performantes et maintenables à long terme.

En somme, cette formation complète vous permettra de coder ReactJS en toute confiance et de vous adapter aux exigences du marché du travail. Les concepts appris sont directement applicables à des projets réels, vous donnant ainsi un avantage certain sur le marché du travail.

Prix de l'inscription
CHF 2'150.-
Inclus dans ce cours
  • Formation dispensée par un expert du domaine
  • Documentation et supports digitaux
  • Badge de réussite
Mois actuel

mer05Fév(Fév 5)09:00ven07(Fév 7)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer05Fév(Fév 5)09:00ven07(Fév 7)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer12Mar(Mar 12)09:00ven14(Mar 14)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer12Mar(Mar 12)09:00ven14(Mar 14)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

lun14Avr(Avr 14)09:00mer16(Avr 16)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

lun14Avr(Avr 14)09:00mer16(Avr 16)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer21Mai(Mai 21)09:00ven23(Mai 23)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer21Mai(Mai 21)09:00ven23(Mai 23)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer25Juin(Juin 25)09:00ven27(Juin 27)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer25Juin(Juin 25)09:00ven27(Juin 27)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

lun04Aoû(Aoû 4)09:00mer06(Aoû 6)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

lun04Aoû(Aoû 4)09:00mer06(Aoû 6)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer03Sep(Sep 3)09:00ven05(Sep 5)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer03Sep(Sep 3)09:00ven05(Sep 5)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer08Oct(Oct 8)09:00ven10(Oct 10)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer08Oct(Oct 8)09:00ven10(Oct 10)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer12Nov(Nov 12)09:00ven14(Nov 14)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer12Nov(Nov 12)09:00ven14(Nov 14)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer17Déc(Déc 17)09:00ven19(Déc 19)17:00VirtuelVirtuel Etiquettes de sessionREACTJS

mer17Déc(Déc 17)09:00ven19(Déc 19)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

Contact

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Horaires d’ouverture

Du lundi au vendredi

de 8h30 à 18h00

Tél. 058 307 73 00

Contactez-Nous

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Faire une demande

Opening hours

Monday to Friday
8:30 AM to 6:00 PM
Tel. 058 307 73 00

Contact-us

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Make a request