CATALOGUE Code & Data Formation ReactJS Apprendre ReactJS 2018 - Les fondamentaux

Créer une Todo App avec React et Redux

Retour à la formation
Chapitre 4 Leçon 1
Précédent
Suivant

Dans cette leçon, nous allons créer une todo app en utilisant React et Redux. Vous apprendrez à gérer les états et les actions pour ajouter des tâches à votre liste.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment implémenter une liste de tâches (todo) en utilisant React et Redux. Nous commencerons par explorer les principes de base de Redux, incluant la création de réduceurs et de store. Ensuite, nous adapterons notre application pour passer d'un simple compteur à une todo app complète.

Nous allons suivre les étapes suivantes :

  • Création du store Redux avec les réduceurs appropriés.
  • Implémentation d'un composant TodoApp en React.
  • Gestion des actions et des états avec Redux.
  • Ajout de fonctionnalité pour insérer de nouvelles tâches via un formulaire.
  • Rendu dynamique de la liste des tâches dans l'interface utilisateur.

Finalement, nous améliorerons notre application en ajoutant des stylisations CSS et des fonctionnalités supplémentaires comme la gestion de l'état des entrées de formulaire.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre les bases de Redux.
  • Apprendre à configurer un store Redux.
  • Implémenter une application Todo en utilisant React et Redux.
  • Gérer les états et les actions pour ajouter des tâches à une liste de todo.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en :

  • JavaScript
  • React
  • Principes fondamentaux de Redux

Métiers concernés

Les compétences enseignées dans cette vidéo sont particulièrement utiles pour les métiers suivants :

  • Développeur Front-end
  • Développeur JavaScript
  • Ingénieur Logiciel

Alternatives et ressources

Des solutions alternatives pour gérer des états dans une application React comprennent l'utilisation de :

  • Context API
  • MobX
  • Recoil

Questions & Réponses

Le store dans Redux est un conteneur unique qui maintient et gère l'état de l'application. Il permet également de dispatch et de gérer les actions.
Pour ajouter une nouvelle tâche, on dispatch une action 'addTodo' avec le type, le texte et un id unique depuis le composant React.
Le state local dans le composant TodoApp est utilisé pour gérer la valeur de l'input de formulaire, ce qui permet de capturer et de réinitialiser l'entrée utilisateur lors de l'ajout d'une nouvelle tâche.