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 me posais la même question. Pourquoi déclarer une constante que tu modifies ? Ne faudrait-il pas plutôt faire un let ? Merci pour la série. En espérant une suite à cette série pour aller plus loin. Je me pose notamment des questions sur la gestion du PHP dans un tel projet. Nous utilisons actuellement un moteur de templates avec le modèle MVC dans la boîte où je travaille et du Jquery. Les requêtes AJAX sont également très utiles pour repasser côté serveur mais j'ai l'impression qu'avec cette technologie qui est le React, ce modèle n'est plus de mise. (moteur de templates avec Smarty). Pourriez-vous approfondir le projet avec la gestion du PHP ?
@@xale0n Pour ce qui est du tableau déclaré en CONST , c'est pas un soucis... En fait ce qui est réellement interprété c'est le fait que le tableau est une constante , donc il restera constamment un tableau , mais les éléments interne peuvent changer ;)
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
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 !
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 ;)
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
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});
Idem, c'est généralement conseillé d'utiliser ce que l'on appelle des éléments controlés comme tu le fais au lieu des éléments non controlés comme dans la vidéo. J'utilise cela également , c'est plus court et du coup plus obligé d'avoir bcp de méthodes au sein de la classe.
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 .
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); }
Merci mec ! je n'arrivais pas à fix ce problème .... quand je cliquais sur l'item 2 il efface l'item 3 (le dernier en l'occurence) grâce à ton bout de code c'est fonctionnel ! :)
Merci beaucoup ! (si on a la flemme il suffit d'ajouter .parentNode.firstChild.nodeValue : const index = array.indexOf(event.target.parentNode.firstChild.nodeValue); )
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
Oui, perso je préfére utiliser la methode filter et se servir du todo.id pour ne ressortir, dans un nouvel array du coup, que les todo.id présents qui sont différents du todo.id sur lequel on a cliqué.
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!
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.
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 !
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 ='(
![React JS #3 - State vs. Props - [FR]](http://i.ytimg.com/vi/T5kMboavS1M/mqdefault.jpg)
![React JS #3 - State vs. Props - [FR]](/img/tr.png)
![Bulma - Une alternative solide à Bootstrap - CSS [FR]](http://i.ytimg.com/vi/TSK5jXA4qbY/mqdefault.jpg)
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
Normal que tu declares l'array en CONST et qu'ensuite tu splice dessus?
Je me posais la même question. Pourquoi déclarer une constante que tu modifies ? Ne faudrait-il pas plutôt faire un let ?
Merci pour la série. En espérant une suite à cette série pour aller plus loin.
Je me pose notamment des questions sur la gestion du PHP dans un tel projet. Nous utilisons actuellement un moteur de templates avec le modèle MVC dans la boîte où je travaille et du Jquery. Les requêtes AJAX sont également très utiles pour repasser côté serveur mais j'ai l'impression qu'avec cette technologie qui est le React, ce modèle n'est plus de mise. (moteur de templates avec Smarty). Pourriez-vous approfondir le projet avec la gestion du PHP ?
@@xale0n Pour ce qui est du tableau déclaré en CONST , c'est pas un soucis... En fait ce qui est réellement interprété c'est le fait que le tableau est une constante , donc il restera constamment un tableau , mais les éléments interne peuvent changer ;)
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
La légende raconte que t'attend toujours cette suite...
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 !
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
Merci beaucoup. C'est limpide. J'aurais adoré avoir une suite aux 4 vidéos d'initiation.
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 !
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 ;)
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
Pourquoi quand tu fais event.target.value, dans ta fonction deleteTodo, sa pointe directement la valeur de item et pas celui du bouton ?
Génial ce petit tuto !!
C'est super, possible de continuer cette série?
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
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});
Idem, c'est généralement conseillé d'utiliser ce que l'on appelle des éléments controlés comme tu le fais au lieu des éléments non controlés comme dans la vidéo. J'utilise cela également , c'est plus court et du coup plus obligé d'avoir bcp de méthodes au sein de la classe.
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 .
juste pour info en passant, pour installer bootsrap dans react avec le terminal
npm install react-bootstrap bootstrap
Bonjour, je n'arrive pas a retrouver la suite des cours, notamment le React JS #5
Les cours s'arrêtent aux 4 ;)
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);
}
Merci mec ! je n'arrivais pas à fix ce problème .... quand je cliquais sur l'item 2 il efface l'item 3 (le dernier en l'occurence) grâce à ton bout de code c'est fonctionnel ! :)
Merci bien vue ! ^^
Merci beaucoup !
(si on a la flemme il suffit d'ajouter .parentNode.firstChild.nodeValue :
const index = array.indexOf(event.target.parentNode.firstChild.nodeValue); )
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
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 ? :-)
pour supprimer un item, on peut utiliser filter aussi non?
Oui, perso je préfére utiliser la methode filter et se servir du todo.id pour ne ressortir, dans un nouvel array du coup, que les todo.id présents qui sont différents du todo.id sur lequel on a cliqué.
Quan tu supprimes un item, ça supprime le dernier, et non pas à l'item qui correspond à la croix
Exact. Il faudrait passer à la méthode deleteTodo l'id correspondant au todo a supprimer.
Le correctif (rajouter la valeur manquante au bouton) : X
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!
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?
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^^
on veut la suite :((
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 !
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 ='(