Rechercher
Pour chronométrer la vidéo sur le certificat, attendez qu\'elle se ferme automatiquement. La prochaine vidéo du cours sera mise en ligne peu de temps après.
Nouveau cours
Du contenu de qualité sélectionné pour votre apprentissage.
Téléchargez votre certificat de fin de cours numérique après avoir visionné toutes les vidéos du cours.
De nombreux cours disponibles proposent des exercices pour aider à l\'apprentissage.
Ce cours est gratuit aujourd\'hui et le sera toujours, du début à la fin vous ne payez rien.
Professeur
Retrouvez un concentré du web autour du monde du développement web et du graphisme... Formez vous et améliorez vos compétences à travers près de 161 heures de formation vidéo...
0h06m
0h12m
0h13m
0h20m
0h14m
0h29m
0h27m
0h06m
0h32m
0h19m
0h13m
0h08m
0h14m
0h10m
0h17m
0h09m
0h25m
0h09m
0h04m
0h05m
Regardez la 1ère vidéo du cours
Veuillez vous connecter ou S'inscrire pour accéder au cours en ligne.
Ne vous inquiétez pas, c'est gratuit !
Nouveau cours
Nouveau cours
Nouveau cours
Nouveau cours
Nouveau cours
Nouveau cours
0h06m
Article ? https://grafikart.fr/tutoriels/introduction-1312
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Si on se fie à la définition offerte par la documentation React est "une bibliothèque JavaScript pour créer des interfaces utilisateurs". Cette définition est un peu générique et ne nous aide pas forcément à comprendre ce qu'est réellement React.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h12m
Article ? https://grafikart.fr/tutoriels/premier-pas-react-1313
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans ce premier chapitre je vous propose de faire vos premier pas avec React. Nous allons voir comment on peut commencer à l'utiliser et on va découvrir le fonctionnement de react et react-dom. On va voir ce qu'est le VirtualDom (`React.createElement`) et l'avantage de cette approche par rapport à un simple `innerHTML`.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h13m
Article ? https://grafikart.fr/tutoriels/syntaxe-jsx-react-1314
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Pour découvrir React nous avons utiliser la fonction `React.createElement` mais cela produit un code qui est assez verbeux et assez peu lisible. Pour simplifier la création d'éléments React il est possible d'utiliser une syntaxe spécifique : La syntaxe JSX.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h20m
Article ? https://grafikart.fr/tutoriels/composant-react-1315
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans ce chapitre nous allons créer notre premier composant React. Les composants permettent de créer des éléments réutilisables qui vont englober leur propre logique et leur propre état. Nous allons aussi découvrir les méthodes liées au cycle de vie d'un composant.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h14m
Article ? https://grafikart.fr/tutoriels/events-react-1316
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Pour le moment on a vu comment créer des éléments et les afficher. Dans ce chapitre nous allons voir comment gérer les interactions avec l'utilisateurs (clic sur un élément par exemple) et comment modifier l'état en fonction de ces interactions. Nous allons aussi découvrir les [SyntheticEvent](https://reactjs.org/docs/events.html).
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h29m
Article ? https://grafikart.fr/tutoriels/formulaires-react-1317
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Les champs, dans le DOM, sont capables de retenir leur propre état (un champs garde la valeur entrée par l'utilisateur dans sa propriété value). Il est cependant possible de demander à React de contrôler un champs en spécifiant la valeur et le comportement à adopter lors d'un changement.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h27m
Article ? https://grafikart.fr/tutoriels/tp-react-convertisseur-1318
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Je vous propose de mettre en pause notre apprentissage et d'essayer un petit TP pour mettre en pratique ce que l'on a vu jusqu'à maintenant. Dans un premier temps on créera un système dans lequel on entre une température (en celsius) et qui devra dire si l'eau bout ou non.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h06m
Article ? https://grafikart.fr/tutoriels/composition-react-composant-1319
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h32m
Article ? https://grafikart.fr/tutoriels/tp-react-liste-produit-1320
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans ce petit TP nous allons essayer de voir comment réfléchir et découper une interface en Composant. Lorsque l'on travaille avec React il est indispensable de réussir ce découpage car il est déterminant pour la conception de n'importe qu'elle interface.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h19m
Article ? https://grafikart.fr/tutoriels/react-pure-component-1321
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans ce chapitre nous allons voir l'impact que peut avoir un rendu et comment optimiser les composants qui contiennent une logique complexe. Lorsqu'un changement d'état est opéré sur un composant, sa fonction `render()` est appelée et l'ensemble des sous composant sont rendu à nouveau. Il est cependant possible de mémoriser le rendu d'un élément afin d'éviter les rendu consécutif si ses propriétés et son état n'a pas changé depuis le dernier rendu. Il existe 2 méthodes pour "mémoiser" un composant :
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h13m
Article ? https://grafikart.fr/tutoriels/react-ref-dom-1322
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Comme on l'a vu depuis le début de cette formation React offre une couche d'abstraction qui permet de ne plus se soucier du DOM. Cependant on a parfois besoin d’interagir avec le DOM et on a besoin d'une mécanique pour récupérer un élément dans le DOM. Le système de refs va permettre de récupérer un élément (DOM) dans notre composant.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h08m
Article ? https://grafikart.fr/tutoriels/react-dev-tool-1324
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans ce chapitre nous allons découvrir comment déboguer une application à l'aide de l'outil React Dev Tool. Cette extension est disponible sur [Firefox][https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) et [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) et vous permettra d'analyser l'état de vos composant ainsi que la structure de votre arbre d'éléments.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h14m
Article ? https://grafikart.fr/tutoriels/create-react-app-1325
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Jusqu'à maintenant nous avons travaillé avec React en utilisant les scripts depuis un CDN et en utilisant babel en mode standalone. Même si cette méthode est suffisante pour découvrir la librairie ce n'est pas la méthode que l'on utilisera dans un cas concret. On utilisera un bundler qui sera capable de gérer l'import de React depuis un gestionnaire de paquet et qui sera aussi capable de convertir la syntaxe JSX. La configuration d'un bundler n'est pas forcément une tâche aisée et React offre un template qui va vous permettre d'avoir un environnement de développement pour React clef en main : [Create React App](https://github.com/facebook/create-react-app)
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h10m
Article ? https://grafikart.fr/tutoriels/react-parcel-1326
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Parcel est un bundler que j'ai déjà présenté dans [une autre vidéo](https://www.grafikart.fr/tutoriels/parcel-bundler-985) qui offre comme avantage principal une configuration minimale. Nous allons découvrir dans cette vidéo comment il est possible d'utiliser Parcel pour commencer un projet React rapidement avec un minimum de configuration.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h17m
Article ? https://grafikart.fr/tutoriels/react-hook-useState-1327
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Dans les chapitres précédent on a vu qu'il était possible de définir un composant à partir d'une simple fonction.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h09m
Article ? https://grafikart.fr/tutoriels/react-hook-useeffect-1328
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Le hook useEffect est un hook qui va permettre de déclencher une fonction de manière asynchrone lorsque l'état du composant change. Cela peut permettre d'appliquer des effets de bords ou peut permettre de reproduire la logique que l'on mettait auparavant dans les méthodes `componentDidMount` et `componentWillUnmount`.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h25m
Article ? https://grafikart.fr/tutoriels/react-hook-personnalise-1329
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Avant de continuer notre exploration des hooks je vous propose de mettre en pratique les 2 hooks que nous avons vu précédemment à travers quelques petits exemples concret. Cela vous permettra de mieux comprendre l'intérêt que peut avoir cette nouvelle API.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h09m
Article ? https://grafikart.fr/tutoriels/react-hook-usememo-1330
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Un des problèmes que l'on rencontre avec les composants sous formes de fonctions est l'impossibilité de "sauvegarder" une mémoire car on n'a pas de notion d'instance au sein d'une fonction. Aussi, lors d'un changement d'état le code entier de votre fonction est relancé pour créer le nouveau rendu est cela peut être inefficace dans certaines situations. `useMemo` va permettre de créer une valeur qui va être mémoïsée.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h04m
Article ? https://grafikart.fr/tutoriels/react-hook-useref-1331
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
Nous avons déjà évoqué le principe des ref lorsque l'on a vu la méthode `React.createRef()`. `useRef` est l'équivalent sous forme de hook pour cette méthode là.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
0h05m
Article ? https://grafikart.fr/tutoriels/react-hook-uselayouteffect-1332
Abonnez-vous ? https://bit.ly/GrafikartSubscribe
`useLayoutEffect` est un hook qui a un comportement similaire à `useEffect` mais pour lequel la fonction de rappel est appelée de manière synchrone (avant l'affichage des modifications au niveau de l'utilisateur). Ce hook sera principalement utilisé pour faire des manipulation au niveau du DOM avant le rendu final.
Soutenez Grafikart:
Devenez premium ? https://grafikart.fr/premium
Donnez via Utip ? https://utip.io/grafikart
Retrouvez Grafikart sur:
Le site ? https://grafikart.fr
Twitter ? https://twitter.com/grafikart_fr
Discord ? https://grafikart.fr/tchat
Ce site et l'application ont été développés dans le but d'aider
les gens à trouver plus facilement des cours gratuits, car il y a beaucoup de contenu
bon et gratuit sur youtube mais beaucoup de gens ne le savent pas.
[email protected]
MEDEIROS TECNOLOGIA LTDA - CNPJ 24.471.978/0001-08
Accès dans d'autres langues :
Mode nuit
Commentaires de cours