Name: React et Redux — Créer des sites web interactifs
Availability: InStock

Objectifs pédagogiques

Ce que vos stagiaires apprendront

Qu'est-ce que React
Single Page et Multi page
Installation
Rappels sur JavaScript
Premiers pas avec React
Le cycle de vie d'une application
Les React Hooks
Design avec React
Exercice
La logique avec React (les conditions, les composants)
Approfondissement (Les HOC, les refs, le context API)
Firebase et Axios
React et les formulaires
Redux
Envoyer son projet sur internet
Astuces

Contenu

Programme de la formation

158 leçons • Durée totale: 04:10:13 Développer toutes les sections

Section 1: Leçons 1 à 10

10 leçons 16 min

Bienvenue dans la formation "Créez des sites intéractifs avec React et Redux"

2 min
Test de positionnement

3 min
Quelques conseils avant de commencer

2 min
Avant de commencer - Bienvenue dans ce cours !

1 min
Avant de commencer - Prérequis

1 min
Avant de commencer - Comment réussir cette formation

1 min
Orientation - Commencez la formation selon votre niveau

2 min
Partons sur de bonnes bases - Qu'est-ce que React ?

3 min
Partons sur de bonnes bases - Comprendre la différence entre des sites « Single Page » et « Multi Page »

3 min
Partons sur de bonnes bases - Quels logiciels utiliser ?

2 min

Section 2: Leçons 11 à 20

10 leçons 13 min

Partons sur de bonnes bases - Quelles extensions installer

3 min
Quelques rappels sur les nouveautés de JavaScript - Revoyons ensemble les nouveautés de JavaScript

1 min
Quelques rappels sur les nouveautés de JavaScript - Oubliez « var », utilisez « let » et « const

3 min
Quelques rappels sur les nouveautés de JavaScript - Les fonctions fléchées

1 min
Quelques rappels sur les nouveautés de JavaScript - Les objets

1 min
Quelques rappels sur les nouveautés de JavaScript - Les classes (constructeur, propriétés et méthodes)

2 min
Quelques rappels sur les nouveautés de JavaScript - Les modules (import et export)

2 min
Quelques rappels sur les nouveautés de JavaScript - L'affectation par décomposition

1 min
Quelques rappels sur les nouveautés de JavaScript - Le REST parameter

1 min
Quelques rappels sur les nouveautés de JavaScript - Les types primitifs et les types par référence

1 min

Section 3: Leçons 21 à 30

10 leçons 19 min

Quelques rappels sur les nouveautés de JavaScript - Nous voici prêts pour entrer sur la planète React

1 min
Nos premiers pas avec React - Notre première application avec React

2 min
Nos premiers pas avec React - Composant par classe VS Composant par fonction

3 min
Nos premiers pas avec React - Ajoutons un nouveau composant

2 min
Nos premiers pas avec React - À la découverte des props (propriétés)

3 min
Nos premiers pas avec React - Utiliser du JavaScript dans du JSX

1 min
Nos premiers pas avec React - La propriété children

2 min
Nos premiers pas avec React - Et si on stockait des données (Le state)

5 min
Nos premiers pas avec React - Props VS State

1 min
Nos premiers pas avec React - Les composants Statefull et Stateless

3 min

Section 4: Leçons 31 à 40

10 leçons 22 min

Nos premiers pas avec React - Changer le state grâce aux événements

1 min
Nos premiers pas avec React - Les événements disponibles

2 min
Nos premiers pas avec React - Modifier proprement le state

1 min
Nos premiers pas avec React - Voir et modifier les props et les states depuis son navigateur

2 min
Nos premiers pas avec React - Quand mettre des parenthèses

1 min
Le cycle de vie d'une application React - Qu'est-ce que le cycle de vie d'une application

1 min
Le cycle de vie d'une application React - Analysons les différents états

8 min
Le cycle de vie d'une application React - Eviter l'actualisation d'un composant inutilement

3 min
Prenons un voyage pour le futur : les React Hook - Qu'est-ce que les React Hook

1 min
Prenons un voyage pour le futur : les React Hook - Comment utiliser le State avec React Hook

6 min

Section 5: Leçons 41 à 50

10 leçons 20 min

Prenons un voyage pour le futur : les React Hook - Les autres états

5 min
Prenons un voyage pour le futur : les React Hook - Limiter la mise à jour d'instructions inutilement

2 min
Projet 1 - Un prévisualisateur de markdown - Qu'allons-nous faire dans ce projet

3 min
Projet 1 - Un prévisualisateur de markdown - Avant de se lancer préparer son projet

2 min
Projet #1 - Un prévisualisateur de markdown - Etape 1 - Créer le HTML et le CSS

3 min
Projet #1 - Un prévisualisateur de markdown - Etape 2 - Détecter le changement du texte

2 min
Projet #1 - Un prévisualisateur de markdown - Etape 3 - Installer MarkedJS

2 min
Projet #1 - Un prévisualisateur de markdown - Etape 4 - Transformer le texte en HTML

3 min
Projet #1 - Un prévisualisateur de markdown - Correction

3 min
Parlons design avec React - Qu'allons-nous apprendre dans cette section

1 min

Section 6: Leçons 51 à 60

10 leçons 11 min

Parlons design avec React - Qu'est-ce qu'un module CSS

2 min
Parlons design avec React - Initialisations des modules CSS

2 min
Parlons design avec React - Modifions dynamiquement le CSS avec les modules

2 min
Parlons design avec React - Appliquer un style global sans aucune transformation

1 min
Parlons design avec React - Modifier dynamiquement le style en utilisant JavaScript

1 min
Parlons design avec React - Gérer dynamiquement les classes

2 min
Parlons design avec React - Qu'est-ce que Styled Components

1 min
Parlons design avec React - Utilisons Styled Components sur notre site

1 min
Parlons design avec React - Modifions dynamiquement le CSS avec Styled Components

2 min
Parlons design avec React - Ajouter un effet de hover

1 min

Section 7: Leçons 61 à 70

10 leçons 10 min

Parlons design avec React - Personnaliser dynamiquement Styled Components

1 min
Entraînons-nous au design avec React - Exercice 1 Pratiquer Styled Component

1 min
Entraînons-nous au design avec React - Exercice 1 Correction

2 min
La logique avec React - Utiliser les conditions ternaires pour afficher du contenu

2 min
La logique avec React - Utiliser les conditions if else pour afficher du contenu

1 min
La logique avec React - Lister dynamiquement des composants

1 min
La logique avec React - Supprimer dynamiquement des composants

2 min
La logique avec React - Modifier dynamiquement des composants

1 min
Projet #2 - Une TO-DO list - Qu'allons-nous faire dans ce projet

1 min
Projet #2 - Une TO-DO list - Avant de se lancer préparer son projet

1 min

Section 8: Leçons 71 à 80

10 leçons 11 min

Projet #2 - Une TO-DO list - Découper le code en composants

1 min
Projet #2 - Une TO-DO list - Configurer les modules CSS

1 min
Projet #2 - Une TO-DO list - Etape 3 - Créer le state

1 min
Projet #2 - Une TO-DO list - Etape 4 - Gérer la suppression

1 min
Projet #2 - Une TO-DO list - Etape 5 - Gérer le checkage

1 min
Projet #2 - Une TO-DO list - Etape 6 - Gérer l'ajout d'une nouvelle tâche

2 min
Projet #2 - Une TO-DO list - Correction

2 min
Plongeons dans les profondeurs de React - Les Reacts Fragments

1 min
Plongeons dans les profondeurs de React - Les HOC (composant d'ordre supérieur)

2 min
Plongeons dans les profondeurs de React - Les Refs

2 min

Section 9: Leçons 81 à 90

10 leçons 17 min

Plongeons dans les profondeurs de React - Les Refs dans les composants par classe

1 min
Plongeons dans les profondeurs de React - Le context API

2 min
Plongeons dans les profondeurs de React

1 min
Quiz du module 1

3 min
Restez organiser pour un meilleur apprentissage !

1 min
Connectons-nous au monde extérieur (Firebase / Axios) - Qu'allons-nous faire dans cette section

1 min
Connectons-nous au monde extérieur (Firebase / Axios) - Créer une application sur firebase

2 min
Connectons-nous au monde extérieur (Firebase / Axios) - Installer Axios pour gérer les requêtes AJAX

1 min
Connectons-nous au monde extérieur (Firebase / Axios) - Créer une base de données

2 min
Connectons-nous au monde extérieur (Firebase / Axios) - Ajouter des données

5 min

Section 10: Leçons 91 à 100

10 leçons 13 min

Connectons-nous au monde extérieur (Firebase / Axios) - Récupérer des données

3 min
Connectons-nous au monde extérieur (Firebase / Axios) - Supprimer des données

3 min
Connectons-nous au monde extérieur (Firebase / Axios) - Modifier des données

2 min
Connectons-nous au monde extérieur (Firebase / Axios) - Gérer les erreurs

1 min
Connectons-nous au monde extérieur (Firebase / Axios) - Ajouter un spinner pendant le chargement des données

1 min
Connectons-nous au monde extérieur (Firebase / Axios) - Améliorons notre code en créant une instance Axios

2 min
Projet #3 - Une TO-DO list améliorée - Qu'allons-nous faire dans ce projet

1 min
Projet #3 - Une TO-DO list améliorée - Avant de se lancer préparer son projet

1 min
Projet #3 - Une TO-DO list améliorée - Etape 1 - Créer le focus à l'affichage de la page

1 min
Projet #3 - Une TO-DO list améliorée - Etape 2 - Configurer firebase

1 min

Section 11: Leçons 101 à 110

10 leçons 13 min

Projet #3 - Une TO-DO list améliorée - Etape 3 - Permettre l'ajout d'une tâche sur Firebase

3 min
Projet #3 - Une TO-DO list améliorée - Etape 4 - Récupérer les tâches depuis Firebase

2 min
Projet #3 - Une TO-DO list améliorée - Etape 5 - Permettre la mise à jour d'une tâche sur Firebase

2 min
Etape 6 - Permettre la suppresion d'une tâche sur Firebase

2 min
Projet #3 - Une TO-DO list améliorée - Correction

2 min
Projet #4 - Un véritable blog - Qu'allons-nous faire dans les prochaines sections

1 min
Faisons un site avec plusieurs pages - Plusieurs pages dans une seule page

2 min
Faisons un site avec plusieurs pages - Créons un nouveau projet

1 min
Faisons un site avec plusieurs pages - Mettre en place une route

2 min
Faisons un site avec plusieurs pages - Afficher des pages selon l'adresse visitée

1 min

Section 12: Leçons 111 à 120

10 leçons 11 min

Faisons un site avec plusieurs pages - Ajouter des liens (Link)

2 min
Faisons un site avec plusieurs pages - Mettons en place notre navigation

1 min
Faisons un site avec plusieurs pages - Ajouter du style sur le lien de la page actuelle (NavLink)

2 min
Faisons un site avec plusieurs pages - Passer des paramètres dans les urls du route

2 min
Faisons un site avec plusieurs pages - Passer des ancres et utiliser les requêtes GET

2 min
Faisons un site avec plusieurs pages - Redirigeons notre utilisateur directement

1 min
Faisons un site avec plusieurs pages - Essayons de rediriger un utilisateur dans un sous-composant

1 min
Faisons un site avec plusieurs pages - Que faire si la page demandée n'existe pas

1 min
Faisons un site avec plusieurs pages - Que faire si la page demandée n'existe pas

1 min
Faisons un site avec plusieurs pages - Stocker les routes dans un fichier de configuration

1 min

Section 13: Leçons 121 à 130

10 leçons 24 min

React et les formulaire - Les formulaires et React

1 min
React et les formulaire - Créons notre composant input

1 min
React et les formulaire - Affichons nos inputs dynamiquement

3 min
React et les formulaire - Autorisons notre utilisateur à écrire

3 min
React et les formulaire - Ajoutons des vérifications

3 min
React et les formulaire - Changeons le style des inputs en cas d'erreur

2 min
React et les formulaire - Ajoutons un article sur Firebase

6 min
React et les formulaire - N'oublions pas la page d'accueil

3 min
React et les formulaire - Lister un seul article

4 min
React et les formulaire - Supprimer un article

2 min

Section 14: Leçons 131 à 140

10 leçons 20 min

React et les formulaire - Modifier un article

4 min
React et les formulaire - Rediriger l'utilisateur si l'article n'existe pas

1 min
React et les formulaire - Afficher uniquement les articles publiés

2 min
React et les formulaire - Réalisons les finitions

2 min
Projet #5 - Blog : Utilisation de Redux - Qu'allons-nous faire dans les prochaines sections

1 min
Quiz du module 2

3 min
Redux - Qu'est-ce que Redux et pourquoi l'utiliser

2 min
Redux - Comprenons le fonctionnement de Redux

2 min
Redux - Connecter Redux avec React

3 min
Redux - Connecter le store avec React

3 min

Section 15: Leçons 141 à 150

10 leçons 17 min

Redux - Connecter les actions avec React

3 min
Redux - Passer des données dynamiques avec les actions

1 min
Redux - Protégeons le nom des actions

4 min
Redux - Combinons le state local avec Redux

4 min
Redux - Finaliser sur le Redux

2 min
Envoyer son projet sur internet - Comment allons-nous faire

1 min
Envoyer son projet sur internet - Changer le basename

2 min
Envoyer son projet sur internet - Créer un build du projet

2 min
Envoyer son projet sur internet - Envoyer le projet avec Firebase

1 min
Les petits plus qui font toute la différence - Ajouter des notifications

1 min

Section 16: Leçons 151 à 158

8 leçons 12 min

Les petits plus qui font toute la différence - Afficher la date dans la langue de molière

1 min
Les petits plus qui font toute la différence - Modifier dynamiquement la balise head

2 min
Les petits plus qui font toute la différence - Utiliser Bootstrap avec React

1 min
Les petits plus qui font toute la différence - Utiliser des types avec PropTypes

2 min
Conclusion - Félicitations, vous avez réussi !

2 min
Quiz du module 3

3 min
Bravo

1 min
Evaluation finale

3 min

Détails

Description

Niveau Initiation

Public cible Tous publics

Format SCORM

Durée 4h 10m

Contenu 158 leçons

Découvrez React, la bibliothéque JavaScript incontournable pour le développement web moderne. Apprenez ses fondamentaux, maîtrisez des concepts avancés tels que Redux, et appliquez vos compétences à travers des projets pratiques.

Parcours et prérequis

Prérequis

Aucun prérequis

Modalités pratiques

Matériel nécessaire

Disposer d'un ordinateur ou d'une tablette
Une connexion Internet

Évaluation

Auto-évaluation sous forme de questionnaires
Exercices sous formes d'ateliers pratiques
Questionnaire de positionnement & Evaluation é chaud

Moyens pédagogiques

Accés au cours en ligne
Cours théorique au format vidéo
Accessible via un ordinateur ou une tablette
Assistance par téléphone et/ou email

Accompagnement

Formateur

Disposant de plusieurs années d'expérience dans l'enseignement de cette discipline.

Accessibilité

Formations en distanciel accessibles aux personnes é mobilité réduite. Audiodescription et sous titrage non disponibles.

Équipe

Expert pédagogique

Découvrez qui conçoit et anime cette formation sur le catalogue Learnifi.

Formateur catalogue

Wiki form

Expert catalogue

alert(1)

Référencé catalogue Learnifi
Contenu SCORM
Accompagnement OF

6 Formations catalogue

6 Stagiaires formés

158 Leçons animées

Voir le profil formateur

Conformité

Modalités & conformité

Tout ce dont votre OF a besoin pour inscrire sereinement — sans montage pédagogique supplémentaire.

100 % en ligne Accessible 24h/24 — vos stagiaires progressent à leur rythme.

Suivi SCORM & progression Temps passé, scores et complétion exportables pour votre BPF.

Évaluations intégrées Quiz et examens pour valider les acquis des apprenants.

Certificat de fin Attestation délivrée automatiquement à l'issue de la formation.

Compatible Qualiopi Traçabilité pédagogique, émargements et exports pour vos audits.

Support Learnifi Accompagnement technique pour vos équipes et vos stagiaires.

Ce que vos stagiaires apprendront

Programme de la formation

Description

Parcours et prérequis

Prérequis

Modalités pratiques

Matériel nécessaire

Évaluation

Moyens pédagogiques

Accompagnement

Formateur

Accessibilité

Expert pédagogique

Wiki form

Modalités & conformité

Inscrivez vos stagiaires sur cette formation

Formations similaires

HTML5 et CSS3 — De débutant à expert web front

JavaScript — Les fondamentaux pour dynamiser le web

Langage C — Devenir développeur avec les fondamentaux

Python — Devenir développeur avec les bases solides

WooCommerce — Créer et gérer une boutique en ligne

WordPress 5 — Les essentiels pour créer un site

Es-tu sûr ?