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 :
⏳ [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 !
⏳ [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 !
⏳ [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 ↘️)
