REACT 2021 par la pratique, de A à Z (évolution progressive)

Description

Le cours utilise la version 5 de REACT ROUTER. La V6 est disponible depuis fin 2021. Pour suivre cette formation, je vous inviterai à utiliser la même version que moi et à regarder la documentation relative aux mises à jours de la V6.

Nouveau 2021 : Ajout de 2 modules sur les Hooks (1,5h) :

- Introduction aux Hooks

- 5ème mini-projet utilisant les hooks

REACT 2020 par la pratique, de A à Z (évolution progressive) :

Avec ce cours, vous apprendrez les bases de la librairie JavaScript REACT au travers de 4 applications différentes.

C'est l'un des "cours de fin de parcours" que je propose dans le cursus JavaScript H2PROG ; il en contient 10 autres permettant d'apprendre ce langage de programmation, les bases de données (MongoDB / SQL), l'architecture MVC, la programmation Serveur, la programmation Front-End ....

Un niveau Intermédiaire :

Même si j'explique tout ce qui est réalisé, il vous faudra disposer de bonnes bases en programmation JavaScript pour suivre ce cours dans de bonne conditions !

Je ne recommande pas à un débutant en programmation de démarrer son apprentissage par l'utilisation d'un Framework  ou d'une librairie (en particulier REACT).

La progression normale d'un apprenti développeur est la suivante :
Algorithmique -> langage de programmation -> framework / librairie

Le niveau est cependant "Débutant" en ce qui concerne la librairie REACT.

Le cours...

... permettra d'apprendre les bases de la librairie et toutes les notions fondamentales pour l'utiliser dans de bonnes conditions. Vous aurez des diapositives de synthèse téléchargeables que vous pourrez imprimer et utiliser au besoin dans la poursuite de votre apprentissage.

La première application...

... contiendra toutes les bases de la librairie et sera un "gros" exercice du cours. Nous rajouterons en plus deux notions fondamentales liées aux sites et applications web avec :

• la création de formulaires avec React,

• l'utilisation des modules Formik et Yup pour valider les formulaires

Nous créerons une application permettant de gérer des livres (CRUD front-End).

La deuxième application...

... permettra de mettre en pratique tous vos acquis et rajoutera la possibilité d'échanger avec un "serveur" tels que Firebase. Nous créerons sur ce dernier une base de données qui contiendra plusieurs informations que nous pourrons récupérer dans notre application grâce à Axios. Nous verrons également comment envoyer des informations au serveur.

Nous programmerons une application permettant de créer des personnages (type RPG).

La troisième application...

... permettra encore plus de pratique sur les fondamentaux, l'utilisation des compétences apprises dans la deuxième application, en particulier sur le module Axios. Nous communiquerons avec une API REST (REST Countries) pour récupérer des données et les traiter en Front avec React. Nous en profiterons pour apprendre comment créer un site web complet via l'utilisation de React Router

Nous créerons un site permettant d'afficher tous les pays du monde (drapeau, nom, capitale ....), depuis une l'API REST Countries.

La quatrième application...

... permettra de consolider les acquis des 3 premières et de créer un site web supplémentaire avec 3 pages (la page d'accueil, l'application, la page de contact).

Cette application fournira l'occasion d'installer le module React-Bootstrap et de voir comment il s'utilise en combinaison avec React-Router. Nous ajouterons une application permettant de lister tous les établissements publics Français, en utilisant une API REST du gouvernement.
Nous verrons enfin comment mettre en ligne ce site internet sur un serveur Apache!

L'objectif...

Avec plus de 10 heures d'enregistrements, vous disposerez du nécessaire pour développer sereinement des applications et sites internet Front-end avec la librairie REACT.

A l'issue de cette formation  vous pourrez rajouter cette nouvelle compétence sur votre CV.

Les applications sont disponibles en ligne et sont testables !

Merci et à très vite !

Matthieu de H2PROG.

TAKE THIS COURSE