React 2021 Par La Pratique, De A À Z (Évolution Progressive)

Apprenez les bases de React et ses modules importants dont React-Router V5/Axios/React-Bootstrap en créant 4 applis

What you'll learn
Développer des applications avec la librairie React
Communiquer avec des serveurs et API REST (axios)
Mettre en place de manière basique un serveur Firebase et une database
Créer des sites internet "Single page" avec le module React-Router
Mettre en ligne ses applications et sites internet développés avec React sur un serveur Apache
Utiliser Bootstrap avec et sans React-Bootstrap
Requirements
Avoir de bonnes connaissances en Javascript (+ connaître bootstrap, HTML, CSS)
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 hooksREACT 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 / librairieLe 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 formulairesNous 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 RouterNous 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Qui suis-je ?

Lecture 3 Conseils pour suivre la formation

Lecture 4 Le parcours de formation

Lecture 5 Installations

Lecture 6 Installation de Visual Studio Code

Lecture 7 Installation de Node.JS

Lecture 8 Qu'est ce que REACT ?

Lecture 9 PDF

Section 2: Initialisation

Lecture 10 Avant de démarrer

Lecture 11 Création de la première application

Lecture 12 Le JSX

Section 3: Les composants

Lecture 13 Composants simples

Lecture 14 Des composants plus "complexes"

Lecture 15 Des composants dans des composants

Lecture 16 Passage d'informations à un composant

Lecture 17 Classes

Lecture 18 Synthèse

Section 4: Le states

Lecture 19 Le principe

Lecture 20 Cycle de vie

Lecture 21 L'horloge & setState

Lecture 22 setState

Lecture 23 Synthèse

Section 5: Structuration (Dossier, CSS …)

Lecture 24 Restructuration du dossier SRC

Lecture 25 Le CSS dans REACT

Lecture 26 Tests et ternaires

Lecture 27 Synthèse

Section 6: Les événements

Lecture 28 Le clic sur un bouton

Lecture 29 Evénements et states

Lecture 30 Modifier une personne

Lecture 31 Synthèse

Section 7: Propriété "children"

Lecture 32 L'utilisation de la propriété "children"

Lecture 33 Synthèse

Section 8: Les listes

Lecture 34 Listes et fonction map

Lecture 35 La propriété "key"

Lecture 36 Synthèse

Section 9: Projet 1 : Les livres et un CRUD Front-End

Lecture 37 Présentation du projet et choix des composants

Lecture 38 Création du projet

Lecture 39 Ajout de bootstrap

Lecture 40 Composant "Titre"

Lecture 41 Créer un Snippet

Lecture 42 Changer la police

Lecture 43 Composant Bouton

Lecture 44 Composant Livres

Lecture 45 Liste de livres

Lecture 46 Composant Livre

Lecture 47 Supprimer un livre

Lecture 48 Bouton d'ajout d'un livre

Lecture 49 Composant formulaire d'ajout

Section 10: Les formulaires dans REACT

Lecture 50 Création du formulaire d'ajout

Lecture 51 Soumission du formulaire

Lecture 52 Ajout du livre dans les states

Lecture 53 Fermer le formulaire

Lecture 54 La modification d'un livre

Lecture 55 Composant Alert

Lecture 56 Synthèse

Section 11: La validation des formulaires

Lecture 57 Le formulaire d'ajout d'un livre avec Formik

Lecture 58 La validation des saisies avec Formik

Lecture 59 La validation des saisies avec YUP

Section 12: Projet 2 : Créateur de personnages (Ajout de firebase)

Lecture 60 Présentation du projet

Lecture 61 Préparation du projet

Lecture 62 Composants bouton et titre

Lecture 63 Composant CreateurPersonnage

Lecture 64 Composant ImagePerso

Lecture 65 Les flèches

Lecture 66 Changer d'image

Lecture 67 Points de caractéristiques

Lecture 68 Les boutons liés aux caractéristiques

Lecture 69 La mise à jours des points de caractéristiques dans les states

Lecture 70 Affichage des armes

Lecture 71 Sélectionner une arme

Lecture 72 Bouton "créer" et "réinitialiser"

Section 13: Firebase & Database & Axios

Lecture 73 Création de la DB

Lecture 74 Axios & Firebase

Lecture 75 Enregistrer les personnages

Lecture 76 Lister les personnages créés

Lecture 77 Rafraîchissement des données

Section 14: Projet 3 : API REST & Axios

Lecture 78 Présentation du projet

Lecture 79 Création du projet

Lecture 80 Utilisation de l'API REST

Lecture 81 Filtrer sur les pays

Lecture 82 La pagination

Section 15: Routage

Lecture 83 Attention : Comptabilité V5 - V6

Lecture 84 Les bases du routage

Lecture 85 NavBar

Lecture 86 Afficher un pays (étape1)

Lecture 87 Afficher un pays (étape 2)

Lecture 88 Erreur 404

Lecture 89 Paramétrage des NavLinks

Lecture 90 Mise en ligne

Lecture 91 Synthèse sur le routage

Section 16: Projet 4

Lecture 92 Présentation du projet

Lecture 93 Structure du site

Lecture 94 React router

Lecture 95 NavBar avec React-Bootstrap et React-Router

Lecture 96 La page d'accueil

Lecture 97 Erreur 404

Lecture 98 Page contact et formulaire

Lecture 99 Validation du formulaire avec Formik et Yup

Lecture 100 Page localisation (étape 1)

Lecture 101 Page localisation (étape 2)

Section 17: Introduction aux Hooks

Lecture 102 Les hooks

Lecture 103 useState

Lecture 104 useState et les objets

Lecture 105 useEffect

Lecture 106 Hook personnalisé

Section 18: Projet 5 : Utilisation des connaissances sur les hooks

Lecture 107 Présentation du projet

Lecture 108 Les bases du projet

Lecture 109 Lister les formations

Lecture 110 Hook personnalisé : useLoadData

Lecture 111 Filtrer par catégorie

Section 19: Bonus - Mes autres cours

Lecture 112 Continuer son apprentissage

Développeur web,Etudiant en développement,Reconversion professionnelle