⚛️ NOUVEAUTÉ REACT : UTILISER LES HOOKS !

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ •

  • @grindingyanus
    @grindingyanus 5 років тому +24

    J'ai suivi plusieurs vidéos, formations en ligne gratuites et autre et tu es le premier à être aussi clair et efficace pour transmettre ce qu'il faut pour comprendre, donner des bonnes bases sans noyer le spectateur. Merci à toi !

  • @DGDG0000000
    @DGDG0000000 5 років тому +3

    Impossible d'être plus clair. Le top du top, le haut du panier, la crème ! Bravo et merci.

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому

      Merci à toi :-) n'hésites pas à t'abonner et à partager :D

  • @samuelfaure4332
    @samuelfaure4332 5 років тому +6

    Je suis impressionné par ton talent pour la pédagogie et tes explications claires et bien structurées. Je like et subscribe !

  • @colombe6901
    @colombe6901 4 роки тому +3

    Aussi clean que le tuto sur l'introduction de React! Franchement bravo et merci, ça aide beaucoup !!

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      De rien et merci à toi :)

  • @marielauredebeaune1780
    @marielauredebeaune1780 2 роки тому

    Parfait comme d habitude. Juste une petite question sur cette vidéo à 20.27mn.Tu fais une copie du tableau Clients avec le spread operator que tu mets dans la variable updatedClients mais dans la vidéo précédente tu avais fait une copie d un tableau en prenant la méthode "slice". Je suis donc un peu perdue.

  • @mimozasolalisis73
    @mimozasolalisis73 2 роки тому

    Merci ! très chouette comme d'habitude !

  • @alpasc
    @alpasc 4 роки тому

    Merci ! tombée ici par hasard en cherchant des explications sur les hooks, en effet tout est tres clair, je viens de m'abonner à ta chaine et je file sur Twitter au passage !

  • @fsgGame
    @fsgGame 4 роки тому +1

    J’adore! Petit accent du sud-est, je me trompe ? 😅 développant des app en react native j’avoue que je trouve l’idée de functional component assez sympa malgré que je cherche encore l’utilité à part le confort illusoire de faire des functions plutôt que des classes 🤔 J’attends la partie 2 sur les hooks avancées (useMemo, useRef, ...) 👍

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      Beaucoup de développeurs Javascript préfèrent les notations fonctionnelles aux notations objets. Surtout que JS n'est pas un véritable langage objet. On trouve souvent les classes plutôt lourdingues alors que les fonctions tu peux les faire de la taille que tu souhaites, et jouer encore plus avec la composition des fonctions :)

  • @helpjs5010
    @helpjs5010 4 роки тому +1

    Video très compréhensible. Merci. Continuez 👏

  • @pierkirouleartefactory1988
    @pierkirouleartefactory1988 4 роки тому

    👍Ze best formateur! Bravo et merci++

  • @SWebDev7
    @SWebDev7 Рік тому

    excellent formateur !!!

  • @remi6819
    @remi6819 4 роки тому +1

    Très très claire comme d'habitude !
    J'ai une petite question. Est-ce que le composent Class et le composant fonctionnel jouent également sur les hooks de Redux useDispatch et useSelector ? Ils ne sont utilisable que dans un composant fonctionnel ?
    Merci à toi !!

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      Normalement les hooks ne s'utilisent que sur des composants fonctionnels mais j'avoue ne pas du tout connaître Redux donc bon .. Merci en tout cas :)

  • @yannickbertrand5331
    @yannickbertrand5331 5 років тому

    HOOKS le this ... un pur régal... Merci Lior !

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому

      Ben de rien, merci à toi :-)

  • @mairahs16
    @mairahs16 5 років тому

    YEEEESSSS !!!!! Merci Lior !!! Tu déchires...tu m'as tellement donné envie avec la première vidéo que jai acheté le cours Udemy React d 'Anthony Welc pour me mettre dessus..J'attends avec impatience ton cours Symfony + Api Plateform + React JS 😊😊😊

  • @sebastien4680
    @sebastien4680 4 роки тому

    Ahhhhh merci Lior, j'ai pas tout tout capté en cours, et là, magique ! comme toujours avec toi ! Un grand merci !
    Et...oups... mais je ne m'étais pas abonné..... Bah bravo !

  • @elora2334
    @elora2334 3 роки тому

    Merci pour cette super vidéo, j'adore ta façon d'expliquer les choses !

  • @Guillaume80_surYT
    @Guillaume80_surYT 4 роки тому

    Super pédagogue, bon tempo, tu es vraiment un des meilleurs que j'ai vu.
    Question juste sur le nommage (convention de nommage à mettre en place) :
    La variable utilisé par le useState, tu lui donnes le nom "client".
    Quand tu le manies dans tes différentes fonctions, tu sais ce qu'elle représente mais pour être le plus clair possible et sans ambiguïté quand il y a plusieurs devs sur le projet, serait une bonne idée de préfixer la variable du genre :
    stateClient (stateNOM_DE_LA_VARIABLE)
    moins de risque de collision de noms de variable aussi.
    Qu'en penses-tu ?

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +1

      Je n'ai pas d'avis particulier sur la question, les noms de variables c'est toujours finalement un sujet très fin, personnel et qui appelle à la réflexion des équipes. A toi de créer tes propres conventions :)
      Merci beaucoup pour ton commentaire :)

    • @Guillaume80_surYT
      @Guillaume80_surYT 4 роки тому

      @@LiorCHAMLA merci de ta réponse.
      Bravo encore pour tout ton travail, bonne journée

  • @cog969
    @cog969 3 роки тому

    Bonjour, super comme vidéo et très bien expliqué. Es ce qu'il aurait possibilité de faire d'autres cours sur les autres hooks (useEffect, useReducer, etc...) Merci à vous et bonne continuation ;)

    • @LiorCHAMLA
      @LiorCHAMLA  3 роки тому

      Grafikart a fait de très bonnes vidéos sur ces hooks et même la possibilité de créer ses propres hooks :)

  • @brucemanirambona1592
    @brucemanirambona1592 4 роки тому

    Salut lior merci pour le tuto c est génial vous dites que vous préfère utilise les classe au lié hooks moi je suis débutante dans react quel est la suggestion que vous pouvez me conseillé a utilisé entre les classe et les hooks apparemment tout les deux sont facile merci

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +1

      Moi je préfère utiliser les Hooks quand je fais du React :)

  • @aureliendrey6916
    @aureliendrey6916 5 років тому +2

    Encore une super vidéo, je vais devoir accrocher un poster de toi dans ma chambre si tu continues tes vidéos UA-cam ! 😋😋😎

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому +1

      Ca serait bizarre quand même non ? Merci en tout cas :D

    • @rabahghiles9853
      @rabahghiles9853 5 років тому +1

      Je vais faire ça aussi je pense !! Je viens de découvrir ces vidéos ce soire, et je les dévore depuis toute à l'heure, les vidéos sur #react sont extra, la pédagogie rien à dire, l'art et la manière de transmettre l'information !! Le poster il le mérite 😊

  • @fabieno6675
    @fabieno6675 4 роки тому +1

    Salut Lior, j'ai fais ton tuto une premier fois en fin 2019 ça fonctionnait très bien, et là je comprend pas un comportement :
    Quand je clique sur delete ou ajouter
    la console me dit en boucle : clients.map is not a function..
    ma variable clients :
    const [clients, setClients] = useState([
    { id: 1, nom: "Lior Chamla" },
    { id: 2, nom: "Magali Pernin" },
    { id: 3, nom: "Joseph Durand" }
    ]);
    mon affichage
    {
    clients.map(client => (

    ))
    }
    je me demande si appliquer la methode .map() sur une variable qui utilise un useState ferait pas bugger ça, depuis le temps ou tu as poster cette vidéo p'tete y'a eu des mises à jour chépa... (si t'as l'temps, ça m'aiderait à comprendre, bisette !)

  • @bletter9963
    @bletter9963 4 роки тому

    Tes vidéos sont très bien réalisées et instructives , continue comme ça 💪

  • @ubaldkouokam6268
    @ubaldkouokam6268 4 роки тому

    Bonjour Lior CHAMLA, j'ai une préoccupation que j'espère avoir une piste de solution. En fait, c'est l'utilisation du Hooks useState avec les formulaires en particulier les formulaires Modal qui me pose problème. En fait, j'ai créé un composant React qui permet de construire dynamiquement une fenêtre modale et au besoin de l'injecter dans une page. Concrètement, j'ai crée une page qui affiche une liste de personnes et à travers un bouton-menu sur une personne ciblée, l'ajouter à comme utilisateur de l'application. Pour donc ajouter une personne comme utilisateur de l'application, la fenêtre modale affiche deux champs (userName, password) qu'on doit remplir. Les différents champs sont liés à un State User = {"userName" : "", "password" : ""}. Je rencontre alors un problème lors du renseignement des données puisque la saisie est bloquée. Je cherche comment m'y prendre.

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      La saisie est bloquée car le champ est lié au state et il faut donc dire à React que quand un champ est modifié il faut modifier le state aussi. Regarde ici fr.reactjs.org/docs/forms.html

    • @ubaldkouokam6268
      @ubaldkouokam6268 4 роки тому

      @@LiorCHAMLA, En suivant l'une de vos formations portant sur API-Platform avec Symfony et React, je vois bien comment on utilise le State pour gérer les champs d'un formulaire. Mais ici, c'est une fenêtre Modale qui au chargement de la page mère ne s'affiche pas encore. Le composant ModalForm que j'injecte dans le DOM a un contenu (children) vide, et c'est normal pour moi jusque là. Il faut noter que le State est défini sur la page mère et que les children (Fields) de la fenêtre modale sont générés par une fonction après qu'on est cliqué sur un bouton. Dès que l'on clique sur le bouton, les children sont générés et je change un autre state qui affiche la fenêtre modale. Quand j'observe les différentes séquences de mon code, je remarque le State du formulaire Modal est initialiser bien avant que le formulaire ne soit généré complètement. Donc, je remarque qu'il y a un problème d'adéquation entre les champs de mon formulaire modal et State correspondant.
      Alors, ma préoccupation est donc de savoir lier les champs de mon formulaire Modal à State existant ou y a t-il une autre méthode pour gérer le cas qui est présenté ci-dessus ?
      Cordialement !

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      @@ubaldkouokam6268 Encore une fois, le soucis est trop spécifique ici, il faudrait que je regarde le code source et j'en ai hélas pas le temps. Si le state est dans le composant parent, il faut passer à la modal une fonction en props qui lui permette de modifier le state :)

  • @Jery97229
    @Jery97229 4 роки тому

    Formateur youtube FR dans le dev le plus pédagogue et interessant (sorry pour les autres ) ! merci a toi :) des vidéo pour bien expliquer les autres hooks présent comme cette vidéo est prévue dans un futur par hasard ? ^^

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      Wow, merci énormément :) Non pas trop de contenus en React prévu sur la chaine hélas.

  • @geoffreyeydan1910
    @geoffreyeydan1910 5 років тому +1

    Salut Lior, encore une super vidéo, bravo !
    Une question néanmoins : Si on a plusieurs variables dans notre state (par exemple "Clients" et "NouveauClient") que nous retourne le useState?
    Merci

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому +4

      Quand on utilise le hook useState, on l'utilise que pour une seule variable, donc si tu veux plusieurs variables, tu fais plusieurs useState :-)
      Par exemple :
      const [clients, setClients] = useState([]);
      const [nouveauClient, setNouveauClient] = useState("");

    • @geoffreyeydan1910
      @geoffreyeydan1910 5 років тому

      @@LiorCHAMLA merci !

    • @pierre-alexisblond2602
      @pierre-alexisblond2602 5 років тому

      Merci de la réponse, je me demandais la même chose

    • @dblbzh2983
      @dblbzh2983 4 роки тому

      @@LiorCHAMLA Pendant que je regardais la vidéo, je me suis posé la même question !
      Du coup ben j'ai juste testé de faire plusieurs 'useState()' et j'ai vu que çà "fonctionnait à merveille", comme tu dis souvent :)
      Je suis quand même content d'avoir la confirmation que c'est la bonne manière de faire ;)
      Par contre je suis obligé de mettre en vitesse 0.75 quand je regarde tes vidéos sinon tu vas trop vite pour moi, j'arrive pas à suivre !
      Merci encore Lior pour ton super boulot !

  • @bricehemery1534
    @bricehemery1534 4 роки тому

    Salut Lior. Merci pour ta vidéo, franchment trop nickel comme d'habitude. J'ai une question. Comment changer l'aspect d'un formulaire avec React ? (avec un useEffect ou un autre hook)

    • @bricehemery1534
      @bricehemery1534 4 роки тому

      En mode un formulaire sur une page d'accueil qui change d'aspect en fonction de si l'utilisateur a cliqué sur le bouton se connexion ou sur un lien pour créer un nouveau compte

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +1

      Bah tu changes pas le formulaire, tu affiches juste deux formulaires différents, tu peux faire ça avec le routeur (en fonction de l'adresse, afficher tel ou tel composant) ou alors avec un state (mode = login => on affiche le form login / mode = inscription => on affiche le form inscription)

    • @bricehemery1534
      @bricehemery1534 4 роки тому

      @@LiorCHAMLA merci beaucoup Lior 💪🏾💪🏾😁

  • @TamsirBA-b4n
    @TamsirBA-b4n Рік тому

    bravo top de top claire limpide vraiment

  • @ousmanediouf9190
    @ousmanediouf9190 3 роки тому

    Non le gars il est fou , chapeau à toi lior 💥💥💥👊👊💪💪

    • @LiorCHAMLA
      @LiorCHAMLA  3 роки тому +1

      Merci beaucoup à toi Ousmane :)

  • @laurentseigneurie2295
    @laurentseigneurie2295 5 років тому

    Salut Lior,
    D'abord j'ai suivis ton cours sur Symfony qui est une bombe, puis j'ai vu que tu avais sortis ton cours Symfony avec API Platform et React, je me le suis pris direct étant donné que c'est ce que je veux faire.
    Par contre à tu un cours complet simplement sur React où prévois-tu d'en sortir un ? :p
    Je t'avoue que j'ai suivis déjà quelques formations React assez bien foutues sur Udemy mais personne n'a vraiment ta façon d'expliquer !
    Vu comment j'ai appris Symfony grâce à toi je me dis qu'un cours React ce serait si bien :p

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому +1

      Non pas de cours sur React prévu :x

    • @laurentseigneurie2295
      @laurentseigneurie2295 5 років тому

      @@LiorCHAMLA Quelle tristesse, je reste à l'affût ! Si j'en vois un je le prend desuite :p

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому

      @@laurentseigneurie2295 Merci énormément pour ta confiance :)

  • @asianonozeole8334
    @asianonozeole8334 4 роки тому

    A chaque fois que je regarde des tuto/docs il y a le bon vieux this partout c'est déconseillé et à moi de m'adapter en utilisant des hooks ?

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      C'est pas déconseillé, c'est toi qui choisi ce que tu veux faire :)

  • @yanndeo9501
    @yanndeo9501 5 років тому

    Bjr Lior , une question stp fork comme tu l'as fait est identique au git clone ?

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому +1

      Forker ici ça veut juste dire créer une nouvelle sandbox en reprenant tout le code de celle-ci, donc oui quelque part c'est comme un git clone sur CodeSandbox

  • @patriotact3729
    @patriotact3729 4 роки тому

    Merci bcp pour votre vidéo. J'ai une préoccupation svp.
    Face à tous ces frameworks et librairies vue.js, angular, react, kotlin, ionic... Y'en a tellement. Si quelqu'un veut coder une application web comme Vinted par exemple, ou Leboncoin ou plus récemment StopCovid est-ce que react peut le faire ? Parce que je suis encore au tout début de Javascript (après avoir appris html et css). Après je souhaiterai me lancer dans l'apprentissage d'une librairie ou framework pour coder une application web à lancer sur iOS et Android.
    Tout est flou dans ma tête. Merci d'avance pour la réponse

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      On peut tout à fait coder une application mobile en React Native, c'est tous les principes de React appliqués au développement mobile :)

    • @patriotact3729
      @patriotact3729 4 роки тому

      @@LiorCHAMLA Merci beaucoup pour la réponse.

  • @kebademe2189
    @kebademe2189 4 роки тому

    Tu es un excellent professeur

  • @9dwd
    @9dwd 2 роки тому

    vidéo de king 👑

  • @perezjonathan6530
    @perezjonathan6530 5 років тому

    yeah Bien vu !

  • @Nuker95
    @Nuker95 4 роки тому

    C'est très clair merci.

  • @tareksaadi8688
    @tareksaadi8688 4 роки тому

    Bravo Lior , Excellent !
    Le lien vers la sandbox finale stp :)

    • @chalabs5778
      @chalabs5778 4 роки тому +1

      faut cliquez sur "plus" dans la description

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +1

      Merci beaucoup :), dans la description :)

  • @bonne-energie
    @bonne-energie 4 роки тому

    J’adore, merci 👍👍👍

  • @antoinenguyen3853
    @antoinenguyen3853 4 роки тому

    excellente vidéo

  • @gulaghaarifi7360
    @gulaghaarifi7360 4 роки тому

    super bien expliqué just le musique d'arriere plan qui m'a fait mal aux oreilles.

  • @roadnkite
    @roadnkite 4 роки тому

    Merci c'est très clair

  • @gregoiremafutala9897
    @gregoiremafutala9897 2 роки тому

    00:47 - C'est le prof Lior qui parle, alors "chut" faites pas du bruit, écoutez :))

  • @ThibautLefebvre
    @ThibautLefebvre 4 роки тому

    Est-ce que tu as fait une formation payante sur react?

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +1

      J'ai pas fait une formation SUR react, par contre j'ai fait une formation où j'utilise React pendant genre 7h et qui te donnera surement plein de billes. Elle se trouve ici : learn.web-develop.me?coupon=REDUC55

  • @thibococonuts6216
    @thibococonuts6216 2 роки тому

    merci! top

  • @Jimi-bx3xf
    @Jimi-bx3xf 4 роки тому

    C'est super ça simplifie énormément le code. Plus de thiS....

  • @jozinho22
    @jozinho22 4 роки тому

    Enorme

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому

      Merci :)

    • @jozinho22
      @jozinho22 4 роки тому

      @@LiorCHAMLA De rien, j'ai découvert ReactJs y a deux jours et j'ai tout hooké après ta vidéo... Bon au début j'étais un peu perdu quand même ^^. là ça va mieux

  • @jostroland9443
    @jostroland9443 5 років тому

    Tu es un chef...

  • @saidmounaim6550
    @saidmounaim6550 5 років тому +1

    Symfony 4 API PLATFORM With React js , can't waiit 😢😢

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому +1

      C'est sorti au fait !
      ua-cam.com/video/AgFWVnBwyJc/v-deo.html

  • @ZeroSony
    @ZeroSony 4 роки тому

    super tuto! :)

  • @alphago-59
    @alphago-59 3 роки тому

    Merci

  • @wmyameogo7810
    @wmyameogo7810 4 роки тому

    super gars

  • @sifaxoumalaxou6644
    @sifaxoumalaxou6644 5 років тому

    hya khouya echemla

  • @geoffreyl2867
    @geoffreyl2867 4 роки тому +1

    Pour le coup j'ai accroché ! 😏

  • @mathieud2106
    @mathieud2106 4 роки тому

    Merci :)

  • @MrKeive
    @MrKeive 5 років тому

    super

  • @mouhamadouniang2473
    @mouhamadouniang2473 4 роки тому

    tu es magnifique lior

  • @rabablogomusic2087
    @rabablogomusic2087 5 років тому

    Elle est ou ton intro ? stp

    • @LiorCHAMLA
      @LiorCHAMLA  5 років тому

      Dans la description de la vidéo tu as le lien :-)

  • @dashmaster2958
    @dashmaster2958 Рік тому

    Salut, vos formations ne sont malheureusement pas très pédagogiques, se que cherchent les élèves c'est la fameuse CODER ENSEMBLE.

  • @yazidthedev4281
    @yazidthedev4281 5 років тому

    Javascript c est n importe quoi

  • @KINGWILLY
    @KINGWILLY 4 роки тому

    pas terrible l'explication ..ca manque d'exemples ..

    • @LiorCHAMLA
      @LiorCHAMLA  4 роки тому +2

      Je ferai mieux la prochaine fois ! Promis !

    • @elpheno
      @elpheno 4 роки тому

      Très bonne réponse ! Cette vidéo est pour moi celle qui me permet de maîtriser la compréhension des hooks