Apprendre REACT.JS en 1 HEURE | Comprendre l'ESSENTIEL en 2024

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

КОМЕНТАРІ • 111

  • @melvynxdev
    @melvynxdev  Рік тому +3

    Reçois une masterclass gratuite sur JSX et ReactDOM : codelynx.dev/beginreact/get-masterclass ❤

  • @TheSteban99
    @TheSteban99 2 роки тому +16

    J'aime bien tes explications, tu ne parle pas comme un robot qui récite un texte. Hâte de voir la version advanced ;)

  • @MrPyramide
    @MrPyramide 5 днів тому

    Hello Melvyn, à 55 minutes, tu fais un const name = event.target.name.value, mais quand je test ça, ça me fait une erreur..?
    Je dois passer const name = event.target[0].value; pour que ça fonctionne chez moi ? Tu aurais une explication, du pourquoi ton code fonctionne en vidéo stp ? ;)

    • @melvynxdev
      @melvynxdev  5 днів тому

      tu utilises Chrome ?

    • @melvynxdev
      @melvynxdev  5 днів тому +1

      en règle général, debug utilise console.log, je pense que tu n'as peux être as mis "name='name'" sur l'élément

    • @MrPyramide
      @MrPyramide 5 днів тому

      @@melvynxdev génie ! 😁
      Oui, j'utilise chrome, et.. Effectivement, j'avais oublié les attributs name et content 😊 !
      Bon.. Ceci dit, ça marchait pas non plus après même en console..
      Ensuite, ça me faisait galèrer pour le refacto, y'a presque tout qui marchait.. Et j'avais pas écrit un return sur la methode "addTweet"..
      En même temps.. 5h du mat.. Saoulé de faire toute la vidéo, et que plus rien ne marche à 5 minutes de la fin... 😂.. Mais.. J'pouvais pas aller dodo et que ça bug.. 😅
      Bref, tuto fini, un peu confus à des moments vue que tu le faisais en live toi aussi ! Mais, merci Melvin ! ❤️
      Ça fait trois / quatre mois que je me suis remis au dev en full front js, (5 / 8 ans de php / Symfony avant) et, là, je me suis mis à next js depuis pas mal de temps.. J'avais déjà fait plusieurs tutos react et je pense même faire ta vidéo de 1h sur react avec ts 😊
      Mais.. J'me tâte à aller faire le tuto sass de 6h ! (car j'en ai déjà suivi d'autre, mais en anglais, c'est un peu plus relou de suivre la logique de dev du mec qui fait le code..)
      En tout cas, merci Melvin pour les vidéos et la réponse ! Je regarde pas mal de tes autres vidéos car elles sont top en général !
      Ps : as tu prévu de faire (sinon ça serait top) un p'tit tuto config de windsurf avec des prompts bétons et des globales config ? (j'ai déjà suivi celle de cursor et sa config, et à ce jour tu es encore le seul fr à proposer ce thème ! 😊)
      Bref, la bises 😊😅👍
      Un abonné en plus ! 😊

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

    Je ne vois pas l’article que tu fais référence dans la description à 30:00

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

      La vidéo ne dure pas 30 minutes

  • @Tran-rm1fi
    @Tran-rm1fi 5 місяців тому

    Salut Melvyn, j'ai une question à te poser, il me semble que tu utilises Auto Import mais je n'arrive pas à le faire fonctionner, est-ce que t'aurais pas une idée du pourquoi ? Merci

    • @melvynxdev
      @melvynxdev  5 місяців тому

      Non je sais pas trop

  • @R.e.n.e
    @R.e.n.e 2 роки тому +1

    J'aimerais savoir si il a une très grande différence mis à part la popularité entre React JS et Vue JS(avec la syntaxe jsx)?

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

      j'en ferrais une vidéo mais moi je suis plutôt react, pas fan de vue

  • @Presidentum
    @Presidentum 2 роки тому +3

    Très bonne vidéo, bravo ! Quand penses-tu sortir une formation sur du React advanced ?

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

      Hello, c'est en préparation, rendez-vous ici pour être prévenue : codelynx.dev/advancedreact/subscribe

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

    quel outil tu utilise pour le sketchboard et les shema du début ? , please son nom , il est performant et merciii

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

    Je viens de découvrir ta chaîne et j’aime bien ta façon de faire ;)

  • @LeMontreuillois
    @LeMontreuillois 8 місяців тому

    Salut Melvin ! Merci pour cette chouette vidéo. Petite question concernant le style : à 24m37, si je supprime le width: fit-content et que je conserve que min-width : 320px, pourquoi ma div s'étend sur toute la largeur alors que j'ai spécifié un min-width de 320px ?

    • @melvynxdev
      @melvynxdev  8 місяців тому

      min-width ne définit pas la width max !

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

    superbe vidéo, thx

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

    Je suis débutant dans le code et j'arrive a comprendre pas mal de chose. Mais j'ai trouvé une faille dans ton code (sauf si erreur dans mon code), a 1:04:28 lorsque tu likes, tout tes tests marchent très bien (ainsi que chez moi aussi) mais si tu enlèves tout les tweets puis tu en fais un nouveau. Au premier like, j'ai perso une erreur "Uncaught TypeError: Cannot read properties of undefined (reading 'like')" Erreur que je n'ai pas en créant directement un tweet sans rien supprimer comme dans tes tests. Je ne sais pas encore pourquoi mais je vais tenter de résoudre le pb. Merci, avec ta vidéo, j'ai appris des choses.

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

      Bon j'ai réussi a faire marcher mon programme. Dans (const newTweet,) ce trouve le problème. J'ai remplacé la ligne (id: tweets[tweets.length - 1]?.id + 1 ?? 0,) par (id: tweets[tweets.length - 1]?.id + 1 || 0,) et ca marche. Je n'ai pas encore bien compris comment marche le "?" dans le code mais j'y travail.

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

      Ah oui effectivement, je comprend le problème ! Merci de me le faire remarquer. Dommage que je ne puisse pas éditer la vidéo

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

      ​@@robertperez9474Si j'ai bien compris c'est parce que dans le premier cas "??" il va juste vérifier si la variable existe donc si elle ne retourn pas 'undefined' ou 'false'. Alors que dans le deuxième cas "||" il va vérifier si l'id égal ou pas à 0 et c'est correct car le premier Tweet aura toujours comme premier identifiant 0!

  • @Entraideregime
    @Entraideregime 5 місяців тому

    Pk réact ne marche pas sur mon visual code stp merci

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

    quelle belle explication je te remercie

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

    Très bonne vidéo ! Merci ;)

  • @nestor94460
    @nestor94460 2 роки тому +1

    C est quoi ton site Web pour ta presentation en tableau blanc stp (en debut de video) merci

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

      Hello, c'est tldraw.com

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

      @@melvynxdev tu m'avais déjà répondu sur Twitter merci bcp de me réponde à nouveau ici t'es top!

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

    Tu utilises quelle extension pour avoir ce genre d'icones pour les fichier vscode?

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

      Material Icon un truc du genre

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

    Très bonne vidéo , mais une chose que je n’arrives pas a comprendre dans le code … c’est que dans tout les tutos, cours, forma on nous parle de fonction de get machin de id bazard …. Mais comment et on on apprend tout ses mots ???

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

      En suivant ma formation BeginReact ? Test ici codelynx.dev/beginreact/minireact

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

    Je m'abonne direct 😭😭😭😭

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

    la vidéo est très bien faite.
    Mais si je comprend bien, si on n'installe pas React avec Vite on aura des fichiers js à la place de jsx??

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

      Oui mais c'est pas très grave, js ou JSX change rien. Le problème c'est ts ou tsx surtout. Mais je préfère JSX pour expliciter le fait que tu en utilises

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

    Super .. un peu vite vers la fin mais super je kiff.
    Possible de faire un bonus video avec : Routers, Material UI ou Tailwind prochainement stp ?

    • @melvynxdev
      @melvynxdev  Рік тому +1

      Ahah, oui un jour peut-être !

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

      ua-cam.com/video/_IwMAUbc2tA/v-deo.html

  • @elihaoutaieb
    @elihaoutaieb 10 місяців тому

    Salut il est l'article sur la destructuration des props ? Et franchement merci pour tous juste si on peux avoir le code source se serai super !
    merci

    • @melvynxdev
      @melvynxdev  9 місяців тому

      hello, merci, je sais pas si je l'ai garder.

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

    Super video. Elle est intéressante et assez facile à comprendre.
    Je peux savoir quel logiciel tu utilises pour ranger les images, textes et schémas que tu présentes lors de l'explication ?

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

      Merci beaucoup ! C'est Tldraw dans celle-ci

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

      @@melvynxdev Ah d'accord. Merci

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

    Je suis fan de ton énergie, tu es concit, incisif, dynamique ! Vraiment ca donne envie de te suivre et de suivre ton choix de techno.
    A ce propos : je dev un réseau social sur vuejs. Je me rends compte que c la merde pour les appli mobile.
    J'hésite à tout redev en React / react Native. Ma question : est-ce que react et react native peuvent être inclus dans un seul projet ? Ce afin de modifier le code de la version web et de la version mobile dans la même page.

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

      Hello, merci pour ton feedback ! Oui c'est possible, il faut utiliser un monorepo. Un bon starter : tamagui.dev/docs/intro/installation#quick-start ! Bonne journée :D

  • @AllaNIANG-um2hf
    @AllaNIANG-um2hf Рік тому

    Salut Melvynx je trouve top tes vidéos cependant j'aimerai savoir quel outils de complétion de texte tu utilise dans tes invites de commandes ?

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

    Salut! Quelle extension utilise tu pour avoir les icônes- emoji sur ton clic droit ;) ? Cool ta vidéo...

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

      Hello, je comprends pas trop !

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

      @@melvynxdev Re :) Bah typiquement pour intégrer les icônes "coeur" pour les like et la "croix"pour delete en haut à droite de chaque tweet (moi j'ai juste mis la string "Supprimer" à la place...) thx

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

    C'est quoi stp l'outil de mind mapping que tu utilises ?

    • @melvynxdev
      @melvynxdev  Рік тому +1

      Tldraw et c’est plus un outil de dessin

  • @guillaumes.6974
    @guillaumes.6974 Рік тому

    Bonjour merci pour la vidéo, j'essaye de me spécialiser vers React et ta chaîne est une mine d'or, c'est super clair. Si jamais, est-ce que tu as des recommandations pour parfaire son JS "basique" ? J'aimerais ne pas aller trop vite et je sens que si je fonce tête baissée vers React il me manquera les fondamentaux. Merci pour ton aide !

    • @melvynxdev
      @melvynxdev  Рік тому +1

      Ahah, j'en ai pas trop, mais bienôt moi même

  • @7taztoons
    @7taztoons 2 роки тому

    Hello 👋 Pourquoi ton addLetter tu le call sans callback, {addLetter} , et ton onLike tu lui donnes un callBack () => onLike () ? Le comportement change pas c'est juste une préférence d'écriture ?
    Je m'exprime peut être mal ça onClick={addLetter} c'est exactement la même chose et la même comportement que ça onClick={() => addLetter ()}
    mais ça onClick={addLetter()} c'est à proscrire ?
    Pour ton onDelete t'es pas obligé d'utiliser current ? tu pourrais juste utiliser la valeur de ton state qui est tweet ?
    Merci à toi & merci pour cette vidéo et tout le travail réalisé .
    Bonnes fêtes ;)

    • @melvynxdev
      @melvynxdev  2 роки тому +1

      Hello, Oui j'ai une préférence pour toujours utiliser la syntaxe `() => {}` dans mes fonctions afin de vérifier que j'utilises pas des paramètre ou autre
      Et le ondelete j'ai pas compris

    • @7taztoons
      @7taztoons 2 роки тому

      @@melvynxdev Merci pour ta réponse, dans ton onDelete dans ton fichier app.jsx ligne 40 tu utilises "curr", pourquoi ne pas utiliser ton state , soit "tweet" qui lui est ton state courant ( current )

  • @jean-bernardsaint-eve3340
    @jean-bernardsaint-eve3340 2 роки тому

    Belle vidéo, c'est quoi l'outil que tu utilises pour tes présentations ? merci pour ta réponse. En tout cas, présentation claire et efficace

    • @melvynxdev
      @melvynxdev  2 роки тому +2

      Hello merci bcp, c’est tldraw

  • @KonKhmer83228
    @KonKhmer83228 7 місяців тому

    C'est incroyable ce que tu sais faire avec l'app, est ce bien l'app freeform?

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

    Top! Merci !

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

    j'ai vu votre formation begin react, si vous pouvez ajouter les tests unitaires aussi, ça sera encore top

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

      Hello, c'est en préparation, rendez-vous ici pour être prévenue : codelynx.dev/advancedreact/subscribe

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

      ua-cam.com/video/_IwMAUbc2tA/v-deo.html

  • @deborahlevy5572
    @deborahlevy5572 8 місяців тому

    merci beaucoup pour ta video, est il possible d'avoir acces à ta présentation ? merci

    • @melvynxdev
      @melvynxdev  8 місяців тому

      Hello, je crois que je l'ai perdu elle xD

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

    Du coup tu répond à une question " Pourquoi React ? " J'en ai une nouvelle, une APP sous React ou NextJS ?

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

      NextJS c'est React, donc les deux sont OK.
      Si ta question c'est SPA (cra ou vite) vs NextJS je dirais : ça dépent ton besoin

  • @Hanix_cptm
    @Hanix_cptm 4 місяці тому

    merci

  • @lambertteisserenc5915
    @lambertteisserenc5915 2 роки тому +2

    Top la vidéo :)
    Je suis bien intéressé par une vidéo qui pousse le concept des hooks un peu plus loin :)
    Je suis dev back à la base et quand je fais du React j'utilise seulement useState, useEffect et parfois useReducer mais ça s’arrête là.
    Allez hop je m'abonne

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

    je peux te contacter??

  • @liolio4386
    @liolio4386 4 місяці тому

    Bonjour tu n aurais pas été dans l émission patron incognito? J ai vu un gars qui te ressemble beaucoup 😮

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

    vas tu faire une formation udemy stp???

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

      Je DETESTE Udemy, donc non.

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

      @@melvynxdev 🤣🤣🤣🤣en grand caractere prq tu deteste?

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

      @@lechampi2237 Car quand tu paye une formation Udemy, tu paye entre 20% et 80% (si c'est udemy qui a amené le client) à Udemy

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

      Anarque alors de Udemy. Stp tu as un discord ?

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

      ​@@lechampi2237 Oui, et tu peux rejoindre en rejoignant le club ici : codelynx.dev/emails

  • @PfutIndustries
    @PfutIndustries Рік тому +1

    Pas mal le tutoriel mais un peu dur de te suivre !
    (tu t'es inspiré de ViDev pour la miniature, le titre et la cam ? haha )

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

      Que pour la mignature et le titre, enfin les américains ont fait ça bien avant lui et moi 😂

  • @nostromo22x2
    @nostromo22x2 10 місяців тому

    Après avoir parcouru les commentaires, je ne vois personne qui a le même problème que moi. Quand je clique sur Like, j'incrémente de un au premier clic mais à partir du 2e, j'incrémente de deux. Je ne trouve pas la solution.

    • @melvynxdev
      @melvynxdev  9 місяців тому

      difficile comme ça !

    • @patl.6143
      @patl.6143 5 місяців тому

      En fait, cela est dû à un comportement particulier de React concernant l'état et les rendus. Cela peut se produire dans un environnement de développement strict où React exécute certains hooks. Dans la plus vidéo plus tot, Melvyn met en commentaire dans le fichier main.jsx, c'est pour cela qu'il n'y a pas de double incrément ensuite. Si tu commentes cela, tu ne devrais plus avoir de pb. Bon code !

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

    🥇

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

    Bien trop rapide , les compétences ok mais pas adapté pour les debutants .

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

      Les compétences ok ?
      Tu es débutant ou pas ? Je pense qu'aucune vidéo UA-cam ou tu regardes un gars codé est adapté au débutant.
      Il fallait bien faire tenir les compétences en 1 heure désolé.

  • @المراسل-ك1س
    @المراسل-ك1س Рік тому

    Trop vite pour les débutants

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

    Créer un superbe outil et ne pas avoir un site optimisé ... !!

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

    Ba oui pourquoi pas devenir dev pro en 1h, bande descroc

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

      Tu as vue cette information qqpart ? C’est écrit « COMPRENDRE L’ESSENTIEL » pas devient dev pro