Créer une todo-list en React JS [Partie 1]

Après les 3 premiers articles, où j’ai décidé de reprendre les bases d’un début de projet propre en ReactJs, que vous pouvez retrouver ici

Nous allons aujourd’hui tenter le concept clé de ReactHeure : #1hChrono

Le concept : Je me pose en défi de coder une application web en ReactJS dans la limite d’une heure. Je partirais généralement d’une base vierge et essayerait de me tenir aux objectifs que je me fixe en début d’exercice

Je rentrerais moins dans les détails que dans les autres articles, néanmoins si vous êtes intéressés par le code je le mettrais à disposition en fin d’article

C’est parti ! Je remettrais [00:XX] à chaque étape pour vous rappeler où je me situe par rapport au chrono.

⏳ [00:03] Définition de l’exercice

D’abord nous allons définir un mini cahier des charges de notre application.

Brief

Notre application sera donc une todo-list, ou en français, une liste des tâches. On devra pouvoir ajouter une tâche, consulter les tâches en cours, puis soit marquer une tâche étant complétée (et l’archiver), soit la supprimer (on garde cette fonctionnalité pour l’utilisateur en cas d’erreur).

Fonctionnalités

  • Une WebApp one page
  • Utilisable en responsive
  • La data devra être sauvegardée en LocalStorage (pas de mise en place d’API pour cet exo mais transition facile plus tard)
  • Un minimum de design avec notamment un logo
  • La possibilité d’ajouter/consulter des tâches
  • La possibilité de marquer finie une tâche

Et maintenant voyons les bons Modules qui nous permettrons d’aller plus vite :

  • La gestion d’état d’une tâche se fera grâce à react-swipeable-list (que je connais déjà)
  • Ensuite pour quelques style de base et notamment celui de l’input je vais utiliser React-Suite :
Découverte du site React-Suite
Je l’ai découvert lors de ma rapide veille des différentes possibilités, il propose beaucoup de composants pratiques.

⏳ [00:13] Schéma rapide

Ici je vais schématiser rapidement ce à quoi notre application va ressembler. Cela me permettra de me concentrer sur le code juste après, mais aussi déjà imaginer l’architecture des composants !

Wireframe de la future application : (à la verticale:) logo-bienvenue-ajout d'une tâche-liste des tâches

⏳ [00:17] Création projet + installation dépendances

Initialisation avec CRA

Les 3 premières minutes me serviront à utiliser CRA pour mettre en place le projet. Si vous ne connaissez pas CRA je vous invite à lire ici mon tutoriel sur le sujet !

Initialisation du projet avec CRA...

⏳ [00:20] Ajout des modules

J’ajoute comme vu précédemment les plugins (tuto ici ci besoin) :

  • react-swipeable-list
  • react-suite

On lance notre projet et le voici qui est prêt à être travaillé !

⏳ [00:25] Fin initialisation

Je vais profiter des 5 dernières minutes avant que le chrono arrive à 30 » pour faire les modifications de base sur package.json et index.html. Principalement pour remplacer les noms de projet par défaut par « TooDoommm » et importer la police Comfortaa depuis Google Fonts.

Nous arrivons à 30 minutes…

Et nous voici à la fin de la première partie !

Cet exercice de rapidité est assez intense surtout quand on ne veut pas perdre en qualité. Il ne faut cependant pas griller les étapes et assurer une bonne base de début de projet pour ne pas perdre du temps plus tard.

Je vous dis donc à dans deux semaines pour la fin de cet exercice ! ( Si vous lisez l’article après mars 2020, la deuxième partie est déjà sortie et vous pouvez retrouver le lien juste en dessous ↘️)