Formation ReactJS
| 1800€ HT / personne |
| 3 jours (21 heures) |
Présentation
ReactJS est une bibliothèque open-source JavaScript développée par Facebook depuis 2013 en partenariat avec Instagram et soutenue par une grande communauté de développeurs.
Le but principal de cette librairie est de faciliter la création d’application Single-Page via des composants dépendant d’un état et générant du HTML à chacun de ses changements.
Grâce à ses performances élevées, elle a tout de suite conquis les entreprises, dont Airbnb, Sony, Netflix !
Avec cette formation sur ReactJS vous allez découvrir comment exploiter pleinement cette technologie web avancée, sur l’une des librairies les plus utilisées notamment dans les nouveaux projets de Web Apps.
Comme tous nos programmes, notre formation porte sur la toute dernière version en date de cette librairie à savoir ReactJS 18.
Objectifs
- Découvrir les spécificités de ReactJS 18
- Maîtriser les fonctionnalités dans la dernière version 18 de React la technologie JavaScript de Facebook
- Développer des applications web avec ReactJS
- Créer des composants web complexes rapidement
- Application SinglePage avec React.JS, Flux et isomorphisme
- Mettre en place une application web performante
- Appréhender React Native
- Savoir optimiser les performances des RIA
Public visé
- Développeurs web
- Architectes
- Chef de projets
Pré-requis
- Connaissances en JavaScript ES5 minimum
Programme de notre formation React JS
Introduction
- Rappels, de ES6 à ESNext
- JavaScript, DOM et ShadowDom
- Design patterns applicatifs classiques.
- 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 Webpack
- Composants à état, fonction de rendu simple, performance
- JavaScript ou JSX
- Comprendre JSX
- Méthodes principales de l’API
- 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
ES6, ES2015 et TypeScript
- Compileurs : transpiler avec Babel
- TypeScript: Création et configuration avec ESLint (TSLint)
- Passer de Flow à Typescript par l’exemple
- Workflow et bonnes pratiques
Composants
- Fragments
- Événements, autobinding et délégation
- Design Pattern : les composants à état
- 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)
- Manipulation du DOM
- Portals
HOOKS
- useState
- useEffect – comprendre le cycle de vie et les désabonnements
- useReducer
- Séparer la logique d’un composant pour augmenter sa réutilisation
- useRef
- Comprendre la mémorisation et la notion de pureté
- useCallback
- useMemo
NOUVEAUTÉS REACT18
- useId
- useTransition
- Suspense API
- Lazy loading et code splitting
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
- Route Privée
CONTEXT
- Définition et cas d’utilisation
- Création de plusieurs contextes
- Utilisation des différents contextes
LIBRAIRIES DE COMPOSANTS
- SemanticUI
- MaterialUI
- React-Bootstrap
- AntDesign
- Comment utiliser une librairie sans créer de dette technique
REDUX
- Comprendre Redux
- Installer redux-toolkit
- Les actions, creators et dispatchers
- Utilisation des providers et de l’injection des composants pour organiser un Store
- Redux
- Exemple de TODO list avec Redux
- Redux VS Context? Quand utiliser lequel ?
PERFORMANCE ET ARCHITECTURE
- Immutabilité
- High Order Component (HOC)
- Outils de développement & tests
- Server-side rendering
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
Alexandre
Témoignages
Je recommande la formation
Afficher tous les témoignages
Je recommande la formation
Les – : une courte durée
Je souhaite suivre : Angular
Je recommande la formation
Les – : La formation est trop courte pour son contenu. Une journée de plus (au moins ) serait un vrai bénéfice pour pouvoirrendre le rythme soutenable et s’occuper de tous les sujets prévus de manière sereine :).
Les + : Le formateur est à l’écoute, il est concis. Il a réponse à tout !
Les – : 3 jours c’est léger pour appréhender facilement toute la complexité de l’outil
Les + : Exercices très complets
Les – : le temps
Les + : Le formateur est pédagogue
Les – : La durée (trop courte) de la formation n’est pas adapté au contenu.
Les + : Formation très complète, formateur très compétent
Les – : Trop complète : pas assez de temps pour digérer les informations présentées (peut-etre en raison de mon niveau débutant en front/javascript), 1 jour de formation supplémentaire aurait été bien utile pour mieux assimiler le volume total (ou bien en présenter un peu moins en 3 jours ? )
Je souhaite suivre : NodeJS, Docker
En synthèse : Si possible pouvoir télécharger le support de formation (j’ai l’impression qu’il n’y a que la version web)
Les + : Alterner très régulièrement entre théorie et pratique est la meilleure méthode, je pense (je rajouterai encore plus de parties pratiques même sur des choses très simples).
Les – : Je ne sais pas si cette formation est conseillée pour des étudiants débutants (2ans d’exp) mais je trouve la durée plutôt courte pour intégrer des concepts parfois un peu complexes.
Les + : Bon formateur et de larges notions de React sont abordées.
Je recommande la formation
Les + : Pédagogie / Rythme
Les + : Un bon rythme
Je souhaite suivre : Nestjs
Je recommande la formation
Les + : le formateur maitrise son sujet et accompagne avec son expertise
Les + : Bonne écoute du formateur et a donné des réponses pertinentes et détaillées qui ont aidé à mieux comprendre le raisonnement.
Les + : Cours super bien expliqués, très bons exemples
Les + : on voit beaucoup de choses
Les + : Bon formateur qui explique bien, malgré mon niveau débutant en code, j’ai réussi à suivre une grande partie de la formation sans trop de difficultés.
Les – : Les points faibles sont au niveau de mes propres compétences, étant débutant (étudiant en début de première année de code) la formation était un peu trop courte, et donc condensée pour moi. Pas assez de temps pour pouvoir approfondir et prendre le temps de développer certains points.
Les + : Le formateur
Je souhaite suivre : React avancé / node avancé / typescript avancé
Noter la formation
| 1800€ HT / personne |
| 3 jours (21 heures) |
