Tutoriel REACT.JS en 1 HEURE | Comprendre l'ESSENTIEL en 2024
Ғылым және технология
🗞 Regarde une vidéo masterclass gratuite sur JSX et ReactDOM : mlv.sh/react-1-heure
Thumbnail credit to « videv »
Où rejoint juste ma newsletter ici : codelynx.dev/emails
00:00 - Intro
01:30 - Pourquoi utiliser React ?
06:00 - Création d'une app
12:00 - C'est quoi un composant
14:30 - Comment fonctionne ReactDOM.render
17:30 - Le JSX
20:00 - Les composants en pratique
33:00 - C'est quoi les hooks ?
37:00 - Les hooks en pratique
47:00 - La règle des states
51:00 - Les formulaires
01:05:00 - Clean code
01:10:00 - Outro
N’hésite pas à proposer le sujet de la prochaine vidéo en commentaire.
▶ VIDÉO
On va créer une application, un peu comme Twitter durant cette vidéo.
En plus de comprendre React, tu vas comprendre les state, les composants et les hooks.
Avec des schémas clairs sur pourquoi c'est utilisé !
Part sur de bonnes bases !
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
💌 Ma Newsletter : melvynx.com/emails
▶ QUI SUIS-JE ?
Je m'appelle Melvyn et je suis passionné par le développement depuis mes 14 ans.
J'ai commencé par le développement WEB, avec HTML / CSS. J'ai ensuite créé un petit backend en PHP.
J'ai la chance de pouvoir gagner ma vie grâce à ma passion depuis maintenant 3 ans. En dehors de ça, j'ai eu l'occasion de réaliser différents sites web pour plusieurs petits projets.
Je veux partager ma passion avec toi et te permettre de ressentir les mêmes émotions incroyables que procure l'apprentissage du dev, c'est pourquoi je serais extrêmement heureux que mes mails t'aident à prendre la bonne voie. J'y consacre plusieurs heures par semaines et je suis fière que tu participe à la communauté de CodeLynx.
14/08/2022
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject
Пікірлер: 106
Reçois une masterclass gratuite sur JSX et ReactDOM : codelynx.dev/beginreact/get-masterclass ❤
J'aime bien tes explications, tu ne parle pas comme un robot qui récite un texte. Hâte de voir la version advanced ;)
@melvynxdev
Жыл бұрын
Merci beaucoup !
Je viens de découvrir ta chaîne et j’aime bien ta façon de faire ;)
@melvynxdev
Жыл бұрын
Merci beaucoup !!
Très bonne vidéo ! Merci ;)
@melvynxdev
Жыл бұрын
Merci à toi 😊
Top! Merci !
@melvynxdev
Жыл бұрын
Merci à toi !
superbe vidéo, thx
@melvynxdev
Жыл бұрын
Merci à toi
quelle belle explication je te remercie
@melvynxdev
Жыл бұрын
Merci à toi !
Très bonne vidéo, bravo ! Quand penses-tu sortir une formation sur du React advanced ?
@melvynxdev
Жыл бұрын
Hello, c'est en préparation, rendez-vous ici pour être prévenue : codelynx.dev/advancedreact/subscribe
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
Жыл бұрын
Ahah, oui un jour peut-être !
@dapria
9 ай бұрын
kzread.info/dash/bejne/kX2rr6OOksaYpKQ.html
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
11 ай бұрын
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
Super vidéo ! merci pour tes explications super clair. Par contre je t'avoue que à partir de 1h05 (le clean code) cela a été beaucoup trop vite pour moi.
@melvynxdev
Жыл бұрын
Hello ! Je comprend, je vais essayer de faire mieux dans la version 2 omfg !
@dapria
9 ай бұрын
kzread.info/dash/bejne/kX2rr6OOksaYpKQ.html
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
Жыл бұрын
Ahah, j'en ai pas trop, mais bienôt moi même
🥇
@melvynxdev
Жыл бұрын
Merci !
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
Жыл бұрын
j'en ferrais une vidéo mais moi je suis plutôt react, pas fan de vue
Je m'abonne direct 😭😭😭😭
@melvynxdev
Жыл бұрын
❤️❤️
Tu utilises quelle extension pour avoir ce genre d'icones pour les fichier vscode?
@melvynxdev
Жыл бұрын
Material Icon un truc du genre
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
@melvynxdev
Жыл бұрын
Merci beaucoup !
C est quoi ton site Web pour ta presentation en tableau blanc stp (en debut de video) merci
@melvynxdev
Жыл бұрын
Hello, c'est tldraw.com
@nestor94460
Жыл бұрын
@@melvynxdev tu m'avais déjà répondu sur Twitter merci bcp de me réponde à nouveau ici t'es top!
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 ?
@melvynxdev
Жыл бұрын
Hello, c'est Copilot
j'ai vu votre formation begin react, si vous pouvez ajouter les tests unitaires aussi, ça sera encore top
@melvynxdev
Жыл бұрын
Hello, c'est en préparation, rendez-vous ici pour être prévenue : codelynx.dev/advancedreact/subscribe
@dapria
9 ай бұрын
kzread.info/dash/bejne/kX2rr6OOksaYpKQ.html
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
Жыл бұрын
Hello merci bcp, c’est tldraw
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
Жыл бұрын
Merci beaucoup ! C'est Tldraw dans celle-ci
@yazidwrcb7310
Жыл бұрын
@@melvynxdev Ah d'accord. Merci
quel outil tu utilise pour le sketchboard et les shema du début ? , please son nom , il est performant et merciii
@melvynxdev
8 ай бұрын
tldraw normalement !
@azizkbd
8 ай бұрын
Merci mec @@melvynxdev
Je ne vois pas l’article que tu fais référence dans la description à 30:00
@melvynxdev
Жыл бұрын
La vidéo ne dure pas 30 minutes
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
Жыл бұрын
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
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
4 ай бұрын
min-width ne définit pas la width max !
Salut! Quelle extension utilise tu pour avoir les icônes- emoji sur ton clic droit ;) ? Cool ta vidéo...
@melvynxdev
Жыл бұрын
Hello, je comprends pas trop !
@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
Pk réact ne marche pas sur mon visual code stp merci
@melvynxdev
4 күн бұрын
je sais pas :(
C'est quoi stp l'outil de mind mapping que tu utilises ?
@melvynxdev
Жыл бұрын
Tldraw et c’est plus un outil de dessin
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
17 күн бұрын
Non je sais pas trop
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
4 ай бұрын
hello, merci, je sais pas si je l'ai garder.
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
10 ай бұрын
En suivant ma formation BeginReact ? Test ici codelynx.dev/beginreact/minireact
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
Жыл бұрын
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
Жыл бұрын
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
8 ай бұрын
@@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!
C'est incroyable ce que tu sais faire avec l'app, est ce bien l'app freeform?
@melvynxdev
2 ай бұрын
non Excalidraw
merci beaucoup pour ta video, est il possible d'avoir acces à ta présentation ? merci
@melvynxdev
3 ай бұрын
Hello, je crois que je l'ai perdu elle xD
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
11 ай бұрын
Que pour la mignature et le titre, enfin les américains ont fait ça bien avant lui et moi 😂
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
Жыл бұрын
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
Жыл бұрын
@@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 )
je peux te contacter??
@melvynxdev
Жыл бұрын
Oui
@user-ix6jx1wt3e
Жыл бұрын
@@melvynxdev comment?
Du coup tu répond à une question " Pourquoi React ? " J'en ai une nouvelle, une APP sous React ou NextJS ?
@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
vas tu faire une formation udemy stp???
@melvynxdev
Жыл бұрын
Je DETESTE Udemy, donc non.
@lechampi2237
Жыл бұрын
@@melvynxdev 🤣🤣🤣🤣en grand caractere prq tu deteste?
@melvynxdev
Жыл бұрын
@@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
Жыл бұрын
Anarque alors de Udemy. Stp tu as un discord ?
@melvynxdev
Жыл бұрын
@@lechampi2237 Oui, et tu peux rejoindre en rejoignant le club ici : codelynx.dev/emails
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
4 ай бұрын
difficile comme ça !
@patl.6143
14 күн бұрын
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 !
Trop vite pour les débutants
@melvynxdev
Жыл бұрын
En 1 heure c’est compliqué
Créer un superbe outil et ne pas avoir un site optimisé ... !!
@melvynxdev
9 ай бұрын
ah oui
Bien trop rapide , les compétences ok mais pas adapté pour les debutants .
@melvynxdev
Жыл бұрын
Les compétences ok ? Tu es débutant ou pas ? Je pense qu'aucune vidéo KZread ou tu regardes un gars codé est adapté au débutant. Il fallait bien faire tenir les compétences en 1 heure désolé.
Ba oui pourquoi pas devenir dev pro en 1h, bande descroc
@melvynxdev
Жыл бұрын
Tu as vue cette information qqpart ? C’est écrit « COMPRENDRE L’ESSENTIEL » pas devient dev pro