Maîtrisez les technologies web de pointe en rejoignant notre formation sur React et Redux, spécialement conçue pour vous aider à concevoir des sites interactifs et dynamiques. Cette formation est un parcours complet, qui vous guide de la découverte des bases de React à l’intégration de fonctionnalités avancées, en passant par la gestion d’états complexes avec Redux.

Vous commencerez par vous familiariser avec les fondamentaux de React, une bibliothèque JavaScript prisée par les développeurs pour sa capacité à créer des interfaces utilisateur performantes et modulaires. Grâce à une approche progressive et didactique, vous explorerez les composants, le cycle de vie, et les hooks, éléments essentiels pour construire des applications robustes et évolutives.

Le parcours vous amènera ensuite à plonger dans Redux, une solution puissante pour la gestion d’état. Redux vous permettra de structurer vos applications de manière plus claire et organisée, en facilitant la gestion de données et la communication entre composants. Vous découvrirez comment Redux s’intègre à React et comment tirer parti de cette combinaison pour créer des applications qui résistent à l’épreuve de la complexité.

Créer des sites interactifs avec REACT et REDUX

79 € TTC

Accès immédiat et illimité

100% en ligne

A votre rythme

Financement possible

Assistance technique 7 jours sur 7

Attestation de fin de formation

Acheter

Objectifs

Comprendre les fondamentaux de React
Différencier les sites "Single Page" et "Multi Page"
Maîtriser les outils et logiciels nécessaires
Comprendre les concepts avancés de React et Redux
Appliquer les compétences dans des projets pratiques

Niveau : Intermédiaire

Public : Tout le monde

Prérequis : Les participants doivent avoir une bonne maîtrise de JavaScript et des bases en HTML et CSS pour tirer pleinement parti de cette formation.

Sans audio description ni sous-titrage

Matériel nécessaire

Disposer d’un ordinateur, d’une tablette ou d’un smartphone
Une connexion internet

Modalités d’évaluation des acquis

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

Moyens pédagogiques et techniques

Accès au cours en ligne
Cours théorique au format vidéo
Assistance par téléphone, mail ou par tchat

Contenu du cours

Créez des sites intéractifs avec React et Redux

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

Test de positionnement

Quelques conseils avant de commencer

Avant de commencer - Bienvenue dans ce cours !

Avant de commencer - Prérequis

Avant de commencer - Comment réussir cette formation

Orientation - Commencez la formation selon votre niveau

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

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

Partons sur de bonnes bases - Quels logiciels utiliser ?

Partons sur de bonnes bases - Quelles extensions installer

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

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

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

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

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

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

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

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

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

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

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

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

Nos premiers pas avec React - Ajoutons un nouveau composant

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

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

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

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

Nos premiers pas avec React - Props VS State

Nos premiers pas avec React - Les composants Statefull et Stateless

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

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

Nos premiers pas avec React - Modifier proprement le state

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Parlons design avec React - Initialisations des modules CSS

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

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

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

Parlons design avec React - Gérer dynamiquement les classes

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

Parlons design avec React - Utilisons Styled Components sur notre site

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

Parlons design avec React - Ajouter un effet de hover

Parlons design avec React - Personnaliser dynamiquement Styled Components

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

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

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

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

La logique avec React - Lister dynamiquement des composants

La logique avec React - Supprimer dynamiquement des composants

La logique avec React - Modifier dynamiquement des composants

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

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

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

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

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

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

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

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

Projet #2 - Une TO-DO list - Correction

Plongeons dans les profondeurs de React - Les Reacts Fragments

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

Plongeons dans les profondeurs de React - Les Refs

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

Plongeons dans les profondeurs de React - Le context API

Plongeons dans les profondeurs de React

Quiz du module 1

Restez organiser pour un meilleur apprentissage !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Faisons un site avec plusieurs pages - Redirigeons notre utilisateur directement

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

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

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

React et les formulaire - Les formulaires et React

React et les formulaire - Créons notre composant input

React et les formulaire - Affichons nos inputs dynamiquement

React et les formulaire - Autorisons notre utilisateur à écrire

React et les formulaire - Ajoutons des vérifications

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

React et les formulaire - Ajoutons un article sur Firebase

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

React et les formulaire - Lister un seul article

React et les formulaire - Supprimer un article

React et les formulaire - Modifier un article

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

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

React et les formulaire - Réalisons les finitions

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

Quiz du module 2

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

Redux - Comprenons le fonctionnement de Redux

Redux - Connecter Redux avec React

Redux - Connecter le store avec React

Redux - Connecter les actions avec React

Redux - Passer des données dynamiques avec les actions

Redux - Protégeons le nom des actions

Redux - Combinons le state local avec Redux

Redux - Finaliser sur le Redux

Envoyer son projet sur internet - Comment allons-nous faire

Envoyer son projet sur internet - Changer le basename

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

Envoyer son projet sur internet - Envoyer le projet avec Firebase

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

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

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

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

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

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

Quiz du module 3

Bravo

Evaluation finale

Actualités