Développer des applications web avec ReactJS

Objectifs pédagogiques 

• Créer une application React.js
• Savoir utiliser les outils de développements
• Développer des interfaces utilisateurs
• Tester les composants
• Mettre en place une architecture avec Redux

Programme détaillé

‍

Javascript

• Historique
• ES5 / ES6 / ES7
• Callback vs Promise vs Async/Await
• Mise en pratique : Installation de l’environnement de développement et manipulation langage JavaScript

Objectif opérationnel : Rafraîchir les connaissances de la prochaine génération de Javascript (ES)

Moyen d’évaluation : QCM

Présentation de React.js

• Historique du framework
• Utilisation de Create React App
• Comprendre la structure du projet React
• Syntaxe JSX
• Premiers composants (Render, Props, State, …)
• Mise en pratique dans un projet initialisé : Manipulation simple de composants

Objectif opérationnel : Découvrir la syntaxe du JSX et avoir une idée de ce que c’est un composant React

Moyen d’évaluation : QCM

Composants

• Class Components
• Functional Components
• Lifecycle and states
• Conditional rendering et listes
• Composition
• Higher Order Components (HOC)
• Context API
• Atelier : Manipuler les composants, leur cycle de vie et la mise en page

Objectif opérationnel : Plonger profondément dans les composants React et comprendre leurs différents types

Moyen d’évaluation : QCM

‍

React Hooks

• Présentation des Hooks
• L’utilisation de useEffect() hook
• L’utilisation de useState() hook
• L’utilisation de useRef() hook
• D’autres hooks

Objectif opérationnel : Pouvoir utiliser les Hooks pour se servir des fonctionnalités de React (state, lifecycle, context…) dans des composants fonctionnels

Moyen d’évaluation : QCM

‍

Requêtes HTTP en React.js

• Comprendre les requêtes HTTP en React
• Axios vs Fetch
• Gestion des requêtes avec Async/Await

Objectif opérationnel : Pourvoir échanger avec un service HTTP externe pour récupérer et transmettre des données

Moyen d’évaluation : QCM

‍

Router

• Pourquoi avons-nous besoin d’un outil pour le routing entre les pages ?
• Présentation de react-router
• Atelier : Réalisation d’une application permettant de mettre en place plusieurs pages et de naviguer entre elles

Objectif opérationnel : Pouvoir gérer des pages multiples et les lier en utilisant react-router

Moyen d’évaluation : QCM

‍

Code quality

• Présentation des outils permettant de garantir la qualité d’une application React.js
• Eslint
• Jest et Enzime
• Atelier en s’appuyant sur une application réalisée précédemment : Ajout des outils Esllint, Jest et Enzime

Objectif opérationnel : Écrire un code clean, valide et bien tester

Moyen d’évaluation : QCM

‍

‍