Ca y est fini ! 3 jours et demi à mettre pause, à reproduire, à corriger et à étudier le truc. Merci beaucoup pour le tuto, le site est beau est très utile, je vais m'en servir pour mon CV en ligne à coup sûr. J'ai mis un peu de temps car je me suis servi de ce projet pour tenter Typescript au passage; Ca demande quelques manipulations pour les props notamment. Tes projets sont cools, tu expliques bien, mais surtout ton niveau en CSS est vraiment bon. J'ai appris limite plus en CSS qu'en react avec ce tuto, c'était inattendu et agréable. Je vais enchainer sur tes vidéos de CSS ensuite pour y gagner un peu plus. Merci encore !
3 роки тому
C'est marrant parce que un an plus tard je trouve le CSS pas top (j'utilise le code pour mon propre CV mais je galère à bien le maintenir), comme quoi en un an prongresse beaucoup ^^
@ Je viens du back (PHP/Symfony) et je cherchais quelques tutos pour voir un peu le front, comprendre React et me faire à la prog fonctionnelle de JS; Mais j'avais pas pensé prendre une telle tarte sur le CSS ! Pour moi, le go-to du CSS c'est Bootstrap, donc voir un vrai design, avec une vraie logique, et une utilisation de SASS, j'avais pas prévu et c'était cool :) Par contre on se rend aussi compte que CSS n'est pas un sous-langage, que l'on voit la différence chez quelqu'un qui en fait quotidiennement, et donc que c'est compliqué d'être fort dans tous les domaines. J'adorerai faire le back d'une appli sans avoir à m'occuper de toutes ces choses en front que quelqu'un ferait beaucoup mieux que moi ! J'irais voir tes prochaines vidéos alors pour pomper ton skill en CSS !
@@Antoine-gx4yl Les projets sont assez formateurs. On voit de réels cas, c'est concret, même s'ils sont de petite envergure en comparaison de ce qui sera demandé en entreprise. En revanche, la réussite dépend énormément de l'implication du mentor lors des sessions hebdomadaires. Car réussir seul quand on n'a jamais codé (ce qui était mon cas), c'est extrêmement dur. Les cours ne suffisent pas à maîtriser une notion, il faut donc piocher ailleurs (comme ici, entre autres). Disons que c'est une bonne base pour devenir dev, si on travaille beaucoup à côté !
Super !! exercice vraiment sympa avec pas mal de notions et de rappel sur les bases ! Explication au top, très bonne élocution et vraiment dynamique ! Je m'abonne
Trop bien pour apprendre react de façon utile. J'ai pu y mettre ma petite touche en CSS, faire quelque modif suite au changement de contenu, mais dans l'ensemble le projet est parfait !!! Je conseil a toutes les personnes en formation qui veulent apprendre autrement qu'avec des cours théorique de faire un petit tour sur cette vidéo. Un grand merci From scratch Je n'hésiterais pas a te mentionner sur ce projet (il faut rendre a César ce qui est à César :) ).
excessivement propre, tres bon pedagogue, j'arrive à la toute fin de ma formation (o'Clock) et je sens que tes videos vont me servir à gagner en confiance, merci ! keep going
@@Antoine-gx4yl Wow improbable d'avoir se retour de 2ans en arriere ^^' Apres la formation d'Oclock j'ai passé 6mois à me continuer à me former et à postuler à droite à gauche, au bout de ces 6 mois j'ai trouvé une startup qui m'a employé en tant que developpeur fullstack React/Node, j'y suis resté 1 an et demi et à partir de septembre je monte ma société pour faire des prestations freelance, je cherche donc mes premiers clients :) merci à O'Clock et à ton message !
Salut Jai fait tout le tuto avec toi et j'ai obtenu la même chose que toi et ceci est la preuve que ton tuto est très bon crois moi . félicitation pour ton travail. Je vais l'utiliser pour mon propre portfolio si ca te dérange pas biensûr avec quelque modifications dans les couleurs
Avec les hooks et les composants fonctionnels, je me suis permis d'adapter le code de ton tuto qui est vraiment génial. Belle pédagogie. Sérieux sans se prendre au sérieux. Bravo et merci !
Hello FromScratch, je decouvre ta chaine UA-cam et je revise du React grâce à toi en refaisant mon CV au format React - tres bonne idee pour reviser car ca fait un bail que j'ai pas codé et j'espère bientot guérir pour proposer mon cv à jour à mes prochains clients...bref ce comm pour dire un grand merci j'en suis à 38 min tu prends ta pause bien méritée :)...Moi je code allongé car impossible de rester assis - jespere bientot guérir et reprendre un boulot ca me manque - Big up à ta chaine que je vais suivre de prêt
C'est un super projet, je viens de terminer le cours d'openclassrooms sur React, et je recherchais une mise en application. C'est l'exemple parfait :) Merci à toi . Je m'y attèle :) à 2:35:20 de la vidéo, je crois que le problème vient du display grid du parent. Celui ci peut dérégler la largeur et hauteur de ses enfants. Le problème semble résolu si on passe languageDisplay et frameworkDisplay en display flex . avec une flex-direction:column et un justify-content: space-evenly
Je m'abonne! Ca m'a fait une petite révision des petits tricks du style et ça m'a énormément aider à une meilleure compréhension de REACT où je débute. Merci pour ta vidéo!
Excellent tuto, ce n'est pas le premier que je regarde, continue comme ca ! J'apprend beaucoup grâce à tes tutos ! j'ai constaté qu'il y avait une petite erreur au niveau du fichier 'home.scss' , il y a deux fois 'min-height' (jai enlever celui avec les 500px) .homeContent { background: linear-gradient(115deg, $color-1 50%, transparent 100%); min-height: $minHeight; width: 100%; min-height: 500px; border-radius: $borderRadius; position: relative; overflow: hidden; } Merci encore !
Bonjour Mister, J'espère que tuy vas bien, sauf erreur de ma part, le dossier React-basic-files n'est pas disponible ! Pourrais-tu me nous le mettre à disposition s'il te plaît? Merci
Salut! ^^ c'est re- moi ^^ , j'ai trouvé ça très technique la barre de progression. Je connaissais déjà assez bien les animations en css et le js ( méthode map etc ... ) mais la création de chaque barres via les pseudos éléments after avec une width de base à 0 n'est pas un truc qui me serait venu à l'esprit pour faire la même chose.... cool en tout cas !! 👍👍👍
2:04:13 J'ai un soucis ici. React me retourne l'erreur suivante : "TypeError: props.languages is undefined". J'ai passé plusieurs heures à essayer de régler le problème, cherché absolument partout sur internet, resuivis la vidéo et tout retapé mais rien. Pourtant je suis persuadé que l'erreur est ridicule.
Petite précision à 33:00 qui m’a value plus d’une heure de prise de tête, avec la nouvelle version de react-router-dom ce n’est plus component mais element ! ( ça me fait réaliser que les tutos d’il y’a 2 ans sont donc peut être plus valables 😅)
2 роки тому
Effectivement beaucoup de choses sont dépréciées, je le laisse car c'est mon premier tuto React et il a une place particulière ^^
@ Mince 😅 ça serait possible d’avoir une nouvelle vidéo ( ou as-tu fait ?) pour faire des sites simples comme ça en React je suis débutant là dedans mais du coup je ne sais pas trop comment suivre les choses « appréciées » en 2022 et savoir les choses qui ne s’utilisent plus. Car si j’ai bien compris, React ça va très vite il y a des nouveautés tout le temps !
2 роки тому+1
Evidemment, il faut commencer par le début : ua-cam.com/video/f0X1Tl8aHtA/v-deo.html
J'ai decouvert ta chaine sur celle de Benjamin Code. Merci infiniment, je vais creer mon propre portfolio a ma sauce mais en me basant sur ta technique, j'ai 1 an d'experience avec React. Continue ce que tu fais, t'as lair bon! J'ai pas encore tout vu mais j'espere que tu utilise Hooks et non les classes :)
4 роки тому
Merci pour ton message, dommage mais j'utilise des classes components pour expliquer le principe du State, je le dis dans la vidéo que c'est parce que j'estime que pour débuter c'est bien à connaitre. Mais pas d'inquiétude je vais sortir un crud en React avec que des hooks (useState, useEffect et useContext) dans quelques jours ;)
@ Je peux peut-etre remplacer ta partie avec les classes par des hooks ou je suis obliger de passer par les classes dans ce projet? Par example je peux utiliser useState a la place des classes et de this?
4 роки тому+1
Tu peux totalement tout transformer en Fonctional Component, mais bon si t'as un 1 an de React derrière toi je ne suis pas sur que tu apprennes grand chose dans cette vidéo ^^
Nickel ! J'ai un peu mal au crâne, j'ai tout codé de A à Z (tuto de 3h56 ! donc le double pour moi). Il me reste quelques soucis mais ça vient probablement d'erreurs en nommant mes classes.... Je m'abonne avec plaisir 👍
Super vidéo ! Je regarde souvent tes tutoriels, et je m'aperçois que tu utilises beaucoup les animations/transform/3D. Pourquoi ne ferais tu pas une vidéo tutoriel concernant ces genres d'animations ? Ce sont des outils très puissants en CSS, et à vrai dire, très peu de tutos les concernant ! Et c'est parfois assez complexe à comprendre je trouve ! A bientôt
4 роки тому+2
Merci pour ton commentaire Jeff, je vais réfléchir à faire une vidéo sur le CSS poussé ^^
Super tutoriel. Un excellent travail ça m'a aidé beaucoup pour débuter en React. Je m'en suis servi avec la présentation de Nodejs. Au lieu d'utiliser une BD hardcodée j'ai utilisé mon api. Pour les langages par contre j'avais un json [{name: AAA, icon: fa}, { ....}] Et j'ai pas réussi a utiliser includes a cause que les éléments du tableau sont des objects et non du texte qu'on peut comparer avec la sélection du radio bouton. Pour simplifier j'ai fait 2 listes de string mais je me demande si on peut faire avec des objets
Bonjour , votre tuto est vraiment sympathique et facile à comprendre bien que j'ai déjà fais pas mal de javascript mais étant un grand fainéant j'aimerai savoir comment faire pour avoir l'extension du . + NomClassName et avoir la div qui apparait automatiquement s'il vous plait ! :]
Bonjour. Je ne sais pas si le code sur github est à jour, mais j'ai repris celui-ci pour comparer et en mobile, tout est cassé, les grilles ne se mettent pas les unes au dessus des autres...
Encore une fois merci pour ce tuto ! :) J'ai un petit souci concernant les images, elles ne veulent pas s'afficher, je ne comprends d'où peu venir l'erreur, aucunes fautes de syntaxe, les liens sont écrit correctement… Est-ce que c'est un problème qui arrive souvent ?
Bill Gates
Et j'ai bien un fichier nommé media dans src... Merci encore !
Salut, j'ai un petit problème dans la deuxième partis quand on commence la partis home, pour ma part elle ce positionne en dessous de la navigation et non a coté, j'ai beau chercher mon problème je n'arrive pas à mettre la main dessus. Aurais tu une idée d'où il pourrais provenir ? :) Merci
Bonjour Monsieur quand vous dites ca vous faites allusions a quoi exactement svp :Attention ! Ce projet comporte des morceaux de code qui sont maintenant dépréciés (tout va très vite en React), je souhaiterais du coup reprendre le peojet tout entier en faite et merci beaucoup pour le partage les expliacations sont claires et precis
bonjour. est-ce que ton code serait dispo sur github? je suis non voyant et ça maiderait fortement decouter ta video en pouvant lire le code. merci.
3 роки тому
Bonjour Christophe, malheureusement non c'est ma seule vidéo dont j'ai égaré le code source :( Mais heureusement pour toi cette vidéo est un peu vieille et j'en ai une nouvelle plus adaptée : ua-cam.com/video/K3D2rjAUQ3o/v-deo.html . Bon courage
Bonjour et merci pour ce super tuto. J'aurais juste une question (pour l'instant), à la minute 41 en tapant un "." tu crées une div avec un classname en propriétés. Quel est le nom de ce snippet magique ?
Hello Aurel, je passais par là et je suis tombé sur ta question ... Tu as peut-être déjà trouvé la réponse à ta question mais sinon => pour faire ce que tu souhaites il faut que tu regardes pour ajouter React dans les langages supportés par EMMET déjà présent dans VS Code Sauf erreur, tu peux faire ça dans les settings ou directement dans le .json des settings. Happy Hacking !
Bonjour j'ai trouvé le tuto super intéressant j'espère qu'il y en aura d'autre par exemple un site e-commerce , car je suis en formation mais dois faire beaucoup de autodidacte donc vos tuto sont les bien venue, j'ai juste deux questions , l'une est pour le téléchargement du pdf pour que l'utilisateur puisse récupérer le pdf et l'autre c'est point vue css dans la partie compétences je n'arrive pas a les mettre sur deux colonnes , merci encore pour le tuto bonne année 2022
Hello! J'aurais plusieurs questions! Quel est le thème que tu utilises sur ton VSCode? Et aussi je crois qu'il manque pas mal d'images et tous les icons dans le fichier à DL dans ta description ^^'
4 роки тому+2
Hello, merci d'avoir signalé je ne sais pas comment ca se fait. J'ai corrigé
Excellent tuto ! Projets très intéressant !! Juste une petite question: - Est-ce qu'il serait possible de mettre une date de début concernant l'expérience des Langages dans le State statique ? Car sinon ça voudrait dire qu'il faudrait mettre à jour régulièrement le temps d'expérience du/des langages... Merci d'avance !
Bonjour, Merci pour ce super tuto. Petite question : comment faire si on veut que le CV soit traduit en plusieurs langues ? (est-ce possible de faire une config qui traduise directement le contenu ou faut-il recoder les CV dans d'autrs langues ?)
Pourriez vous refaire un nouveau projet cv react , ça m aiderait beaucoup. J aimerais aussi que vous puissiez faire un projet complet avec back end utilisant Mysql . Je suis en train de l étudier en ce moment et ce n est pas facile
Bonjour, pardonnew mon imcopetence mais vous dites que la maj du cours est une autre video qui fait des dearpeau, auriez vous s'il vous palit la gentillesse d'expliquer quelle est la difference? je suis pret a payer le prix s'il le faut, mais je vous en supplie donner moi la maj de ce cv pour la sante mental de tous!
Рік тому+1
Haha à la base cette vidéo était un prétexte pour apprendre React, du coup si tu veux apprendre React j'ai mis un lien en dessous. Par contre pour faire ce CV j'ai pas vraiment de solution
@ JE VOUS REMERCIE BEAUCOUP POUR VOTRE RÉPONSE ! Donc pas de Maj pour l'application, mais s'il vous plaît quelque mot pour expliquer pourquoi elle n'es plus à jour ? merci d'avance
Salut, bon.. 😋 Comme d'hab super tuto ! Y a t-il une règle à suivre pour l'utilisation des rem et des %? Par exemple, je vois que tu utilise souvent les rem pour les propriétés de margin et les '%' pour les propriétés de dimensions. Est ce que si je fais l'inverse par exemple, cela va avoir une incidence sur les médias-queries ? Merci
3 роки тому+2
Hello, non pas d'importance capitale, en réalité les REM sont bien pour les Font, pour le reste je mets du Pixel maintenant ;)
Bonjour ! Super vidéo ! Explication claire et limpides ! J'ai quand meme un petit soucis je n'arrive pas a avoir la page Compétences a coté de ma navigation ... la page d’accueil pas de problème mais la compétences ne veut rien savoir elle reste en dessous .. une idée de ce que j'aurais pu mal faire ? Cordialement et encore bravo pour la vidéo !
Hello, Super ce format de tuto, long mais c'est ça qui est bien tu montres tout ! :) Petite question, pourquoi est-il important de mettre un " _ " devant les fichiers settings ? Est-ce juste une question de "norme" ? Merci et continues tes vidéos ! :)
4 роки тому+1
Merci pour ton commentaire. Oui c'est une convention, je ne connais pas l'explication précise et je ne suis pas sur qu'il y en ait une ^^
Les fichiers SASS avec underscore en préfixe ne sont pas complié en CSS (lors de compilation sur des projets classiques). Ils sont donc réservé à du SASS pur.
J'ai suivi ce tuto avec plaisir. Je rencontre quand même un souci, dès la création des routes: Le texte écrit sur chaque page ne s'affiche pas. Autre souci juste après, la page retourne une erreur: ./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'. Si quelqu'un a une solution, je suis preneur. Je débute en React...
Super exercice.Merci.Je viens de le terminer mais je me retrouve avec la page notfound en page d'accueil,as tu une idée d'où cela peut venir sachant qu'en localhost c'est nickel, c'est en déployant le site sur gh-pages que ca me fait cette erreur.Bien évidemment google is my friend et stackoverflow aussi ,mais là après 2 jours de test,je ne vois pas d'où cela peut venir. Voici le browser router
4 роки тому
Salut Doums, merci pour ton retour. Concernant ton problème avec le NotFound récurrent j'avoue que je ne vois pas trop car ton Router semble tenir la route. Essaye de comparer avec le code source que j'ai mis sur Github : github.com/JustFS/react-cv/tree/master/src Juste pour info j'ai mis "BrowserRouter as Router" dans la correction, c'est juste un alias ça n'explique pas pourquoi ton code ne marche pas. En espérant que ça puisse t'aider, n'hésites pas à dire si tu trouves la réponse ça pourrait aider d'autres personnes à l'avenir.
@ Merci pour le code source.Finalement j'ai trouvé une soluce après mouuuuulte recherche.Voici le nouveau router Le lien de la source est là github.com/facebook/create-react-app/issues/1765 c'est la réponse de "willdurand" que j'ai testé et une autre ici medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819.J'avais vu un autre truc à mettre dans le package.json dans la partie scripts ,à voir si cela marche maintenant sans mais bon j'ai laissé les 2 :"build": "react-scripts build && cp build/index.html build/404.html".Voilà😉.Un bourbier cette affaire.Pour ceux qui n'arrivent pas à récupérer les images du portfolio via le dossier media, j'ai trouvé une petite astuce aussi.
4 роки тому
@@mamadousylla5012 doums Merci pour ton retour, j'avoue que je n'ai jamais rencontré ce type de bug donc c'est compliqué pour moi d'en parler. Par contre c'est quoi le souci avec les images ?
@ De rien, concernant les images, elles ne s'affichaient pas,je n'avais que "profil-pic" pour l'image de profil et pour les images de chaque projet, rien du tout, juste un encadré transparent.J'ai du utilisé require comme ceci par exemple dans ton fichier portfolioData.js "picture: require('../media/project1.jpeg')" et pareil pour l'mage de profil.Bizarre mais bon cava il y a tjrs des solutions.Même en utilisant heroku, je n'avais pas d'image au déploiement.
Bravo et merci pour ce projet React très bien expliqué et intéressant. J'ai une question : A 1:54:00 le composant Languages.js est une class. Pourquoi ne pas utiliser un composant fonctionnel et gérer l'état avec des Hooks (useState par ex) ? Merci et bonne continuation !
4 роки тому
Salut, on pouvait effectivement faire un stateless component et utiliser les hooks, j'en ai pas parlé dans la vidéo car c'est avant tout une vidéo d’introduction à React. Je pense que c'est important de bien comprendre le principe du state pour ensuite comprendre les hooks
@ Concernant la petite erreur à la fin au moment du build, je viens de l'héberger sur Netlify via Github et c'est passé sans problème (sans faire la correction de la vidéo). Pourtant Netlify effectue aussi un build. Il y aurait du y avoir la même erreur... Bon tant mieux, mais je ne vois pas pourquoi ! Sinon, au top ces vidéos ! C'est fou tout ce qu l'on peut faire uniquement avec du CSS.
npm install node-sass@4.14.1 (Pour installer node-sass, sinon vous risquez cette erreur : Error: Node Sass version 5.0.0 is incompatible with ^4.0.0), si vous l'avez déjà : prenez soin de faire : npm uninstall node-sass :)
4 роки тому
Merci pour la MAJ, je sais pas pourquoi le version 5 déconne. En attendant je confirme qu'il faut faire 'npm install node-sass@4.14.1'
le projet react le plus pédagogique que j'ai vu sur youtube !!! merci !
Ca y est fini ! 3 jours et demi à mettre pause, à reproduire, à corriger et à étudier le truc. Merci beaucoup pour le tuto, le site est beau est très utile, je vais m'en servir pour mon CV en ligne à coup sûr.
J'ai mis un peu de temps car je me suis servi de ce projet pour tenter Typescript au passage; Ca demande quelques manipulations pour les props notamment.
Tes projets sont cools, tu expliques bien, mais surtout ton niveau en CSS est vraiment bon. J'ai appris limite plus en CSS qu'en react avec ce tuto, c'était inattendu et agréable. Je vais enchainer sur tes vidéos de CSS ensuite pour y gagner un peu plus.
Merci encore !
C'est marrant parce que un an plus tard je trouve le CSS pas top (j'utilise le code pour mon propre CV mais je galère à bien le maintenir), comme quoi en un an prongresse beaucoup ^^
@ Je viens du back (PHP/Symfony) et je cherchais quelques tutos pour voir un peu le front, comprendre React et me faire à la prog fonctionnelle de JS; Mais j'avais pas pensé prendre une telle tarte sur le CSS ! Pour moi, le go-to du CSS c'est Bootstrap, donc voir un vrai design, avec une vraie logique, et une utilisation de SASS, j'avais pas prévu et c'était cool :) Par contre on se rend aussi compte que CSS n'est pas un sous-langage, que l'on voit la différence chez quelqu'un qui en fait quotidiennement, et donc que c'est compliqué d'être fort dans tous les domaines. J'adorerai faire le back d'une appli sans avoir à m'occuper de toutes ces choses en front que quelqu'un ferait beaucoup mieux que moi !
J'irais voir tes prochaines vidéos alors pour pomper ton skill en CSS !
Je suis en formation React chez OpenClassrooms. Je bois toutes tes vidéos, ce sont vraiment des pépites !
Salut, tu peux donner un retour sur ta formation OC sur le sujet ?
@@Antoine-gx4yl Les projets sont assez formateurs. On voit de réels cas, c'est concret, même s'ils sont de petite envergure en comparaison de ce qui sera demandé en entreprise. En revanche, la réussite dépend énormément de l'implication du mentor lors des sessions hebdomadaires. Car réussir seul quand on n'a jamais codé (ce qui était mon cas), c'est extrêmement dur. Les cours ne suffisent pas à maîtriser une notion, il faut donc piocher ailleurs (comme ici, entre autres). Disons que c'est une bonne base pour devenir dev, si on travaille beaucoup à côté !
Merci pour le tuto, j'ai appris pas mal sur React. Ca me donne envie d'approfondir mon apprentissage autour de ce framework ! Bonne continuation !
Deux après-midi de passés sur ce tuto qui m'a appris plein de choses. Merci à toi!!!
Super !! exercice vraiment sympa avec pas mal de notions et de rappel sur les bases ! Explication au top, très bonne élocution et vraiment dynamique ! Je m'abonne
Trop bien pour apprendre react de façon utile. J'ai pu y mettre ma petite touche en CSS, faire quelque modif suite au changement de contenu, mais dans l'ensemble le projet est parfait !!! Je conseil a toutes les personnes en formation qui veulent apprendre autrement qu'avec des cours théorique de faire un petit tour sur cette vidéo.
Un grand merci From scratch Je n'hésiterais pas a te mentionner sur ce projet (il faut rendre a César ce qui est à César :) ).
Merci t'es le meilleur, j'adore tes vidéos avec un ton à la cool et on apprend plein de truc ! Méga intéressant change pas !!
excessivement propre, tres bon pedagogue, j'arrive à la toute fin de ma formation (o'Clock) et je sens que tes videos vont me servir à gagner en confiance, merci ! keep going
@Leo G la même ! One year later !
@@anaisrevellat5692 have fun! superbe formation 😃
Alors tu en est ou aujourdui ? O clock a payé ?
@@Antoine-gx4yl Wow improbable d'avoir se retour de 2ans en arriere ^^'
Apres la formation d'Oclock j'ai passé 6mois à me continuer à me former et à postuler à droite à gauche, au bout de ces 6 mois j'ai trouvé une startup qui m'a employé en tant que developpeur fullstack React/Node, j'y suis resté 1 an et demi et à partir de septembre je monte ma société pour faire des prestations freelance, je cherche donc mes premiers clients :) merci à O'Clock et à ton message !
Salut
Jai fait tout le tuto avec toi et j'ai obtenu la même chose que toi et ceci est la preuve que ton tuto est très bon crois moi .
félicitation pour ton travail. Je vais l'utiliser pour mon propre portfolio si ca te dérange pas biensûr avec quelque modifications dans les couleurs
Avec les hooks et les composants fonctionnels, je me suis permis d'adapter le code de ton tuto qui est vraiment génial.
Belle pédagogie.
Sérieux sans se prendre au sérieux.
Bravo et merci !
Super tuto et bon pédagogue !!! Merci, cela m'a éclairci des zones d'ombre causées par d'autres tutos.
Bravo, ton tuto est intéressant et surtout très clair. Je n'ai pas vu le temps passé c'était super instructif !
Merci
Hello FromScratch, je decouvre ta chaine UA-cam et je revise du React grâce à toi en refaisant mon CV au format React - tres bonne idee pour reviser car ca fait un bail que j'ai pas codé et j'espère bientot guérir pour proposer mon cv à jour à mes prochains clients...bref ce comm pour dire un grand merci j'en suis à 38 min tu prends ta pause bien méritée :)...Moi je code allongé car impossible de rester assis - jespere bientot guérir et reprendre un boulot ca me manque - Big up à ta chaine que je vais suivre de prêt
Excellent tutoriel ! Clair, drôle, efficace, enrichissant ; continue comme ça ! Je m'abonne ;-)
@Campinorth Crois-tu que j’aurais osé m’abonner sans liker ? 😎😊
C'est un super projet, je viens de terminer le cours d'openclassrooms sur React, et je recherchais une mise en application. C'est l'exemple parfait :) Merci à toi . Je m'y attèle :)
à 2:35:20 de la vidéo, je crois que le problème vient du display grid du parent. Celui ci peut dérégler la largeur et hauteur de ses enfants. Le problème semble résolu si on passe languageDisplay et frameworkDisplay en display flex . avec une flex-direction:column et un justify-content: space-evenly
Un grand merci, ta pédagogie est nickel 👍
Je m'abonne! Ca m'a fait une petite révision des petits tricks du style et ça m'a énormément aider à une meilleure compréhension de REACT où je débute. Merci pour ta vidéo!
C'est déjà le troisième tuto en react que je fais de ta chaîne. ils sont super agréables ! Merci !
Merci beaucoup! on apprend pleins de trucs sympas en très peu de temps, super bien expliqué, bref génial :)
Merci beaucoup pour ce projet, franchement très très intéressant, et surtout vraiment très bien expliqué.
Super tuto. Ça ma beaucoup plus cette version longue de A a Z. Tres agreable a écouter. Au top
Excellent tuto, ce n'est pas le premier que je regarde, continue comme ca ! J'apprend beaucoup grâce à tes tutos !
j'ai constaté qu'il y avait une petite erreur au niveau du fichier 'home.scss' , il y a deux fois 'min-height' (jai enlever celui avec les 500px)
.homeContent {
background: linear-gradient(115deg, $color-1 50%, transparent 100%);
min-height: $minHeight;
width: 100%;
min-height: 500px;
border-radius: $borderRadius;
position: relative;
overflow: hidden;
}
Merci encore !
Énorme !!!!! un très grand merci !!!!
Très bon tutoriel! Merci. Une seule chose: avec React 6, Switch est remplacé par Routers. À part ça, tout fonctionne.
Ok grand merci 🙏🙏🙏 j'étais bloqué à ce niveau
Mais j'ai toujours cette erreur qui s'affiche. Pouvez vous m'aider svp??
👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
@@legrandmpesse180 c'est quoi ton erreur ?
@@Antoine-gx4yl ça va déjà. J'avais déjà trouvé le problème. Je devais remplacer Switch par Routes.
J'ai bien regardé d'autre chaine mais vous vous ah vous, vous êtes le meilleur
excellent comme dab ,par contre je ne trouve pas le lien pour les fichiers css sous la video on dirait qu'il ont disparu merci
Merci pour ce tuto très sympa a suivre le résultat est vraiment très cool !
Bonjour Mr,
Je vous remercie pour vos efforts, Personnellement j'ai adoré le contenu de votre chaine UA-cam.
Merci bien
Merci pour le tuto, c'est propre!
merci bcp pour toutes ces explications je refait tt avec toi
Super tuto, très clair malgré l'heure, bravo ! Et content de savoir que tu manges pas de dauphin!
Merci beaucoup 😋
Bonjour Mister,
J'espère que tuy vas bien, sauf erreur de ma part, le dossier React-basic-files n'est pas disponible !
Pourrais-tu me nous le mettre à disposition s'il te plaît? Merci
Merci beaucoup, vraiment un super tuto, je m'abonne !
Salut! ^^ c'est re- moi ^^ , j'ai trouvé ça très technique la barre de progression. Je connaissais déjà assez bien les animations en css et le js ( méthode map etc ... ) mais la création de chaque barres via les pseudos éléments after avec une width de base à 0 n'est pas un truc qui me serait venu à l'esprit pour faire la même chose.... cool en tout cas !! 👍👍👍
Bonjour, je viens de faire le tuto nickel sauf que je n'ai pas le SCSS du portfolio 😒 ou le github.
Merci pour cette réalisation et ces explications. 👍
2:04:13 J'ai un soucis ici. React me retourne l'erreur suivante : "TypeError: props.languages is undefined". J'ai passé plusieurs heures à essayer de régler le problème, cherché absolument partout sur internet, resuivis la vidéo et tout retapé mais rien. Pourtant je suis persuadé que l'erreur est ridicule.
Vraiment très bien, merci pour ce partage
Petite précision à 33:00 qui m’a value plus d’une heure de prise de tête, avec la nouvelle version de react-router-dom ce n’est plus component mais element ! ( ça me fait réaliser que les tutos d’il y’a 2 ans sont donc peut être plus valables 😅)
Effectivement beaucoup de choses sont dépréciées, je le laisse car c'est mon premier tuto React et il a une place particulière ^^
@ Mince 😅 ça serait possible d’avoir une nouvelle vidéo ( ou as-tu fait ?) pour faire des sites simples comme ça en React je suis débutant là dedans mais du coup je ne sais pas trop comment suivre les choses « appréciées » en 2022 et savoir les choses qui ne s’utilisent plus. Car si j’ai bien compris, React ça va très vite il y a des nouveautés tout le temps !
Evidemment, il faut commencer par le début : ua-cam.com/video/f0X1Tl8aHtA/v-deo.html
Tutoriel très clair ! Merci beaucoup ! :)
t'as gagné un nouveau abonné !!!!
c vraiment géniale et nickel j'ai adoré la video
Très très bon tuto sur react, merci! est ce que je peux avoir les fichiers a importer pour le projet " react-cv-basic-file"???
J'ai decouvert ta chaine sur celle de Benjamin Code.
Merci infiniment, je vais creer mon propre portfolio a ma sauce mais en me basant sur ta technique, j'ai 1 an d'experience avec React.
Continue ce que tu fais, t'as lair bon!
J'ai pas encore tout vu mais j'espere que tu utilise Hooks et non les classes :)
Merci pour ton message, dommage mais j'utilise des classes components pour expliquer le principe du State, je le dis dans la vidéo que c'est parce que j'estime que pour débuter c'est bien à connaitre. Mais pas d'inquiétude je vais sortir un crud en React avec que des hooks (useState, useEffect et useContext) dans quelques jours ;)
@ Je peux peut-etre remplacer ta partie avec les classes par des hooks ou je suis obliger de passer par les classes dans ce projet? Par example je peux utiliser useState a la place des classes et de this?
Tu peux totalement tout transformer en Fonctional Component, mais bon si t'as un 1 an de React derrière toi je ne suis pas sur que tu apprennes grand chose dans cette vidéo ^^
@ No no j'ai 1 an autodidacte, j'apprends toujours, je ne connaissais pas les router ! haha
Wow super tuto (ça a marché au poil de mon coté), super boulot ! Continue !
Merci à toi 😊
🍀 Si tu veux devenir Développeur Front-end, c’est ici => fromscratch.podia.com/
Node-sass est dit deprecated tu peux juste installer SASS normalement
est ce different sur mac pour installer tt ça?
Pour ceux qui suivent le tuto en 2021, node-sass est totalement déprécié et il faut donc faire un 'npm install sass' !
Nickel ! J'ai un peu mal au crâne, j'ai tout codé de A à Z (tuto de 3h56 ! donc le double pour moi). Il me reste quelques soucis mais ça vient probablement d'erreurs en nommant mes classes.... Je m'abonne avec plaisir 👍
Bravo quel courage !
Excellent ! Merci mille fois.
Super vidéo. En plus avec un petit projet qui peut s'avérer utile. :)
Super tuto, très fun et très complet. Un petit pouce de ma part et je m'abonne. Merci 🤜 🤛
à 2:23:55 tu utileses quel navigateur pour afficher les grids?merci
Merci pour ce cours très constructive😊
Super vidéo ! Je regarde souvent tes tutoriels, et je m'aperçois que tu utilises beaucoup les animations/transform/3D.
Pourquoi ne ferais tu pas une vidéo tutoriel concernant ces genres d'animations ?
Ce sont des outils très puissants en CSS, et à vrai dire, très peu de tutos les concernant ! Et c'est parfois assez complexe à comprendre je trouve ! A bientôt
Merci pour ton commentaire Jeff, je vais réfléchir à faire une vidéo sur le CSS poussé ^^
wah première fois que je vois une vidéo avec 0 dislike mdrr
26:09 les h1 etc que je met comme toi n'apparaissent pas sur la page sachant que j'ai refresh :(
Je ne sais pas si tu as toujours besoin de l'info mais cela proviens du fait que n'est plus utilisé tu dois le remplacer par
Super tutoriel. Un excellent travail ça m'a aidé beaucoup pour débuter en React. Je m'en suis servi avec la présentation de Nodejs. Au lieu d'utiliser une BD hardcodée j'ai utilisé mon api. Pour les langages par contre j'avais un json [{name: AAA, icon: fa}, { ....}] Et j'ai pas réussi a utiliser includes a cause que les éléments du tableau sont des objects et non du texte qu'on peut comparer avec la sélection du radio bouton. Pour simplifier j'ai fait 2 listes de string mais je me demande si on peut faire avec des objets
Bon projet, bien expliqué. Merci.
Jean scratch MDRRRRR ! Un tueur
Bonjour , votre tuto est vraiment sympathique et facile à comprendre bien que j'ai déjà fais pas mal de javascript mais étant un grand fainéant j'aimerai savoir comment faire pour avoir l'extension du . + NomClassName et avoir la div qui apparait automatiquement s'il vous plait ! :]
Bonjour. Je ne sais pas si le code sur github est à jour, mais j'ai repris celui-ci pour comparer et en mobile, tout est cassé, les grilles ne se mettent pas les unes au dessus des autres...
Encore une fois merci pour ce tuto ! :)
J'ai un petit souci concernant les images, elles ne veulent pas s'afficher, je ne comprends d'où peu venir l'erreur, aucunes fautes de syntaxe, les liens sont écrit correctement… Est-ce que c'est un problème qui arrive souvent ?
Bill Gates
Et j'ai bien un fichier nommé media dans src...
Merci encore !
Salut, j'ai un petit problème dans la deuxième partis quand on commence la partis home, pour ma part elle ce positionne en dessous de la navigation et non a coté, j'ai beau chercher mon problème je n'arrive pas à mettre la main dessus. Aurais tu une idée d'où il pourrais provenir ? :) Merci
2:17:30 Tu nous parles de ton confinement, et moi du second ahah
super video merci beaucoup
Yo, j'ai une question, ma sidebar a des gros saut de ligne entre chaque Routes, quelqu'un sait comment les enlever ?
Bonjour Monsieur quand vous dites ca vous faites allusions a quoi exactement svp :Attention ! Ce projet comporte des morceaux de code qui sont maintenant dépréciés (tout va très vite en React), je souhaiterais du coup reprendre le peojet tout entier en faite et merci beaucoup pour le partage les expliacations sont claires et precis
Merci pour tes tutos !!! Top !!
Salut, peux t-on héberger un projet comme celui-ci sur netlify? c'est bien serverless? merci
Waouh c'est super un grand merci vraiment. Sinon la page Portfolio (le popup) je ne pense pas qu'elle est responsive.
Merci. Je crois que tu as raison pour la fenetre popup ! Niveau style le projet est très perfectible de toute façon ^^
@ Effectivement, une application n'est jamais finie. En tout cas vous avez gagnez un abonné. Vous m'avez séduit. Merci
Hello ! Super tuto ! Question : pourquoi ne pas avoir utilisé que les flexbox au lieu de grid ?
bonjour. est-ce que ton code serait dispo sur github? je suis non voyant et ça maiderait fortement decouter ta video en pouvant lire le code. merci.
Bonjour Christophe, malheureusement non c'est ma seule vidéo dont j'ai égaré le code source :( Mais heureusement pour toi cette vidéo est un peu vieille et j'en ai une nouvelle plus adaptée : ua-cam.com/video/K3D2rjAUQ3o/v-deo.html . Bon courage
J'ai un petit soucis, quand je suis sur un fichier js du type : Home.js ! bah il m'est impossible de chargé une image ou un fichier pdf depuis media !
Merci pour les explications
Bonjour et merci pour ce super tuto.
J'aurais juste une question (pour l'instant), à la minute 41 en tapant un "." tu crées une div avec un classname en propriétés.
Quel est le nom de ce snippet magique ?
Hello Aurel, je passais par là et je suis tombé sur ta question ... Tu as peut-être déjà trouvé la réponse à ta question mais sinon => pour faire ce que tu souhaites il faut que tu regardes pour ajouter React dans les langages supportés par EMMET déjà présent dans VS Code Sauf erreur, tu peux faire ça dans les settings ou directement dans le .json des settings. Happy Hacking !
Bonjour j'ai trouvé le tuto super intéressant j'espère qu'il y en aura d'autre par exemple un site e-commerce , car je suis en formation mais dois faire beaucoup de autodidacte donc vos tuto sont les bien venue, j'ai juste deux questions , l'une est pour le téléchargement du pdf pour que l'utilisateur puisse récupérer le pdf et l'autre c'est point vue css dans la partie compétences je n'arrive pas a les mettre sur deux colonnes , merci encore pour le tuto bonne année 2022
Hello! J'aurais plusieurs questions! Quel est le thème que tu utilises sur ton VSCode? Et aussi je crois qu'il manque pas mal d'images et tous les icons dans le fichier à DL dans ta description ^^'
Hello, merci d'avoir signalé je ne sais pas comment ca se fait. J'ai corrigé
Excellent tuto ! Projets très intéressant !! Juste une petite question:
- Est-ce qu'il serait possible de mettre une date de début concernant l'expérience des Langages dans le State statique ? Car sinon ça voudrait dire qu'il faudrait mettre à jour régulièrement le temps d'expérience du/des langages...
Merci d'avance !
C'est possible et c'est une bonne idée ;)
@ Super! Et du coup comment pourrait-on faire ? Comment t'y prendrais-tu?
Merci 🙂👍
a 1h 34 j ai suivi la mm chose mais la navigation me prend toute la page .????
Dans Project.js il me dit qu'il y a une erreur sur la variable let une idée? "src/component/Portfolio/Portfolio.js:8" son message d'erreur
Bonjour,
Merci pour ce super tuto.
Petite question : comment faire si on veut que le CV soit traduit en plusieurs langues ? (est-ce possible de faire une config qui traduise directement le contenu ou faut-il recoder les CV dans d'autrs langues ?)
Très intelligent ❤
avez vous mis le cours cv react sur votre github car je ne le vois pas , et j ai eu une diificulte. merci
Non ce projet n'y est plus, le code est trop ancien. Voici du React de 2022 ua-cam.com/video/f0X1Tl8aHtA/v-deo.html
Pourriez vous refaire un nouveau projet cv react , ça m aiderait beaucoup.
J aimerais aussi que vous puissiez faire un projet complet avec back end utilisant Mysql . Je suis en train de l étudier en ce moment et ce n est pas facile
@Bonjour, Merci pour le tuto, c'est propre! pouvez-vous m'envoyer le cours cv react de ce projet , SVP
Excellent tuto !!!
Bonjour, pardonnew mon imcopetence mais vous dites que la maj du cours est une autre video qui fait des dearpeau, auriez vous s'il vous palit la gentillesse d'expliquer quelle est la difference? je suis pret a payer le prix s'il le faut, mais je vous en supplie donner moi la maj de ce cv pour la sante mental de tous!
Haha à la base cette vidéo était un prétexte pour apprendre React, du coup si tu veux apprendre React j'ai mis un lien en dessous. Par contre pour faire ce CV j'ai pas vraiment de solution
@ JE VOUS REMERCIE BEAUCOUP POUR VOTRE RÉPONSE ! Donc pas de Maj pour l'application, mais s'il vous plaît quelque mot pour expliquer pourquoi elle n'es plus à jour ? merci d'avance
est ce que switch est remplace par route?
Salut, bon.. 😋 Comme d'hab super tuto !
Y a t-il une règle à suivre pour l'utilisation des rem et des %?
Par exemple, je vois que tu utilise souvent les rem pour les propriétés de margin et les '%' pour les propriétés de dimensions.
Est ce que si je fais l'inverse par exemple, cela va avoir une incidence sur les médias-queries ? Merci
Hello, non pas d'importance capitale, en réalité les REM sont bien pour les Font, pour le reste je mets du Pixel maintenant ;)
sur mon localhoost mon site est inaccessible pourquoi ?
c'est bon faut activer dans le terminal. :)
c'est quoi tu utilise pour avoir des belle couleur sur ton code. je trouve ca plus lisible merci de m'informer :)
C'est le plugin One Dark Pro
Pourquoi utiliser "exact" dans les router alors que Switch s'arrete quand il a trouver son path, donc pas besoin de "exact" ici non?
Il le faut pour le chemin "/" car sinon il s'arretrait toujours au premier cas, car pour lui "/" correpond à toutes mes pages (meme "/portflolio")
@ Okay donc j'en ai pas besoin pour les autres routes? Juste le "/" ?
Bonjour !
Super vidéo ! Explication claire et limpides !
J'ai quand meme un petit soucis je n'arrive pas a avoir la page Compétences a coté de ma navigation ... la page d’accueil pas de problème mais la compétences ne veut rien savoir elle reste en dessous .. une idée de ce que j'aurais pu mal faire ?
Cordialement et encore bravo pour la vidéo !
Hey, j'ai exactement le même soucis je voulais savoir si tu avais réussis à trouver une solution par rapport à ca ? :) Merci d'avance
Et useState ? Ca existait pas en 2020 ?
Non je confirme 😅
Hello,
Super ce format de tuto, long mais c'est ça qui est bien tu montres tout ! :)
Petite question, pourquoi est-il important de mettre un " _ " devant les fichiers settings ? Est-ce juste une question de "norme" ?
Merci et continues tes vidéos ! :)
Merci pour ton commentaire. Oui c'est une convention, je ne connais pas l'explication précise et je ne suis pas sur qu'il y en ait une ^^
Les fichiers SASS avec underscore en préfixe ne sont pas complié en CSS (lors de compilation sur des projets classiques). Ils sont donc réservé à du SASS pur.
@@hadrienv5410 J'ai enfin ma réponse, merci ! :)
@@MrTutOxX y a pas de quoi 😊
vous pouvez faire un projet avec material ?
tout ce qui est disponible parle en anglais
J'ai adoré ton tuto, seul problème : mon build plante à la fin
Ou je peux trouver les dossiers installation.png et plugin.png et plugin svp
Dans le code source du projet, en description
J'ai suivi ce tuto avec plaisir. Je rencontre quand même un souci, dès la création des routes: Le texte écrit sur chaque page ne s'affiche pas. Autre souci juste après, la page retourne une erreur: ./src/App.js
Attempted import error: 'Switch' is not exported from 'react-router-dom'. Si quelqu'un a une solution, je suis preneur. Je débute en React...
Super exercice.Merci.Je viens de le terminer mais je me retrouve avec la page notfound en page d'accueil,as tu une idée d'où cela peut venir sachant qu'en localhost c'est nickel, c'est en déployant le site sur gh-pages que ca me fait cette erreur.Bien évidemment google is my friend et stackoverflow aussi ,mais là après 2 jours de test,je ne vois pas d'où cela peut venir. Voici le browser router
Salut Doums, merci pour ton retour. Concernant ton problème avec le NotFound récurrent j'avoue que je ne vois pas trop car ton Router semble tenir la route. Essaye de comparer avec le code source que j'ai mis sur Github : github.com/JustFS/react-cv/tree/master/src
Juste pour info j'ai mis "BrowserRouter as Router" dans la correction, c'est juste un alias ça n'explique pas pourquoi ton code ne marche pas.
En espérant que ça puisse t'aider, n'hésites pas à dire si tu trouves la réponse ça pourrait aider d'autres personnes à l'avenir.
@ Merci pour le code source.Finalement j'ai trouvé une soluce après mouuuuulte recherche.Voici le nouveau router Le lien de la source est là github.com/facebook/create-react-app/issues/1765 c'est la réponse de "willdurand" que j'ai testé et une autre ici medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819.J'avais vu un autre truc à mettre dans le package.json dans la partie scripts ,à voir si cela marche maintenant sans mais bon j'ai laissé les 2 :"build": "react-scripts build && cp build/index.html build/404.html".Voilà😉.Un bourbier cette affaire.Pour ceux qui n'arrivent pas à récupérer les images du portfolio via le dossier media, j'ai trouvé une petite astuce aussi.
@@mamadousylla5012 doums Merci pour ton retour, j'avoue que je n'ai jamais rencontré ce type de bug donc c'est compliqué pour moi d'en parler. Par contre c'est quoi le souci avec les images ?
@ De rien, concernant les images, elles ne s'affichaient pas,je n'avais que "profil-pic" pour l'image de profil et pour les images de chaque projet, rien du tout, juste un encadré transparent.J'ai du utilisé require comme ceci par exemple dans ton fichier portfolioData.js "picture: require('../media/project1.jpeg')" et pareil pour l'mage de profil.Bizarre mais bon cava il y a tjrs des solutions.Même en utilisant heroku, je n'avais pas d'image au déploiement.
Bravo et merci pour ce projet React très bien expliqué et intéressant. J'ai une question : A 1:54:00 le composant Languages.js est une class. Pourquoi ne pas utiliser un composant fonctionnel et gérer l'état avec des Hooks (useState par ex) ? Merci et bonne continuation !
Salut, on pouvait effectivement faire un stateless component et utiliser les hooks, j'en ai pas parlé dans la vidéo car c'est avant tout une vidéo d’introduction à React. Je pense que c'est important de bien comprendre le principe du state pour ensuite comprendre les hooks
@ Concernant la petite erreur à la fin au moment du build, je viens de l'héberger sur Netlify via Github et c'est passé sans problème (sans faire la correction de la vidéo). Pourtant Netlify effectue aussi un build. Il y aurait du y avoir la même erreur... Bon tant mieux, mais je ne vois pas pourquoi !
Sinon, au top ces vidéos ! C'est fou tout ce qu l'on peut faire uniquement avec du CSS.
npm install node-sass@4.14.1 (Pour installer node-sass, sinon vous risquez cette erreur : Error: Node Sass version 5.0.0 is incompatible with ^4.0.0), si vous l'avez déjà : prenez soin de faire : npm uninstall node-sass :)
Merci pour la MAJ, je sais pas pourquoi le version 5 déconne. En attendant je confirme qu'il faut faire 'npm install node-sass@4.14.1'