React JS #4 - Créer une TODO List et Bootstrap - [FR] 

Bonjour à tous ! il y a une erreur lors de la suppression d'un item dans la todolist, j'ai rectifié le code ici : gist.github.com/AntoninMarchardDev/2d3cdb7aa6dd7a7ae5fda85aab89eccc

Je viens de passé mon ap midi a faire les tutos, vraiment super bien fait et bien expliqué. tu t'exprime bien et sans avoir un debit trop rapide. Juste que parfois tu passes un peu vite d'une page à une autre et je suis obligé de faire des pause et revenir en arrière sinon c vraiment top. J'espère qu'il y aura une suite à ses 4 vidéos

J'ai moi aussi beaucoup apprécié ton tuto, je regrette aussi que ça ne se limite qu'à ces quatre vidéos, j'aurais aimé poursuivre avec tes videos

Excellente série de vidéos, certainement le tuto le plus clair , le plus posé, que j'ai trouvé sur les débuts en React. Merci beaucoup !

Merci beaucoup. C'est limpide. J'aurais adoré avoir une suite aux 4 vidéos d'initiation.

Bravo ! moi qui cherchais à explorer react js les 4 vidéos sont très bien expliqués ;) merci à toi ^^ si tu pouvais continuer et approfondir voir même nous montrer redux ou firebase ça serait parfait ;)

Magnifique mille fois merci, je trouve ce tuto très intéressant pour débuter avec React.js.

Super video, je mets jamais de commentaires mais la je suis clairement oblige ! J'ai vu que tu ne faisais plus de videos, quel dommage... Tu es tres pedagoge !

Merci beaucoup pour cette excellente série de vidéos d'initiation à React, si je puis me permettre redux et react-router seraient top comme tutos pour la suite !! :D

Tes vidéos sont super, fait en plus ! Stp !

Merci pour ta vidéo, c’est cool et bien expliqué ! Bonne continuation

Merci Ce qui serait intéressant c’est de faire une vidéo sur le run build (deployment) et ce qui serait encore mieux c’est de la faire sur plusieurs serveurs y compris IIS .

A ajouter que les arrow functions bind automatiquement la classe parent!

Yo , moi ça ne marche pas, je suis obligé de récupérer le parent de l'évent sélectionner (le X cliqué) et de redescendre vers le premier enfant afin de récupérer l'item correspondant pour avoir le bon index, sinon le "indexOf" est toujours égal à -1 ! Et pas de "event.target.value" mais juste un "event.target" . Je vous met ma fonction deleteTodo() deleteTodo(event){ event.preventDefault(); var target = event.target; // je récupère le X cliqué var parent = target.parentNode; // je récupère le noeud parent var Item = parent.firstChild.nodeValue; // je descend vers l'enfant pour récupérer l'item correspondant au X sélectionner //console.log(Item); //console.log(parent); //console.log(target); var indexActuel = this.state.items.indexOf(Item); // Grace à l'item retrouver, je récupère le bon index, //console.log(indexActuel); var newtab = this.state.items; // je crée un tableau temporaire newtab.splice(indexActuel,1); // je met à jour mon tableau temporaire en enlevant la donnée (correspondant au X cliqué) this.setState({ items : newtab //je met à jour le tableau d'items correspondant à mon state.items }) // console.log(indexActuel); // console.log(newtab); }

Hello, Merci. Tuto plutot sympa :) Je penses qu'il faut etre plus precis sur les termes techniques comme : les classes, les fonctions, le JS... Bon courage

Génial ce petit tuto !!

Très bon tutoriel ! Cependant pourquoi tu ne bind pas te méthodes dans le constructeur comme convention ? Ainsi pour les eventHandler moi je préfère écrire une fois et que ça fonctionne pour tout les inputs, button, etc comme suit : this.setState({[e.target.name]: e.target.value});

Vraiment super tuto pour se familiarisé à React.js. Une question me turlupine, comment est-ce que je garde les items de ma Todo en mémoire ? :-)

juste pour info en passant, pour installer bootsrap dans react avec le terminal npm install react-bootstrap bootstrap

Pourquoi ne pas avoir mis de ul et li pour la liste? Il y a aussi le fait que lorsque notre TodoList est créée, lors de la suppression cela ne s'applique pas sur le bouton cliqué mais sur le dernier de la liste uniquement. Sinon super tuto ça m'aide beaucoup!

Quan tu supprimes un item, ça supprime le dernier, et non pas à l'item qui correspond à la croix

Très bien fait tout ça!! Mais dommage de ne pas avoir expliqué comment supprimer la ligne sélectionnée et non pas la dernière...il faut utiliser un filter mais ça casse la tête!!( si quelqu'un sait!!!) et aussi comment garder la liste lorsque l'on actualise la page...du coup très bien mais pas assez complet pour ma part^^

Salut ! vraiment dommage que tu sois encore pas super a l'aise avec toutes les notions de ES6 ! Le constructor d'une class permet d'acceder au variable du constructor de la class dont il hérite, et le fait de mettre super() c'est pas un mot clé react, c'est pour lui dire, je veux oweride les variables que tu as dans ton constructor, (le state par exemple) Mais sinon continue c'st génial !

Bonjour, je n'arrive pas a retrouver la suite des cours, notamment le React JS #5

Top ! (Néanmoins je n'ai pas pu créer le dossier exécuter la commande "create-react-app todo-list". Je crois que le tiret du nom de package n'est pas apprécié. Je l'ai nommé "todo" et ça passe.

merci infiniment

Alors c'est tout pour cette serie?

par contre y'a un soucis avec le delete event.target.value ça reccupere pas la key donc là il faut récupérer le parent du boutton

Impossible de trouver des tutos aussi qualitatifs sur le youtube français .. C'est si décevant, la suite des tutos que je vais devoir suivre sur d'autre chaines seront tellement moins bien ='(

on veut la suite :((

pour supprimer un item, on peut utiliser filter aussi non?

Pourquoi quand tu fais event.target.value, dans ta fonction deleteTodo, sa pointe directement la valeur de item et pas celui du bouton ?

C'est super, possible de continuer cette série?