React.js : les fondamentaux

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