Aller au contenu principal

React : les fondamentaux

Développement 174 arrow small right Frontend

frontend web JavaScript React

  • Durée

    3 jour(s)

  • Niveau

    Intermédiaire

  • Référence

    DE-093

Présentation

Avec l’évolution des usages du web de cette dernière décennie, il s’est développé un fort besoin d’un « JavaScript étendu » pour fournir de nouvelles fonctionnalités aux utilisateurs, dans un langage simplifié. La réponse à ce besoin s’est faite à travers le développement de différentes bibliothèques et cadriciels (frameworks) JavaScript tels que Angular, Vue.js ou encore React.
Créé en 2013 par Meta (ex Facebook), React fournit différents outils permettant de créer des interfaces utilisateurs réactives à la fois en fonction des interactions de l’utilisateur et de l’évolution des données traitées.
Au cours de cette formation, vous découvrirez comment utiliser la bibliothèque React pour construire vos applications. Vous apprendrez à créer des composants, manipuler la donnée et construire des interfaces dynamiques et interactives en JSX. Vous mettrez également un premier pas dans l’environnement React à travers la manipulation de la navigation entre les pages avec React Router. Enfin, vous perfectionnerez vos connaissances en JavaScript, React utilisant de nombreuses fonctionnalités modernes et avancées du langage.

Objectifs de la formation

  • Découvrir, installer et utiliser React
  • Savoir créer des composants React
  • Savoir utiliser la State, les props, les styles et les Hooks au sein de React
  • Savoir créer la navigation de l’application web avec React Router

Public

  • Toute personne souhaitant améliorer ses compétences en développement web front-end.

Prérequis

  • Une connaissance de JavaScript est nécessaire
Tester vos compétences

Programme

1- Introduction à React

Origines et concepts liés à React
Fonctionnalités récentes de JavaScript utilisées avec React
La syntaxe JSX

2- Environnement et fonctionnement

Environnement d’exécution, modules et Node
Architecture d’un projet
Concept de rafraîchissement en temps réel
Le DOM fantôme (Shadow DOM)
Le composant ReactDOM

3- Les composants React

Objectifs des composants, syntaxe, créer son premier composant
Composants fonctionnels ou composants sous forme de classe ?
Le cycle de vie (lifecycle) et les grappins (hooks) : useEffect, useState, …
La state

4- Fonctionnalités liées aux composants React

Gestion des styles des composants : imports et styles React
Les props d’un composant
Le contrôle des formulaires
Créer des composants parents
Les contextes

5- React Router

Les routes dans React
Composants JSX : Routes, Route, Navigate, Link
Les grappins (hooks) de React Router : useNavigate, useLocation, useParams, …
Bonnes pratiques de navigation au sein d’une application React

Date de dernière modification : 22/03/2024

Organisation

162 arrow small up 163 arrow small down

Modalités d'évaluation :

Questionnaires à choix multiples (QCM) en fin de formation. L'intervenant formulera également une appréciation sur vos acquis pour l'entièreté de la formation.

Moyens pédagogiques :

Formation alternant la théorie et la pratique, avec un intervenant présentant la formation en direct. Possibilité de réaliser cette formation en face-à-face dans nos locaux, dans vos locaux d'entreprise ou à distance via visioconférence.
Une fois terminée, vous disposerez d'une attestation de suivi de la formation, ainsi que des contenus de cours relatifs au contenu présenté.

Informations pratiques :

En cas de dispense dans nos locaux, le matériel informatique est fourni et l'ensemble des commodités sont accessibles. Nos locaux sont également accessibles aux personnes à mobilité réduite : découvrir notre centre.
Retrouvez toutes les informations pratiques pour préparer votre formation sur notre page dédiée : informations pratiques.

Ces formations pourraient vous intéresser

  • React avec TypeScript

    Au cours de la dernière décennie, l’évolution rapide du web a stimulé le besoin d’un « JavaScript étendu » enrichissant l’expérience utilisateur avec de nouvelles fonctionnalités tout en simplifiant le …

    En savoir plus

  • React niveau 2

    Dans le paysage dynamique du développement web moderne, la maturité des outils et des pratiques est essentielle pour répondre aux exigences croissantes en matière de performance et d’expérience utilisateur ; dans ce …

    En savoir plus

  • JavaScript : Design Patterns et orienté prototype

    JavaScript est un langage disposant de multiples paradigmes de programmation en son sein. On y retrouve des éléments de programmation fonctionnelle avec l’utilisation massive des fonctions « map », « reduce » …

    En savoir plus