⚛️ UTILISER
Вставка
- Опубліковано 20 вер 2024
- ⭐ MA FORMATION DE 20H SUR LES BASES DE SYMFONY 5 AVEC 30% DE REDUCTION ICI : learn.web-deve...?coupon=REDUC30
⭐ MA FORMATION API PLATFORM ET REACT AVEC 30% DE REDUCTION ICI : learn.web-deve...?coupon=REDUC30
⚛️ On apprend comment utiliser React dans un site déjà existant et non pas dans une application full React
Dédicacé à Flora, Jérôme, Morgane, Carlos, Julien et Alain.
LE LIEN GITHUB AVEC LE PROJET DE BASE : github.com/lio...
SUIVEZ LE README POUR L'INSTALLER !
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
💓 POUR ME SOUTENIR
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
☕ Si tu veux me soutenir (et me tenir éveillé), paye moi un café ici : www.buymeacoff...
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
😺 LIENS ET INFOS
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
🔗 Documentation officielle de React : reactjs.org
🔗 Documentation de Webpack Encore : symfony.com/do...
💪🔥 BONUS :
-----------------------
🔗 Playlist - Comprendre Symfony en 4h : • 🎵 Tutoriels Symfony 4 ...
🔗 Tutoriel - Créer un chat grâce à PHP, Javascript et AJAX : • [TUTO] CREER UN CHAT E...
🔗 Tutoriel - Comprendre AJAX et les promesses : • [TUTO] CREER UNE APP M...
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
😺 RETROUVEZ MOI ICI LES BROS
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
Twitter : / liiorc
LinkedIn : / lior-chamla
Facebook : / 366592570424890
Discord : / discord
CodePen : codepen.io/lio...
☕ Si tu veux me soutenir, paye moi un café 😁💓 : www.buymeacoff...
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
😺 MUSIQUES
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
🎵 Memtrix - All You Are : • Memtrix - All You Are
🎵 Noisestorm - Breakdown VIP : • [Drumstep] - Noisestor...
🎵 Jensation - Delicious : • Jensation - Delicious ...
🎵 Tobu - Candyland : • Video
🎵 JPB - High : • JPB - High | Trap | NC...
🎵 Cartoon feat. Jüri Pootsmann - I Remember U (Xilent Remix) : 🎵 • Cartoon, Jéja feat. Jü...
🎵 Aero Chord - Break Them (feat. Anna Yvette) : • [Trap] - Aero Chord - ...
🎵 Muzzy - Play (feat. UK:ID) : • MUZZ - Play (feat. UK:ID)
Encore une vidéo exceptionnelle ! A chaque fois que tu en sors je suis tel l'enfant qui se réjouit de la sortie du nouvel opus de son film préféré ! :)
Continue bro !
Merci beaucoup 😉
Je ne peux que te dire merci beaucoup pour cette. Le webpack ne me fera plus peur. Une vidéo sur redux nous sera d'un grand plus. Et encore merci beaucoup et Bon courage. Thanks.
Merci à toi :)
Merci pour la simplification et les explications du déroulement logique !
Merci à toi :)
Sublime, magnifique, nickel chrome safari firefox 😁😁😁👍👍👍👍👍👍👍👍👍👍👍
Merci beaucoup Pierre :-)
Merci pour tes superbes vidéos Lior, toujours excellentes et très pédagogiques !
Celle ci vraiment une turerie, étant développeur Backend PHP/Symfony voulant apprendre React, grâce à toi je vais pouvoir ajouter du react dans mes projets Symfony actuellement fait en Twig et Bootstrap, va y avoir du chamboulement ;)
Fais toi plais, j'ai aussi fait une vidéo sur React avec Symfony :)
@@LiorCHAMLA Ah ouais sérieux, ben je suis bien intéressé effectivement :)
Je regardais dans tes vidéos mais je ne trouve pas la vidéo dont tu parles, elle est dans ta formation API Plateform & React peut être ?
Sinon si tu peux me filer le lien s'il te plaît, je te remercie beaucoup par avance :)
Continues comme çà sinon tu fais vraiment de l'excellent boulot et tu m'aides beaucoup au quotidien !
@@dblbzh2983 non non y a bien une vidéo React et Symfony sur ma chaîne youtube et bien sûr après dans ma formation api Platform.
@@LiorCHAMLA Coucou, bon ben j'ai beau chercher, je n'ai pas trouvé la vidéo en question malheureusement ... Je louche certainement un peu... En même temps tu en fais tellement des vidéos :) Merci à toi en tout cas !
@@LiorCHAMLA j'ai suivi la formation react API platform une super formation très complet ,moi je cherche comment intégrer react dans un project symfony classic avec twig en dehors d'une API rest
Lior, à quand une formation sur React !!??? En tout cas merci beaucoup pour cette vidéo !!!
Oulà, pas de formation React à proprement parler, mais suis Anthony Welc qui parle beaucoup de ça et qui a fait une formation sur Udemy !
Merci Lior pour cette vidéo
Excellent tuto et tip ! merci beaucoup.
Merci a toi 😉
top comme toujours tes vidéos ! très clair ! moins la farfouille que grafikart (sans critiquer avec objectivité)
J'ai pas pigé l'histoire de la farfouille mais merci beaucoup en tout cas :)
Je commente rarement mais là waouh c'est super
J'aurais aimé la partie Ajax ;)
Merci énormément d'avoir regardé et commenté :)
Merci beaucoup pour cette magnifique tutor . Tu peux faire un tuto sur Reactjs+AWS-amplify et graphQl avec dynamoDB stp . je te remercie en avance
Je connais pas la moitié des technos dont tu parles hahaha :D
Vraiment trop top
Merci Rado !
51:10 pour info c'est du coté de ton micro par contre faut pas oublier de config la fiche après... xD
Haha j'suis trop nul en youtubeur :p
@@LiorCHAMLA mdr nan tu gères ! Si t'as plus d'idée de vidéos je serrai pas contre un coup de pousse au niveau du deploy :P j'ai trouvé pour node et pour react mais si on utilise les 2 :S
Wahou! Tu es génial!
Wow merci :)
Bonjour Lior,
Tout d'abord, très bonne vidéo et merci beaucoup.
Petite question : Ici on crée des routes qui render des twigs (ou du html). A partir de ça, on intercepte ensuite la balise avec des sélecteurs js pour lancer et incorporer le react, très bien. Mais est-il possible de retourner du json directement dans des routes symfo (comme si on avait une API symfo) et de lancer la page React qui ferait un appel axios dans le componentDidMount pour récupérer ces données ou faut-il forcément passer par un rendu twig quand on a un site en Symfony ?
Bien à toi,
Maxime
Non Hazarda, c'est évidemment possible de créer des routes qui renvoient du JSON, c'est tout le sujet de mes 2 dernières vidéos sur la chaine, regarde les et tu comprendras les bases :)
Sinon j'ai une formation de 15h sur ce sujet très précisément avec une réduction de 55% dans la description de mes dernières vidéos :)
Merci beaucoup, je m'empresse d'aller voir =)
Merci pour le tuto
Merci d'avoir regardé :-)
Super video, comment devrai-je configurer mon vs code pour que a chaque fois j'utilise la commande code. pour que ce ca fonctionne
Je ne sais plus, je crois que ça se fait à l'install, sinon faut voir sur Google "how to setup code command for vscode" ? :)
yes merci c'est vrai que configurer webpack c'est un enfer pour les débutants
En effet :D
Bonjour Lior. Sur le bouton, faire: {onClick: this.handleClick.bind(this)} est une bonne pratique ou est-ce déconseillé?
C'est un peu lourdingue mais ça marche :D
Excellent tuto surtout web pack-encore parce que moi il m arrange mieux que webpack normal
Parfait :)
aaah parfait nikel creum :D
Merci :)
mille merci magnifique !!!!!!
De rien merci à toi :-)
Merci encore Lior pour le contenu. Voilà je fais une app en symfony avec un front en react. Je sais comment organiser mon routing si je fais une spa. Comment faire (ce qu'il y'a des les templates twig) quand je fais plusieurs pages avec react ?
J'ai essayé de mettre des div avec d'autres balises que "root" dans le body des autres templates de mes controller. Mais j'ai eu plein d'errerus
Et je ne sais pas comment adapter le routing de react (Router + Switch) avec mes templates .html.twig de Symfony
C'est parce que tu n'es pas sensé avoir les 2 routeurs en théorie :) même si en pratique avec du boulot tu peux le faire ^^
parfois les createur des commande aiment de rendre les choses ambigué est hors le normal, comme exemple php -S au lieu de juste faire un -s au miniscule sa m'a pris 5 minute pour dertecter mon erreur...
Pourtant c'est écrit très clairement dans la documentation haha :D Bravo en tout cas de t'être dépatouillé avec ça, c'est le début de la gloire :)
Tu gère !!
Merci :-)
Merci pour le tuto. J'ai des dizaines de site qui datent de 10 ans et j'en peux plus de maintenir du vieux JS.
Et ben voilà ! :-)
depuis plusieurs années (en 2006a2008), bien avant tout ca , et dans un besoin urgent j'etais obligé de créerr un truc en Ajax pour faire a peu pres tous que j ai appelé JeX (Java extension) et depuis , apres pluseirus projets , j'ai laissé tombé le codage , c comme ca!
Heu .. ok :)
@@LiorCHAMLA hhhh, c pour dire que react semble tellement intuitif quand un certain besoin se fait imposer , :)
Merci pour cette vidéo. Que j'ai pas terminée pour l'heure. Je bloque sur la fin. Avant installation du webpack-encore, le rendu du JSX était impeccable. Boutons opérationnels... Après installation de webpack-encore et bien que le code soit compilé sans message d'erreur via mon terminal, j'ai perdu le rendu des boutons. J'ai continué. Virés les scripts react et react-dom de mon index.php (Installés en ligne de commande). Fait mon import react et react-dom dans le posts.js. Mais rien puisque le problème me suit depuis l'installation de webpack-encore. Une idée ?
Aucun message d'erreur dans la console éventuellement ?
@Lior CHAMLA aucun message en console non plus.
le seul truc qui dénote par rapport à la vidéo, c'est le nombre d'Entrypoint. Entrypoint posts [big] = runtime.js vendors~posts.js posts.js. Quoi qu'il en soit, je viens de lancer npm uninstall @symfony/webpack-encore, j'ai supprimé le webpack.config.js et le package.json pour recommencer l'installation.
@@LiorCHAMLA Alors après avoir réinstallé webpack-encore et constaté que ça ne changeait rien à l'affichage du rendu (je connais maintenant la procédure d'installation par cœur...), je viens enfin de trouver ! Fallait dé-commenter la ligne .splitEntryChunks() du fichier pakage.config.js (récupéré dans la documentation) ! De fait, je n'ai plus Entrypoint posts [big] = runtime.js vendors~posts.js posts.js mais juste Entrypoint posts [big] = runtime.js posts.js. Et tout marche impeccable jusqu'au terme de la vidéo. Si ça peut aider... Merci à toi. J'aimerais cependant une petite explication :)
integrer du react dans un projet symfony deja existant est-il possible ou c'est tres compliqué ?
Bah c'est aussi simple que ce que je viens de montrer dans cette vidéo :-)
trop compliquer react c'est vrai c'est sexy comme nom mais vraiment trop compliquer
On code beaucoup plus vite avec React que sans React, faut juste se former :-)
@@LiorCHAMLA oui je vais essayer si il y a plus de video..lol
1heure d'explication pour ajouter un bouton j'aime ..mdrrr
Oui enfin si j'avais pas à expliquer aux gens ça aurait pris exactement 5 minutes, c'est en ça que c'est cool React. Ce qui prend du temps dans cette vidéo c'est les explications.
@@LiorCHAMLA bravo en tout cas pour tes vidéos c'est juste qu'il faudrait inventer un langage plus simple .. à voir..
Bonjour,
Les personnes comme toi peuvent également passer leur chemin et ne rien commenter.
Ces vidéos sont supers et nous apprennent énormément pour beaucoup je suppose.
En plus de ça dans un autre commentaire tu te plains que React est compliqué, alors que justement grâce à ces 60 minutes Lior rentre dans pleins de détails et explique jusqu'au bout les choses.
Etant développeur je m'intéresse à React et les vidéos de Lior sont simplement SU-BLIME !
Je commente rarement mais alors ce niveau de stupidité m'exaspère au plus haut point... triste monde.
Petit mot pour Lior : Bravo, bravo, et encore bravo... je n'ai jamais vu de vidéos aussi bien expliquées et on voit que tu aimes ce que tu fais, alors continues. J'espère pour toi que tu te fera de plus en plus connaitre, tu le mérites vraiment ! Mille merci pour le temps que tu consacres à former les autres :)
les gars il devrais plutot inventer un language plus humain avec un fichier seulement et ecrire un code plus simple genre html6 qui comprendrais tout l'inteligence de javascrit compris sans perdre autant d'explication , si non çà deviens une usine a gaz...
Ca existe plus ou moins déjà, ça s'appelle VueJS :D
@@LiorCHAMLA bravo Lior Pour tout alors bientot une video de se language?lol
Y'en a déjà plein tu sais :-)
@@LiorCHAMLA hello , tu pourrais nous présenter VueJS . Voir une formation Symfony/VueJS ? youtube pour commencer puis udemy ^^ car je t'avoue que React ... ^^ ( Encore une fois merci pour tes vidéos tutos et je sais que cela prend du temps )
@@jeromemoulin5241 Je connais pas bien VueJS mais Grafikart a fait une formation ENTIERE avec ça :-)