Cours en ligne gratuitApprendre ReactJS avec Grafikart.fr

Nouveau cours

7h20m du cours vidéo en ligne

Du contenu de qualité sélectionné pour votre apprentissage.

Certificat

Téléchargez votre certificat de fin de cours numérique après avoir visionné toutes les vidéos du cours.

Exercices pour développer vos connaissances

De nombreux cours disponibles proposent des exercices pour aider à l\'apprentissage.

Accès gratuit à vie

Ce cours est gratuit aujourd\'hui et le sera toujours, du début à la fin vous ne payez rien.

Professeur

Grafikart.fr
3 Cours / 15 étudiants

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...

Commentaires de cours

Il ny a pas encore de commentaires pour ce cours.

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 !

Partager

Évaluer le cours

Aller aux certificats

Signaler un problème

Contenu du cours

0h06m

React : Chapitre 1, Introduction

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

React : Chapitre 2, Nos premiers pas avec React

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

React : Chapitre 3, La syntaxe JSX

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

React : Chapitre 4, Notre premier composant

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

React : Chapitre 5, Les évènements

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

React : Chapitre 6, Les formulaires

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

React : Chapitre 7, TP : Convertisseur Celsius / Fahrenheit

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

React : Chapitre 8, La composition

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

React : Chapitre 9, TP : Liste de produit

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

React : Chapitre 10, Composant pur

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

React : Chapitre 11, Les refs et le DOM

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

React : Chapitre 12, React Dev Tool

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

React : Chapitre 13, Create React App

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

React : Chapitre 14, React avec Parcel

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

React : Chapitre 15, Le hook useState

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

React : Chapitre 16, Le hook useEffect

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

React : Chapitre 17, Créer un hook personnalisé

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

React : Chapitre 18, Les hook useMemo

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

React : Chapitre 19, Le hook useRef

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

React : Chapitre 20, Le hook useLayoutEffect

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