Sélectionner une page
Formations Langage JavaScript Formation React : Développez vos Web Apps Performantes

Formation React : Développez des Applications Web Performantes

Rated 4,4 out of 5
Logo Formation React - ReactJS
Prix 2400€ HT / personne
Durée 4 jours (28 heures)
Parcours CPF

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

Présentation

Avec notre formation React, l’une des plus complètes du marché, vous découvrirez comment exploiter pleinement cette technologie Web afin d’optimiser l’expérience de vos utilisateurs et améliorer la fluidité et la qualité de vos Web Apps.

En effet, cette bibliothèque JavaScript est l’une des plus utilisées par les développeurs et l’une des plus performantes. Lors de notre cours, vous allez apprendre à exploiter tout le potentiel de cette librairie open-source soutenue par Facebook et développée par les meilleurs ingénieurs de la planète.

Dans un premier temps, notre formation abordera les concepts de base à savoir : ES6, ESNext, le DOM Virtuel ou encore les limitations des applications JavaScript. Par la suite, vous découvrirez Reactjs et ces composants.

Vous saurez optimiser vos produits digitaux grâce à la mémoïsation et la notion de pureté, vous saurez également gérer l’authentification, ainsi que les contextes.

Notre formation React vous permettra en outre de créer efficacement des Web Apps modernes notamment grâce aux bonnes pratiques de testing et de debugging.

Comme tous nos programmes, notre cours porte sur la toute dernière version en date de cette librairie à savoir ReactJS 18.

 

Objectifs

  • Maîtriser les fonctionnalités de la dernière version de React, la technologie JavaScript de Meta
  • Développer des applications web avec React
  • Créer des composants web complexes rapidement
  • Application SinglePage avec React.JS et Typescript
  • Optimiser les performances d’une application React
  • Utiliser Redux pour la gestion d’état

 

Public visé

  • Développeurs web
  • Lead Developer

 

Pré-requis

  • Connaissance de base en HTML / CSS / JS

 

Pré-requis logiciel

  • Machine
    • Au minimum 8 Go de RAM (16 Go recommandés)
    • Windows 11, MacOS ou Linux
  • La dernière version de React installée
  • Un IDE tel que Visual Studio Code

Programme de notre formation React

 

Introduction

  • Rappels, de ES6 à ESNext
  • JavaScript, DOM et VirtualDOM
  • Limitations des applications JavaScript
  • Écosystème des frameworks web JavaScript modernes
  • La nouvelle vision de ReactJS
  • Environnement de développement : IDE, outils et plug-ins

 

Présentation de ReactJS

  • Virtual Dom, un choix de performance
  • Create-react-app VS Vite
  • Composants à état, fonction de rendu simple, performance
  • JavaScript ou JSX
  • Comprendre le JSX
  • Création de composants de vue
  • Initialisation des props
  • Comprendre le passage de props
  • Lifting up state – intérêts et inconvénients
  • React et CSS: css-in-js, modules CSS ou styled-component et portée du style

 

ESNEXT, ES2015 et TypeScript

  • TypeScript: Création et configuration avec ESLint (TSLint)
  • Conserver les mêmes normes et qualité de code au sein du projet
  • Mise en place de husky et lint-staged

 

Composants

  • Fragments
  • Découper une application par composants
  • Props VS state
  • Component Data Flow : circulation des informations entre composants
  • Composants réutilisables : contrôle et transfert de propriété
  • Contrôle des composants de formulaire : solution propriétaire ou utilisation de librairies (Formik, react-hook-form)
  • Validation de formulaire avec yup
  • Manipulation du DOM
  • Portals

 

HOOKS

  • useState
  • useEffect – comprendre le cycle de vie et les désabonnements
  • useLayoutEffect
  • useReducer
  • Séparer la logique d’un composant pour augmenter sa réutilisation
  • Création d’un customHook
  • useRef

 

Optimisation des performances

  • Comprendre la mémoïsation et la notion de pureté
  • useCallback
  • useMemo
  • React Memo

 

NOUVEAUTÉS DE REACT 18 & 17

  • useId
  • useTransition
  • useDeferredValue
  • Suspense API
  • Lazy loading et code splitting
  • Transition facilitée pour les mises à jour futures de React
  • Modifications des événements pour mieux supporter les applications hybrides React
  • Suppression de certaines API obsolètes
  • React Concurrent Mode : composants en parallèle pour améliorer les performances
  • React Server Components, permettant un rendu côté serveur avec interaction côté client
  • Mise à jour progressive : qui permet aux développeurs de définir des priorités pour les mises à jour de l’interface utilisateur.
  • Outils de débogage améliorés
  • Meilleure prise en charge de Suspense pour la gestion des chargements de données

 

ROUTING AVEC REACT ROUTER

  • Principe d’une SPA
  • Installation de react-router-dom (v6)
  • Création des routes
  • Configuration et organisation des routes
  • Les différents modes de navigation
  • Redirection et Historique
  • Page 404
  • Data Fetching avec React-Router

 

Authentification

  • Route Privée et Redirection
  • Création d’un layout selon le rôle utilisateur
  • Persistance d’un token via la création d’un customHook

 

REACT CONTEXT

  • Définition et cas d’utilisation
  • Création de plusieurs contextes
  • Utilisation des différents contextes

 

LIBRAIRIES DE COMPOSANTS

  • Utilisation d’une librairie SemanticUI/MaterialUI/AntDesign/React-Bootstrap
  • Comment utiliser une librairie sans créer de dette technique ?

 

Animation

  • React Transition Group
  • Animations et Transitions

 

Internationalisation

  • Intégration du i18n avec React-intl (la librairie la plus populaire pour la gestion des langues)

 

REDUX

  • Comprendre Redux
  • Installer redux-toolkit
  • Les actions, creators et dispatchers
  • Utilisation des providers et de l’injection des composants pour organiser un Store
  • DataFetching avec RTK Query
  • Intégration de redux à notre projet
  • Redux VS Context ? Quand utiliser lequel ?

La formation est-elle dispensée en présentiel ou à distance ?

Cette formation se déroule en présentiel ou en distanciel.

Qu'est-ce que le CPF ?

Le CPF (Compte Personnel de Formation) est un dispositif régit par l’état français pour permettre aux salariés de disposer d’un financement mobilisable uniquement pour la formation.

Pourquoi suivre une formation éligible au CPF ?

Pour profiter des nombreux avantages qu’offre le CPF :

Une formation finançable jusqu’à 100%
Une formation de qualité approuvée par l’instance gouvernementale France Compétences
L’obtention d’une certification délivrée par France Compétences

Que dois-je faire si mon solde CPF n’est pas suffisant ?

Contactez-nous ! Nos conseillers peuvent vous aider à trouver des sources de financement complémentaires en fonction de votre situation, tels que Pôle emploi, votre entreprise, vous-même (via carte bleue), ou encore l’OPCO Atlas.

Comment m'inscrire via moncompteformation ?

Il suffit de cliquer sur le bandeau vert «CPF» à droite de l’écran (ou en haut si vous utilisez un mobile). Vous devrez ensuite sélectionner une date de session depuis le site MonCompteFormation.

Comment augmenter son solde CPF ?

Vous êtes crédités à la fin de chaque année travaillée sur votre compte Moncompteformation. Vous pouvez recevoir jusqu’à 500 euros par an. Le plafond est fixé à 5 000€ sauf pour des cas spécifiques où la limite atteint 8 000€..

Les cas spécifiques où le plafond est fixé à 8 000€ :

  • Salarié non qualifié
  • Travailleur reconnu handicapé
  • Victime d’accident du travail ou de maladie professionnelle ayant entraîné une incapacité permanente d’au moins de 10 %
  • Bénéficiaire d’une pension d’invalidité
  • Bénéficiaire d’une pension militaire
  • Bénéficiaire d’une allocation ou rente d’invalidité des sapeurs-pompiers volontaires
  • Bénéficiaire de la carte mobilité inclusion portant la mention « invalidité »
  • Bénéficiaire de l’allocation aux adultes handicapés (AAH)

Que dois-je faire si mon solde CPF n’est pas suffisant ?

Contactez-nous ! Nos conseillers peuvent vous aider à trouver des sources de financement complémentaires en fonction de votre situation, tels que Pôle emploi, votre entreprise, vous-même (via carte bleue), ou encore l’OPCO Atlas.

Comment puis-je financer cette formation ?

Contactez-nous pour trouver une solution de financement sur mesure ! Nous vous aiderons à choisir parmi les options suivantes :

  • OPCO (opérateurs de compétences) de votre entreprise
    • Le plan de développement des compétences
    • Les actions collectives pour les formations Big Data
    • Le dispositif FNE-Formation
    • Dispositif TPE / PME
  • Pôle Emploi
    • L’AIF (Aide Individuelle à la Formation pour les demandeurs d’emploi)
    • L’ARE (Allocation chômage d’aide au retour à l’emploi)
  • Le dispositif CPF (MonCompteformation)
  • Contrat cadre

Pour aller plus loin

Formation React Avancé

Formation React Native

Formation ReactXP

Formation Angular Avancé

Formation Angular

Formation Vue.js

Autour du sujet

Langues et Lieux disponibles

Langues

  • Français
  • Anglais / English

Lieux

  • France entière
    • Paris
    • Lille
    • Reims
    • Lyon
    • Toulouse
    • Bordeaux
    • Montpellier
    • Nice
    • Sophia Antipolis
    • Marseille
    • Aix-en-Provence
    • Nantes
    • Rennes
    • Strasbourg
    • Grenoble
    • Dijon
    • Tours
    • Saint-Étienne
    • Toulon
    • Angers
  • Belgique
    • Bruxelles
    • Liège
  • Suisse
    • Genève
    • Zurich
    • Lausanne
  • Luxembourg

Nos Formateurs Référents

Sydney

Sydney

Sydney à créé plusieurs entreprises et est maintenant freelance full stack JavaScript. Titulaire d’un master en Digital Business de l’IE business school de Madrid, il fait partie de la génération 42. Passionné par les tendances technologiques et leur impact sur l’apprentissage. Il est le globetrotter d’Ambient.
Alexandre

Alexandre

Notre formateur passionné vous proposera de partager son expérience acquise notamment chez Interactive Data, le n°3 mondial de la distribution de données financières et Somhome, une startup proposant des services de location comme « airBnB »

Témoignages

Rated 5,0 out of 5
30 novembre 2023

Je recommande la formation

Alain W. de chez Sysmex France

Afficher tous les témoignages

Rated 5,0 out of 5
30 novembre 2023

Je recommande la formation

Alain W. de chez Sysmex France
Rated 5,0 out of 5
30 novembre 2023

Je recommande la formation

Mihai C. de chez Ericsson France
Rated 4,0 out of 5
30 novembre 2023

Les + : Environnement de travail adéquat, mise à disposition d’outils pour les personnes en distanciel.

Confiseries à volonté. Déjeuner offert.

Les – : Accès aux locaux compliqués (chemin d’accès via le parc, porte d’entrée verrouillée le matin).

GUILLAUME Q. de chez DIGITEKA TECHNOLOGIES
Rated 4,0 out of 5
30 novembre 2023

Je recommande la formation

JEREMY N. de chez DIGITEKA TECHNOLOGIES
Rated 5,0 out of 5
30 novembre 2023

Les + : le fait de « voir faire »

Les – : –

Petre A. de chez Ericsson France
Rated 4,0 out of 5
30 novembre 2023

Les + : Avoir bien revu les bases, plus approfondir des notions. Bon prof

NATHAN N. de chez DIGITEKA TECHNOLOGIES
Rated 4,0 out of 5
30 novembre 2023

Les + : Explication de la théorie par des exemples pratiques.

Les – : En distanciel, les questions de la salle ne s’entendent pas (mardi) ou très peu.

Eric D. de chez Ericsson France
Rated 5,0 out of 5
30 novembre 2023

Je recommande la formation

ALLA A. de chez DIGITEKA TECHNOLOGIES
Rated 5,0 out of 5
7 septembre 2023

Les + : On parcours React en un temps record et surtout le formateur qui a un niveau monstre parle aussi du choix stratégique de la techno et pas juste faire du React pour du React (cf : Notation de React par rapport aux autres Framework, WebComponents…).

Les – : RAS

En synthèse : Un grand merci à Antonin qui m’a fait découvrir React pour la 1ere fois !!! Super Formateur !!

Alexis L. de chez MACIF - Service : Développement des compétences
Rated 5,0 out of 5
7 septembre 2023

Les + : – Contenu : plus de pratique que de théorie

– Liveshare a facilité le bon déroulé de la formation

– Le formateur pédagogue

Les – : – formation en visio, plus compliquée qu’en présentielle pour suivre

– le formateur ne pouvait partager qu’un écran en même temps

Je souhaite suivre : Accessibilité

CSS et/ou frameworks graphiques

Margo U. de chez MACIF - Service : Développement des compétences
Rated 5,0 out of 5
7 septembre 2023

Les + : Le formateur (partage de bonnes pratiques, forte adhérence avec le monde du travail…), les outils de Visual Studio Code (plugins / notamment LiveShare)

Les – : Sans être totalement indispensable, en présentiel est un +

Fabien B. de chez
Rated 4,0 out of 5
7 septembre 2023

Les + : Beaucoup de pratique ce qui est très formateur.

Les – : Formation faite en remote ce qui a nuit à la fluidité. Timing un peu trop rapide pour moi.

Stephane M. de chez

Noter la formation

Prix 2400€ HT / personne
Durée 4 jours (28 heures)
Parcours CPF

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp