Formation React / Redux
React est une bibliothèque JavaScript open source créée par Facebook pour la création d'interfaces utilisateur. Elle a été conçue pour faciliter la création de composants d'interface utilisateur réutilisables et performants, qui peuvent être utilisés pour construire des applications Web et mobiles. React utilise un modèle de données déclaratif, ce qui signifie que vous décrivez ce que vous voulez afficher sur l'interface utilisateur, sans avoir à vous occuper de la façon dont cela est affiché. React gère lui-même la mise à jour de l'interface utilisateur en fonction des changements dans les données. Cela rend les applications React rapides et réactives, car elles ne rechargent pas toute la page lorsque les données changent, mais mettent simplement à jour les éléments de l'interface utilisateur qui ont été modifiés. React est souvent utilisé avec d'autres bibliothèques et frameworks, tels que Redux pour la gestion de l'état de l'application et React Router pour la gestion de la navigation. Il est également couramment utilisé avec des bibliothèques de composants, comme Material-UI ou React-Bootstrap, qui fournissent des composants prédéfinis pour la création d'interfaces utilisateur.
Objectifs pédagogiques
- Créer des composants React en lien avec le State et les Props
- Maitriser le JSX, les listes et les événements
- Développer une application en lien avec Redux
- Créer une Single Page Application avec React Router
Pré-requis
- Connaître les bases d'HTML et CSS
- Avoir déjà développé en JavaScript
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Les IDEs JavaScript
- Visual Studio Code
- WebStorm
- EditorConfig
Une réintroduction à JavaScript
- Closures
- Fonctions Constructeurs et Prototype
- De ES6/ES2015 à ESNext
Outillage d’un projet React
- Les bundlers : webpack, Parcel, Rollup, esbuild...
- Live Server et Hot Reloading
- create-react-app
- React Developer Tools
Introduction à React
- Création d'un projet
- Les commandes de react-scripts
- Premier Composant React
- Composant stateless vs statefull
Jour 2
JSX
- Ecrire un composant sans JSX
- Expressions et propriétés
- Rendu conditionnel
- Liste et clés
Composants React
- State et Cycle de vie
- Ecouter des événements
- Les formulaires
- Partager le state entre plusieurs composants
- Mettre en forme avec les CSS Modules ou du CSS in JS
Introduction à Redux
- Pourquoi et quand utiliser Redux ?
- Structurer son app React autour d'un seul state
- Redux Devtools Extension
- Actions, Dispatch et Reducers
- Intégrer Redux dans React avec react-redux
Jour 3
Structurer une application Redux
- Factoriser les types avec des constantes
- Factoriser les actions avec des actions creators
- Les sélecteurs et la bibliothèque reselect
React Router
- Créer une Single Page Application avec React Router
- Créer des liens
- Déclencher une navigation
- Récupérer le contenu de l'URL
- Imbriquer des Routes
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation React / Redux accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Olivier T.
La formation
top
Chayma B.
Saifeddin D.
Jingyi L.
Nicolas D.
Laurent L.
Ludovic R.
Philippe G.
Jingyi L.
Abdeljabar M.
Gerald H.
Ines B.
Thomas D.
Sarra S.
Florent V.
Frédéric G.
Florent P.
Thouraya A.
Thomas M.
Amel T.
Nizar T.
Badreddine B.
Asma Y.
Assem M.
Chaima K.
Le formateur
Un grand merci pour le formateur.
Mouhcen H.
Lin C.
Ilias L.
Le formateur
Les explications du formateur étaient très claires et bien illustrées. Très bon programme !
Tomy R.
Livio C.
Commentaire général
Je ne sais pas
Bilel T.
Wedjen M.
Marie B.
La formation
J'aurais juste aimer aborder davantage les contextes natifs de react et ensuite voir ce que proposait Redux, pour bien comprendre le gap entre les deux.
Le formateur
Parfait
Florent G.
Ayoub M.
Mathieu C.
Patricia D.
Moez B.
Benjamin G.
Wissem A.
Enis K.
Edin K.
Matthieu B.
Claire R.
Sébastien L.
Hervé C.
Intissar Z.
Gilles C.
Stéphane F.
Vincent G.
Michel Z.
Pascal H.
La formation
Contenu dense. J'ai trouvé cette partie peut être plus abordable que d'autres comme Invesify.
Les +
La mise en application dans des exercices.
Julien D.
Fabrice C.
Les +
Diversité des sujets abordés (CSS, bases de données, tests unitaires...)
Christophe M.
Commentaire général
Toutes ces formations m ont permis de comprendre les principes et les problematiques liés aux langages comme TS et les frameworks
Stéphane G.
Les +
Qualité, disponibilité, méthodologie du formateur
Quentin G.
Aymen A.
Yosra G.
Pascale M.
Nabil S.
Frédéric C.
La formation
Un peu particulier comme maniere de coder, probablement une question d'habitude.
Le formateur
Tres bien.
Les +
Les exemples permettent de bien comprendre l'idee generale.
Apres restent les subtilites.
Commentaire général
A voir en fonction des besoins et des taches prevues sur cube2.
Patrice M.
Cédric C.
Maxime D.
La formation
Nécessiterait peut-être un peu plus de temps pour faires d'autres TP et mieux intégrer le "mindset" React, qui n'est franchement pas intuitif quand on n'arrive des technos non web.
Eric A.
La formation
Manque parfois certains details lors des exercices
