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 de fin de cours

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.

Cours en ligne en français

Programmation web

Apprenez à créer des sites Web avec le cours gratuit de développement Web que nous avons séparé pour vous. De HTML, CSS à PHP et plus encore, sans tracas.

Professeur

Grafikart.fr
5 Cours / 195 é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

Forum de discussion

Il ny a pas encore de commentaires pour ce cours.

Regardez la 1ère vidéo du cours

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