Formation React
Cette formation vous permettra de profiter pleinement du potentiel de React, une librairie open-source qui peut servir à la fois pour construire des sites web que des logiciels ou applications mobiles.

En résumé

Objectifs

Apprendre à développer avec la toute dernière version de React.

Appréhender l’écosystème React et savoir être autonome.

Gérer l’état de ses applications et les communications avec l’extérieur.

Devenir efficace, seul ou en équipe, grâce à la Programmation Orientée Composant.

Public visé

Développeurs web
Développeurs mobiles
Développeurs logiciels

Pré-requis

Bases en web
Bases en Javascript

En quelques mots

Ce stage pratique délivre toutes les compétences nécessaires au développement autonome d’applications (très!) performantes. Il s’adresse principalement aux développeurs web, sans pour autant se limiter à ceux-ci.
La durée du stage dépend du niveau du public ainsi que du degré de perfectionnement requis / des objectifs à atteindre.

Vous profiterez pendant ce stage d’expériences concrètes issues de problématiques réelles rencontrées par Log’in Line lors d’exemples d’applications web / mobiles en production, développées avec React.

Plan du cours

1. Introduction & rappels

– HTML, CSS, JavaScript
– Quelles sont les limites des outils classiques ?
– Les frameworks et librairies JavaScript
– React dans cet écosystème
– Node, NPM
– Comment développer avec React (IDE, navigateurs, plugins)

2. React

– DOM vs Virtual DOM
– La transpilation, ES6, Babel, Webpack
– JSX
– React : une bibliothèque, une API
– Point d’entrée : injection initiale d’un composant dans le DOM
– Boilerplate : Create React App

3. La POC dans React

– Créer des composants
– Lifecycle des composants
– Gérer les états des composants
– Data Flow, Props vs States
– Class components vs functional components
– Gestion du style (SASS, SCSS, JSS)

4. La logique dans React

– Qu’est-ce que la logique à l’échelle d’une application React ?
– Deux patterns très utilisés : HoC, Render props
– La logique via les functional components
– Séance pratique avec des APIs

5. La création d'applications

– Comment gérer la propagation des données ?
     – Provider/Consumer pattern
     – Stores globaux

– Comment gérer le routage ? Dans un browser ? Dans une application ?
     – React Router

– Gérer les erreurs côté front-end & error boundaries

– Comment architecturer son projet ? Ses dossiers ?
     – Exemples de patterns & architectures classiques

+

(Option) Isomorphisme / Server side rendering

– Pourquoi rendre une application isomorphe ? Intérêts et inconvénients
– Comprendre les concepts d’une application isomorphique
– Hydratation dynamique du DOM
– Les différentes techniques côté serveur

P

Compléments

– Redux en détail (option)
– MobX en détail (option)
– Intro à React Native (option)
– Optimisations avancées (code splitting & imports dynamiques, immutabilité, selecteurs, …) (option)

Contactez-nous

Pour participer à l’une de nos formations