React.js : les fondamentaux

Name: React.js : les fondamentaux
Author: Tony Davydets

Ce cours couvre les fondamentaux de React, une bibliothèque JavaScript pour la construction d'interfaces utilisateur. Il introduira les composants React, qui…

Preview the first lesson free — get full access to all 1 lessons.

Demander une démo Se connecter

Cours : à la demande

Bonjour, je m'appelle Tony et je suis entré. Ces leçons, nous allons y jeter un oeil. À quelle classe se trouvent les composants, leur structure et leur cycle de vie fonctions, accessoires, gestion et utilisation. Ainsi que la gestion et l'utilisation de l'État. Dans cette leçon, nous verrons ce qu'est un composant React, comment ils sont utilisés et comment ils peuvent nous être utiles par écrit une application rapide et efficace en douceur. Or, un composant est un morceau de. Code côté client très similaire à un standard Fonction JavaScript avec une différence distincte étant que un composant renverra toujours du HTML. C'est un must car c'est une pièce visuelle que notre utilisateur est je vais voir et interagir avec. Lors de la construction d'un composant, il est préférable de le structurer de manière à manière à ce qu'il soit autonome et n'ait aucun interdépendances avec tout autre élément de l'application. Cela signifie que nous pouvons l'utiliser de manière indépendante partout où nous voulons dans notre application sans créer d'involontaires conséquences qui proviennent de manière explicite ou implicite dépendances. Jetons un coup d'œil à ce à quoi ressemblent les composants React. Commençons notre application ici en exécutant un démarrage NPM commande et notre candidature. Va démarrer sur le port 3000. Pour cette partie. Je suis allé de l'avant et j'ai créé les composants avant il est temps d'économiser. Nous passons un peu de temps et ne nous contentons pas de me regarder taper. Alors insérons un composant de classe. Notre interface et voyez à quoi ça ressemble. Vous pouvez voir ce que c'est. Fondamentalement, un sélecteur de couleurs et quand nous changeons de couleur, nous pouvons le voir en temps réel tout est mis à jour. L'écran et l'utilisateur peuvent le voir dans le navigateur. Notre exemple de classe ressemble à ceci. Donc. Tous les composants de la classe React étendent le composant React qui est une entité créée et maintenue par le groupe React. En tant que tel, il est doté de certaines fonctions de cycle de vie à sa disposition. Nous reviendrons sur tout cela plus tard. Pour l'instant, nous examinons simplement ce qu'est un composant et familiarisation. Nous-mêmes avec sa nature. Maintenant, cette fonction que vous pouvez voir est la seule fonction qui est vraiment nécessaire car c'est ce qui va renvoyer le code HTML ou la représentation visuelle de. Notre composant qui est ce que l'utilisateur. Va voir et interagir avec. Comme nous l'avons mentionné plus tôt. Voyons maintenant quoi. Un composant fonctionnel ressemble. Déposons-le également dans notre application. On voit ça visuellement et. Fonctionnellement, ce n'est pas différent de notre classe basée composant. Il ressemble, se sent et fonctionne d'une manière tout à fait similaire. Mais quand il s’agit de sa mise en œuvre. Cela varie beaucoup. Vous pouvez voir que cela ne prolonge vraiment rien et React ne l’est pas vraiment. Mentionné n'importe où ici, sauf à l'intérieur. De ce composant qui utilise des fonctions spéciales qui sont distribué par le groupe React. Mais nous y reviendrons plus tard, allons-y. Ne vous inquiétez pas non plus pour ceux-là. Beaucoup pour l'instant, mais nous verrons. Cela, nous voyons qu'il ne s'agit que d'un objet JavaScript normal et ici de. Le cours est sa partie HTML, identique à notre classe partie de base. Et c’est ce que l’utilisateur voit et avec lequel il interagit. Mais comme vous pouvez le constater, cela fait un bon candidat pour un composant car il passe. Un autre de nos critères que nous avons. Ce qui a été défini plus tôt, c'est qu'il est complètement autonome et ne dépend de rien d'autre dans l'application, ce qui signifie que nous peut l'utiliser seul en conjonction avec d'autres choses n'importe où ailleurs dans l'application sans créer aucune sorte de conséquences inattendues qui proviennent de dépendances implicites ou explicites. Dans notre prochaine leçon, nous prendrons. Un aperçu de la différence entre JSX. Du HTML standard et comment il est utilisé dans le contexte d'une réaction application. Merci d'avoir regardé.

Fournisseur : Tony Davydets 1 leçon · 17m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce cours couvre les fondamentaux de React, une bibliothèque JavaScript pour la construction d'interfaces utilisateur. Il introduira les composants React, qui sont les blocs de construction des applications React. Nous expliquerons également les différences entre JSX et HTML standard. En outre, il explorera l'utilisation de ES6+ et JSX ensemble dans le développement React.

L'une des caractéristiques uniques de React est l'utilisation de JSX, une extension de syntaxe qui permet l'intégration de code de type HTML dans JavaScript. Ce module explorera les différences entre JSX et HTML normal et montrera comment JSX peut être utilisé pour créer des interfaces utilisateur dynamiques et expressives. En plus de JSX, ce module couvrira également l'utilisation des fonctionnalités ES6+ dans le développement React. ES6+ est une version de JavaScript qui a introduit de nombreuses nouvelles fonctionnalités et améliorations au langage. Vous apprendrez à utiliser les fonctionnalités ES6+ telles que les fonctions fléchées, les classes et les littéraux de modèle en conjonction avec JSX pour créer du code React moderne et efficace.

À la fin de ce module, vous aurez une solide compréhension des composants React, JSX et de l'utilisation d'ES6+ dans le développement React. Vous serez équipé des outils et des connaissances nécessaires pour créer vos propres applications React et créer des interfaces utilisateur riches et interactives.

Ce que vous allez apprendre

Comprendre ce que sont les composants React en tant qu'éléments constitutifs (building blocks) des applications React
Distinguer le JSX du HTML classique
Utiliser le JSX pour créer des interfaces utilisateur dynamiques et expressives
Appliquer les fonctionnalités ES6+, telles que les fonctions fléchées, les classes et les littéraux de gabarits (template literals), avec le JSX
Construire des interfaces utilisateur riches et interactives avec React

Points clés à retenir

React est une bibliothèque JavaScript pour construire interfaces utilisateur, et les composants en sont les blocs de construction pour les applications React.
Le JSX est une extension de syntaxe qui permet d'intégrer du code de type HTML dans JavaScript, et il diffère du HTML classique.
ES6+ a introduit des fonctionnalités telles que les fonctions fléchées (arrow functions), les classes et les littéraux de gabarits (template literals), qui sont utilisées conjointement avec le JSX dans le développement React moderne.
À la fin du cours, les apprenants ont une solide compréhension des composants React, du JSX et de l'utilisation d'ES6+ dans le développement React.

Foire aux questions

Que couvre ce cours ?

Il couvre les fondamentaux de React, y compris les composants React, les différences entre le JSX et le HTML classique, et l'utilisation de ES6+ conjointement avec le JSX dans le développement React.

Qu'est-ce que le JSX dans React ?

Le JSX est une extension de syntaxe qui permet d'intégrer du code semblable à du HTML au sein de JavaScript, et le cours explique en quoi il diffère du HTML ordinaire et comment il est utilisé pour créer des interfaces utilisateur dynamiques et expressives.

Quelles fonctionnalités d'ES6+ apprendrai-je à utiliser avec React ?

Vous apprendrez à utiliser des fonctionnalités ES6+ telles que les fonctions fléchées (arrow functions), les classes et les littéraux de gabarits (template literals) conjointement avec le JSX pour créer du code React moderne et efficace.

Que serai-je capable de faire après avoir terminé ce cours ?

Vous aurez une solide compréhension des composants React, du JSX et de l'utilisation d'ES6+, et vous serez équipé pour créer vos propres applications React et construire des interfaces utilisateur riches et interactives.