Tous les cours > L'informatique > Programmation web

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

Aperçu du contenu du cours

React : Chapitre 1, Introduction

0h06m

React : Chapitre 2, Nos premiers pas avec React

0h12m

React : Chapitre 3, La syntaxe JSX

0h13m

React : Chapitre 4, Notre premier composant

0h20m

React : Chapitre 5, Les évènements

0h14m

React : Chapitre 6, Les formulaires

0h29m

React : Chapitre 7, TP : Convertisseur Celsius / Fahrenheit

0h27m

React : Chapitre 8, La composition

0h06m

React : Chapitre 9, TP : Liste de produit

0h32m

React : Chapitre 10, Composant pur

0h19m

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

Plus de cours en ligne gratuits de ce professeur

Base de données MySQL avec Grafikart.fr

3

(1)

2h12m
Programmation PHP complète avec Grafikart.fc

Nouveau cours

26h30m
Comprendre Git avec Grafikart.fr

Nouveau cours

3h32m
Apprendre Ruby avec Grafikart.fr

Nouveau cours

4h04m

Plus de cours gratuits sur Programmation web

dans la vidéo

HTML et CSS complet avec Pierre Giraud

Nouveau cours

11h30m
Javascript complet avec Pierre Giraud

Nouveau cours

13h42m
HTML et CSS avec FormationVidéo

Nouveau cours

12h23m
Programmation en PHP avec FormationVidéo

Nouveau cours

13h59m
Javascript complet avet FormationVidéo

Nouveau cours

6h32m
Programmation PHP complète avec Grafikart.fc

Nouveau cours

26h30m

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

+1000 cours gratuits +400 catégories +3,5 millions de téléchargements +900 exercices disponibles Cours en 4 langues différentes
L'informatique Programmation web Logique de programmation Base de données Langages de programmation Systèmes opérationnels Informatique de base Programmation d'applications mobiles Programmation de jeux Productivité bureautique Outils informatiques Serveurs Web et réseaux informatiques Test de logiciel Développement back-end
Professionnaliser Service client, secrétariat et accueil Construction Électronique Entretien smartphone Entretien de la voiture La Coupe de cheveux Mode, coupe et couture Climatisation et Réfrigération Agent immobilier Soudage Menuiserie Langues et communication Anglais Japonais Espagnol Italien Français
Gestion et affaires Comptabilité Direction financière Ressources humaines Gestion de projet Marketing digital Ventes Investissements Économie Entrepreneuriat Éducation de base Math Physique Histoire Philosophie
Musique Piano et clavier Autres Danse Des sports Santé La nutrition Premiers secours Psychologie Art et désign Graphisme Expérience utilisateur UX Modélisation 3D L'édition d'image Montage vidéo

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

Get it on Google Play Get it on App Store
DMCA.com Protection Status