Construire une Application de Taches Simple avec React

Salut HaWkers ! Dans ce tutoriel, nous allons vous montrer comment creer une application de taches simple, egalement connue sous le nom de To-Do List, en utilisant React, l'une des bibliotheques JavaScript les plus populaires pour la construction d'interfaces utilisateur.

Preparation de l'Environnement

Avant de commencer, assurez-vous d'avoir Node.js et npm installes sur votre ordinateur. Si vous ne les avez pas encore, vous pouvez les telecharger ici. Ensuite, vous devrez installer Create React App, un outil qui permet de creer facilement de nouveaux projets React :

npx create-react-app todo-app

Construction de l'Application

Commencons a construire notre application de taches. Creez un nouveau composant appele TodoItem dans un fichier appele TodoItem.js. Ce composant representera une seule tache dans notre liste :

import React from 'react';

function TodoItem(props) {
  return (
    <div>
      <input type="checkbox" />
      <p>{props.item.text}</p>
    </div>
  );
}

export default TodoItem;

Maintenant, creons un composant TodoList qui va afficher une liste de TodoItem. Pour simplifier, nous allons commencer avec une liste statique de taches :

import React from 'react';
import TodoItem from './TodoItem';

class TodoList extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        { text: 'Faire la vaisselle' },
        { text: 'Nettoyer la maison' },
        { text: 'Faire les courses' },
      ],
    };
  }

  render() {
    const todoItems = this.state.todos.map(item => (
      <TodoItem key={item.text} item={item} />
    ));

    return <div>{todoItems}</div>;
  }
}

export default TodoList;

Executer l'Application

Pour demarrer l'application, executez la commande suivante dans le repertoire racine du projet :

npm start

Cela demarrera le serveur de developpement et ouvrira l'application dans le navigateur.

Conclusion

Felicitations ! Vous avez cree une application de taches basique avec React. Evidemment, ce n'est qu'un debut. Vous pouvez etendre cette application pour permettre l'ajout de nouvelles taches, marquer les taches comme terminees, et bien plus encore !

Pour continuer a apprendre et a ameliorer vos competences en React, consultez l'article sur JavaScript et React : Creer Votre Premier Composant.

C'est parti !