Introduction à React : créer un album

1. Introduction: Salut, je m'appelle Travis Arnold. Je suis designer et développeur depuis plus de 10 ans. J' ai été initié à React il y a quelques années, et j'en suis immédiatement tombé amoureux. Je suis tombé amoureux de React parce qu'il correspond si bien aux outils de conception que j'utilise depuis tant d'années. Cette leçon est géniale pour tous ceux qui s'intéressent à React, mais qui pourraient avoir un peu peur d'y participer. Nous allons commencer par examiner ce qu'est React, pourquoi nous voudrions l'utiliser en premier lieu, et comment cela peut nous aider dans notre développement. Ensuite, nous allons sauter dans un exemple réel, et construire une petite application de galerie pour voir comment React peut être utilisé à tout son potentiel. À la fin de cette classe, vous avez une compréhension de base de la façon dont React fonctionne, comment nous pouvons extraire des bibliothèques tierces et utiliser des fonctionnalités JavaScript plus récentes. Avant de prendre cette classe, vous devez avoir une compréhension de base du HTML, CSS et JavaScript. Ne vous inquiétez pas, nous allons tout examiner ligne par ligne pour vous assurer que vous pouvez terminer le projet par vous-même. Nous voyons React être utilisé de plus en plus chaque jour. J' ai hâte de vous montrer les bases, alors commençons. On se voit en classe. 2. Qu'est-ce que React ?: Bienvenue dans une introduction à React. Merci d'avoir suivi ce cours. Qu' est-ce que React ? React est une bibliothèque JavaScript qui nous aide à construire des interfaces utilisateur interactives. Il est créé par Jordan Walke, ingénieur logiciel chez Facebook, et il est toujours soutenu et maintenu par Facebook aujourd'hui. Au lieu d'instructions étape par étape, nous décrivons à quoi devrait ressembler notre application et React prendra soin de mettre à jour le DOM pour nous. abord, nous allons commencer par des concepts de haut niveau , puis nous allons sauter directement dans le code afin que nous puissions apprendre comment React fonctionne. React utilise un concept appelé DOM virtuel. C' est une représentation de notre état actuel de l'interface utilisateur. Comme vous pouvez le voir ici, nous avons deux états différents. Vous pouvez imaginer si vous aviez un div avec deux boutons et une balise span, et que nous voulions incrémenter ou être en mesure de décrémenter un nombre. Eh bien, c'est à ça que ça pourrait ressembler si peut-être nous devions dire, cliquez sur le bouton plus et voulez incrémenter le nombre. React verra le deuxième état vers lequel nous devons passer, et il pourrait diviser les changements efficacement puis passer à cet état suivant et mettre à jour notre DOM pour nous. Cela nous permet également de rendre à plusieurs cibles comme web, mobile, VR et toute autre plateforme. Comment communiquer avec le DOM virtuel ? React nous fournit une fonction d'élément de création pour créer ces éléments pour communiquer avec le DOM virtuel. C' est essentiellement une description de ce que nous voulons voir à l'écran. Nous pouvons passer un type qui est fondamentalement juste une balise HTML, ou il peut être un composant que nous allons apprendre dans un peu. Ensuite, nous pouvons passer des accessoires, qui peuvent inclure des choses comme OnClick, OnKeyDown et beaucoup d'autres événements. Enfin, nous pouvons passer des enfants. Cela peut inclure du texte et d'autres appels CreateElement ou même une fonction. Il y a quelques petites nuances comme l'utilisation de ClassName au lieu de classe et de style qui doivent être passés comme un objet au lieu d' une chaîne parce que nous sommes dans un environnement JavaScript. Si vous avez déjà vu réagir auparavant, vous avez probablement vu cette syntaxe HTML comme. C' est ce qu'on appelle JSX. Nous utilisons un outil appelé babel qui comprend ce JSX et le compile à quelque chose que le navigateur peut comprendre. Babel est un compilateur JavaScript qui prend du code, le transforme et renvoie le code JavaScript et un format différent. Comme on peut le voir ici. Nous le transformons à partir d'une balise h1 qui ressemble HTML en un appel de fonction en utilisant create element. Si nous devions passer quelques accessoires ici comme peut-être le style, couleur orange, nous pouvons voir comment cela va être transformé en temps réel. Vous pouvez visiter babeljs.io pour jouer avec cet exemple en direct et vous faire une idée de cela vous-même. Nous pouvons utiliser n'importe quelle expression JavaScript valide à l'intérieur des accolades dans JSX. JSX lui-même est une expression JavaScript, mais rappelez-vous que c'est juste [inaudible] au-dessus de l'élément create. Parfois, si nous avons besoin d'interrompre avec JavaScript, nous le pouvons. Nous pouvons voir ici nous avons une variable de nom que nous déclarons, puis dans notre variable d'élément, nous pouvons réellement utiliser cette variable de nom. Ça déciderait de bonjour Travis. Lors du mappage sur des collections, cependant, nous devons nous rappeler de fournir un accessoire clé à React. Les touches aident à réagir pour identifier les éléments qui ont été modifiés, ajoutés ou supprimés. Enfin, nous pouvons parler de composants. Les composants sont le bloc de base de React. Il nous permet de diviser notre interface utilisateur en pièces indépendantes et réutilisables. Nous pouvons composer plusieurs composants ensemble pour créer encore plus de composants. Nous utilisons des fonctions pour les composants sans état et les classes ES2015 pour les composants avec état. Les composants Stateful nous offrent également des crochets de cycle de vie qui nous permettent d'accrocher certaines parties du processus de rendu. Regardons comment cela fonctionne. Comme vous pouvez le voir, nous avons un composant sans état et sans état. Les composants apatrides sont très simples. Ils sont juste une fonction qui renvoie un élément de réaction. Comme vous pouvez le voir ici, c'est la même chose qu'avant. On dit juste bonjour, nom. Quel nom est déclaré comme une variable ci-dessus appelée Travis, donc cela aboutirait à bonjour Travis. Les choses deviennent intéressantes lorsque nous passons à un composant avec état. Nous commençons par une classe ES2015, puis nous étendons de React.Component, qui vient de React. En étendant de React.Component, nous héritons de certaines méthodes et d'autres propriétés que nous pouvons utiliser et React comprendra. Dans cet exemple de base, nous déclarons simplement une propriété d'état qui va contenir une autre propriété de nom nommée Travis. Ensuite, nous aurons une méthode de rendu que React appellera et retournera Bonjour, .state.name qui serait Travis. Il est également utile de noter qu'une méthode de rendu est nécessaire pour les classes. Ces deux composants se traduiront par la même chose, mais ils sont écrits de deux manières différentes. Voyons comment l'état peut nous aider dans nos applications. State nous donne la possibilité de rendre nos applications interactives. Il peut être un objet de n'importe quoi, y compris des chaînes, des tableaux et même des fonctions. Nous pouvons mettre à jour un composant en cas de nouvel état en utilisant la méthode set state que nous avons hérité lorsque nous avons étendu de React.Componet. Il est utile de noter que réagir nous aide en adhérant à un flux de données unidirectionnel. Vous pouvez toujours penser à l'état venant du haut et rampant vers le bas aux composants enfants et leur fournissant cet état. Comme vous pouvez le voir ici, nous avons déclaré un composant en utilisant une classe appelée compteur. Nous étendons du composant React comme avant, et nous déclarons un état initial appelé count. Le compte commence à zéro et nous voulons incrémenter ou décrémenter, le nombre basé sur le bouton sur lequel nous avons cliqué. Comme nous l'avons déjà dit, nous devons appeler la méthode setState afin de changer l'état. SetState peut soit prendre un objet avec le nouvel état, soit il peut prendre une fonction qui reçoit l'état actuel, puis retourne son nouvel état. C' est ce qu'on fait ici. Si vous pouvez voir ces fonctions d'incrémentation et de décrémentation, elles ont reçu l'état et elles en ajoutent un à l'état actuel ou en soustraient une de l'état actuel. Si nous cliquons sur ce bouton quelques fois, nous pouvons voir que nous incrémentons réellement l'état. De même, si nous cliquons sur le moins, nous décrémentons l'état et descendons. Comme nous l'avons vu auparavant avec le DOM virtuel, chaque fois que nous décrémentons ou incrémentons l'état, il divisera les changements et mettra à jour le composant de manière appropriée. Puisque nous utilisons cet state.count, il sera mis à jour dynamiquement, comme nous pouvons le voir ci-dessous. Si nous voulions réutiliser ce composant de compteur, comment pouvons-nous le faire ? Est-ce qu'on garde l'état et on le gère nous-mêmes ? Et si nous avions un état d'application qui devait venir d'ailleurs et le fournir à ce compteur. Voyons comment nous pouvons utiliser un terme appelé accessoires pour y parvenir. Les accessoires sont essentiellement des options que nous pouvons fournir à nos composants. Ils sont semblables à l'état en ce que les accessoires peuvent être n'importe quoi. Nous utilisons des types d'accessoires pour fournir une validation et nous nous assurons que les accessoires sont utilisés comme prévu. Nous pouvons également fournir des accessoires par défaut qui seront utilisés pour les accessoires qui ne sont jamais passés. Regardons comment nous pouvons prendre l'exemple du compteur avant et le sortir en pièce réutilisable. Les composants sans état recevront des accessoires en tant qu'argument, et les composants avec état recevront des accessoires en tant que propriété accessible sous ce point accessoires. Dans ce cas, nous ne transmettons aucun accessoire à notre application, et donc nous allons seulement nous inquiéter du compteur et des accessoires qui y reviennent. Si nous pouvons voir que nous avons un composant de compteur, nous lui transmettons des accessoires appelés compter sur décrémentation et sur incrément. Nous détenons l'état cependant dans notre application maintenant. On ne tient pas ça dans le compteur lui-même. Ce composant de compteur est maintenant agnostique de son état et peut être utilisé de différentes manières. Il n'a pas besoin de savoir d'où vient son état. C' est une idée de base du fonctionnement des accessoires. Nous n'entrerons pas dans les détails des types de prop ou des accessoires par défaut ici. Mais je vous recommande fortement d'aller regarder la documentation React et d'en lire plus à ce sujet. Enfin, regardons comment nous pouvons rendre les choses à l'écran. Comme le paquet React, il existe des paquets distincts pour différents moteurs de rendu dont nous avons parlé précédemment. Rappelez-vous, nous avons dit que nous pouvions rendre soit sur une plate-forme native, soit sur la réalité virtuelle ou sur le web. Aujourd'hui, nous allons utiliser React DOM et leur moteur de rendu. Cela est fourni sous la forme d'un paquet distinct. Nous utilisons le paquet REACT DOM, qui nous fournit une méthode de rendu, et c'est très simple. Tout ce que nous faisons est de prendre nos composants que nous avons définis, nous allons passer cela comme le premier argument à rendre et dans le second argument, nous passons juste un noeud DOM valide. Dans ce cas, nous allons obtenir le nœud DOM en utilisant getElementByID. Ce n'est pas la même chose que notre méthode de rendu. Cela rend en fait au DOM. Au lieu de simplement mettre à jour nos composants à chaque fois avec un rendu, étaient en fait rendu au DOM et mettre à jour le DOM à chaque fois que cela est mis à jour. C' était un aperçu de haut niveau de React. Nous avons appris comment le DOM virtuel fonctionnait, ce qu'il est, comment nous pouvons utiliser l'élément React.Create pour communiquer avec le DOM virtuel. Comment nous utilisons JSX qui est une syntaxe comme HTML qui compile vers le bas pour React, créer un élément. Ensuite, nous avons appris comment construire des composants et comment nous pouvons utiliser l'état pour rendre les choses dynamiques, puis comment nous pouvons utiliser des accessoires pour rendre les choses utilisables. Enfin, nous avons appris comment nous pourrions utiliser React DOM pour rendre les choses à l'écran sur le web. Allons dans un exemple du monde réel et voyons comment toutes ces choses fonctionnent ensemble. On se voit là-bas. 3. Coder dans le navigateur: CodeSandBox est et éditeur de code en ligne et est l'un des moyens les plus faciles de commencer à utiliser React. C' est ce que nous allons utiliser aujourd'hui pour créer notre application de galerie. Vous pouvez visiter cette page Web en allant dans codesandbox.io. Créez un compte afin que vous puissiez enregistrer votre progression au fur et à mesure, puis revenez à cette vidéo. Une fois que vous avez un compte ou connecté, commençons par cliquer sur le bouton Ouvrir Réagir. Cela va créer un bac à sable pour nous avec une simple application React prête à l'emploi. CodeSandBox utilise un outil appelé Create React app développé par Facebook. Il nous donne une longueur d'avance lors de la construction applications React en prenant soin de la configuration et de la configuration. Traditionnellement, nous aurions besoin de mettre en place un serveur et d'outillage comme babble pour transformer notre JSX pour créer un élément comme nous avons déjà parlé. Mais Create React app gère tout cela pour nous. Vous pouvez en savoir plus sur créer React up en visitant le repo si vous êtes intéressé, gardez à l'esprit, c'est ce que CodeSandBox utilise sous le capot pour alimenter notre environnement de développement. Nous pouvons voir que nous commençons par un fichier index.js de base. Nous importons React et React DOM ainsi que quelques fichiers CSS pour le style de base. Ensuite, nous avons un composant fonctionnel simple pour notre application, qui est ensuite rendu au navigateur en utilisant React on Render, comme nous l'avons vu dans la vidéo précédente. Vous vous demandez peut-être d'où React est importé. Il vient en fait de notre fichier package.json. Cela décrit les bibliothèques que vous souhaitez utiliser à partir de npm ainsi que d' autres options de configuration utilisées par l'application Create React. Si vous n'avez jamais entendu parler d'un npm auparavant, c'est un gestionnaire de paquets JavaScript qui nous aide à utiliser des bibliothèques tierces comme React. Reviendra à ce sujet dans une vidéo ultérieure et apprendre comment nous pouvons tirer dans d'autres bibliothèques que nous pouvons utiliser à notre avantage. Si nous revenons à notre fichier index.js et nous enregistrons la commande S. Nous verrons que nous sommes présentés avec d'autres options ici maintenant. Nous pouvons aller à l'onglet Infos sur le projet et renommons notre application en galerie React. De cette façon, nous pouvons trouver plus facile quand nous y reviendrons dans nos projets. Une dernière chose à noter est que si nous apportons des changements de code et enregistrons notre fichier, nous remarquerons que le code est reformaté. Si je fais l'onglet ici, poussez la commande comme, nous verrons qu'il revient en place. CodeSandBox utilise un autre outil appelé joliment. Prettier applique un style cohérent dans notre base de code et nous permet de nous concentrer sur l'écriture de code plutôt que sur la façon dont notre code est formaté. Nous sommes prêts à commencer à coder notre application de galerie. Voyons comment nous pouvons récupérer des données à partir d'une API et voir un exemple réel de la façon dont l'état peut être utilisé dans React. 4. Récupérer des données à partir d'une API: Avant de pouvoir commencer à introduire des données dans notre application, nous devons refactoriser notre composant sans état en composant avec état. N' oubliez pas que c'est la seule façon dont nous pouvons maintenir l'état et mettre à jour nos applications. Faisons la classe ici, nous l'appellerons application, nous allons étendre de react.component, fournira une méthode de rendu et retournera un div simple pour l'instant. On peut lui donner un nom aussi. On appellera entre H1. On peut l'appeler pixel. Ensuite, nous pouvons même ajouter un peu d'emoji ici pour le plaisir. Ajoutez cette petite caméra, faites la commande S. Maintenant, nous sommes prêts à y aller et nous avons accès à l'état. Voyons ce que nous pouvons faire ici, nous avons ajouté un état que nous avons ajouté la propriété de l'image. Nous utilisons un tableau vide là pour l'instant. Voyons comment nous pouvons utiliser une API et pointer certaines données dans l'application maintenant que nous sommes prêts à conserver un certain état et à le mettre à jour. Comment extraire des données à partir d'une API ? Aujourd'hui utilisera une API de pixel, puisqu'elle est ouverte au public, nous n'aurons pas à vous soucier de l'authentification. Gardez à l'esprit que parfois les API nécessitent authentification et ont besoin d'une clé de développeur pour fonctionner correctement. Je vais également ajouter un lien vers une liste d'autres API que vous pouvez utiliser ci-dessous. Dans notre cas, l'API pixel est publique et nous pouvons réellement visiter l'URL que nous allons utiliser aujourd'hui pour obtenir des données à partir de. Nous faisons défiler ici, nous pouvons voir qu'ils nous donnent un point de terminaison que nous pouvons utiliser. Voyons ça et voyons ce que nous recevons. Nous récupérons une liste d'images. Cool. Comment pouvons-nous l'intégrer dans notre application ? On peut utiliser quelque chose appelé Fetch. Fetche est une méthode disponible pour nous sur fenêtre et nous permet d' atteindre une ressource et de nous donner une réponse remplie de quelques données. Ils utilisent une promesse, qui, si vous ne savez pas ce qu'est une promesse, dit fondamentalement que nous avons promis de faire ça. On dit qu'on va faire quelque chose et ensuite on veut faire autre chose. C' est un asynchrone par nature. Au lieu de penser comment le code fonctionne de manière synchrone, donc vous appelez quelque chose, quelque chose d'autre se passe. Nous ne savons pas vraiment nécessairement qu'une promesse va résoudre, Similaire à, dans ce cas, une requête HTTP où nous voulons aller chercher des données et récupérer quelque chose. Nous descendons ici, nous pouvons voir que nous obtenons une promesse qui résout à un objet de réponse. Regardons cet objet de réponse très rapidement. L' objet de réponse contient des propriétés et des méthodes que nous pouvons appeler et nous ne sommes intéressés qu'à une seule aujourd'hui. Richardson dans ce corps. Json. Nous voulons appeler cela quand nous recevrons une réponse, ce qui rendra une autre promesse. Ensuite, nous pouvons obtenir nos données à partir de cette réponse. Allons à notre application et voyons comment cela fonctionne. Maintenant, nous voulons profiter de certaines méthodes de cycle de vie. L' un en particulier est ComponentDidMount. Cela sera appelé lorsque le composant montera pour la première fois à l'écran, donc maintenant nous pouvons commencer à récupérer des données. On appellera « chercher ». Nous allons lui transmettre l'URL d'où vous pouvez obtenir la liste des images à partir de. Rappelez-vous, cela renvoie une promesse, donc nous pouvons l'appeler alors, et nous recevons une réponse. Cette réponse, nous pouvons appeler une méthode JSON, qui retournera une autre promesse. Ensuite, nous pouvons les appeler à nouveau, et maintenant nous avons réellement des données à utiliser. Ouvrez ceci dans une fonction. On utilise juste une fonction de flèche grasse ici. Ensuite, nous irons à cet état fixe. Nous voulons changer nos images maintenant notre propriété images et nous allons maintenant lui transmettre les nouvelles données que nous venons d'obtenir, ne nous commande de sauvegarder. Voyons si nous déconnectons notre état où nous reviendrons. Si nous ouvrons notre console, nous pouvons maintenant voir que nous avons deux objets que nous avons aimés. Rappelez-vous, le rendu est appelé lorsque le composant monte d'abord, puis si nous le mettons à jour et l'appelons à l'état ou sera mis à jour à nouveau avec ce que nous voulons. Ce cas, nous avons des images avec un tableau vide, que nous pouvons voir ici, nous avons commencé avec un tableau des images vides dans notre état. Mais là, nous appelons cet état ensemble avec les données que nous avons obtenues de cette API que nous avions. Maintenant, si nous nous connectons, nous ouvrons cette application, nous pouvons voir que cela a fonctionné, nous avons récupéré toutes nos images assez cool. Maintenant, nous pouvons ouvrir cette application. C' est juste un tableau d'un tas de données, comme nous l'avons vu quand nous revenons ici et nous regardons toutes ces données que nous avons obtenues. Maintenant, nous avons accès à cela, nous pouvons faire quelque chose avec. Fermons ceci et voyons comment nous pouvons l'utiliser. Maintenant que nous avons ces données, comment pouvons-nous les obtenir à l'écran ? Rappelez-vous, nous pouvons utiliser l'interpolation JavaScript. Ouvrons ça ici et on accède aux images. et ensuite nous allons utiliser la carte parce que c'est une fonction de tableau. Nous pouvons cartographier chaque image et faire quelque chose avec elle et retourner un nouveau tableau. Dans ce cas, nous allons faire la source de l'image. Que pouvons-nous le transmettre à la source, où nous passons la source ? Regardons qu'il choisirait certains nous donne de retour dans notre appel API. Rappelez-vous que nous avons récupéré toutes ces données, alors que pouvons-nous les transmettre pour construire une image. Il ne semble pas qu'ils nous donnent la source d'une image, mais nous obtenons l'identifiant de chaque image. C' est bizarre. Comment cela fonctionne-t-il ? Comment obtiendrions-nous une URL d'image ? Eh bien, c'est ainsi que fonctionnent les API. Parfois, ils nous donnent un peu de données et nous pouvons ensuite l'utiliser pour construire encore plus de données. Donc, dans ce cas, nous avons l'ID d'image et voyons s'ils nous donnent un moyen d'obtenir un ID spécifique. Oh, ici, parfait. Nous pouvons obtenir une image spécifique en allant à cette URL et en saisissant une image. On verra comment ça pourrait marcher. Si nous revenons à notre application, collez-le dans, renouvelle l'interpolation JavaScript ici. Cool, maintenant on récupère des images, mais c'est juste la même image. Ce n'est pas si cool. Utilisons un peu d'interpolation. Nous pouvons utiliser notre image que nous avons maintenant à laquelle nous avons accès et nous allons obtenir son ID. Cool, on dirait que nous avons des images maintenant, donc maintenant nous rendons les images sur l'écran est plutôt cool. Ça n'a pas l'air si agréable, mais au moins nous avons nos images à travers et à rendre à l'écran. Voyons comment on peut rendre ça un peu plus agréable. Avant de le faire, nous devons ajouter une clé à ce souvenir, réacteur se plaindra si nous n'avons pas de clé et heureusement nous avons une pièce d'identité ici. Depuis son unique, nous devons comprendre cela et être heureux, sauver ça, cool. J'ai l'air bien. Une chose que nous devrions faire très rapidement est que si nous regardons nos données ici, nous devons ajouter une méthode de tranche parce que nous saisissons trop de photos en ce moment. On prend environ 1000 photos, donc on ne devrait en prendre qu'une trentaine. Faisons ça très vite. Maintenant, nous pouvons voir que nous ne prenons pas autant de photos. Ce sera un peu plus facile à charger, cool. Maintenant, nous sommes prêts à démarrer cette application. 5. Le style dans React: Comment commençons notre application maintenant ? Nous pouvons voir que nous importons le fichier CSS ici en haut. Allons-y très vite. Il s'agit de certains styles qui ont été configurés auparavant. Nous ne voulons pas de centre d'alignement de texte et nous n' utilisons plus d'application, donc nous pouvons simplement cibler notre corps. Ça a l'air bien. Maintenant, nos polices utilisent un san serif semble un peu plus agréable. Si nous arrivons à notre fichier d'index, maintenant comment pouvons-nous, devrions-nous juste utiliser une feuille de style comme avant social nous retournons dans styles.css. Nous pouvons le faire, mais comme réagir est juste JavaScript, nous avons de nombreuses façons différentes de styliser nos applications. Nous pourrions utiliser des styles en ligne en fournissant un objet, bien que cela puisse sortir du coût de performance, nous pouvons utiliser CSS traditionnel en utilisant le nom de classe et une feuille de style ou nous pouvons utiliser un terme appelé CSS et JS, qui est ce que nous allons utiliser aujourd'hui. Il y a une tonne de bibliothèques qui prennent en charge CSS et JS qui viennent toutes avec une fonctionnalité différente. Mais aujourd'hui, nous allons utiliser une bibliothèque appelée émotion. Emotion prend en charge les capacités de style CSS en JavaScript. Personnellement, j'aime utiliser des objets, mais vous pouvez également utiliser un terme appelé littéraux de modèle de balise afin d'écrire CSS plus familier dans une chaîne. Voyons comment ça marche ici. Nous importons la fonction CSS de l'émotion. Nous pouvons construire notre chaîne CSS et appliquer. Cela va créer un nom de classe, et nous pouvons appliquer ce nom de classe à notre domaine. Nous pouvons voir ici que nous devons installer une bibliothèque supplémentaire pour l'utiliser avec réagir. C' est ce qui est cool dans l'émotion. Il peut fonctionner avec ou sans réaction. Il fonctionne avec de nombreuses plateformes différentes. C' est les littéraux du modèle de balise, des choses dont je parlais. Nous pouvons voir ici que nous avons une application. Nous passons un nom de classe comme normal, comme nous passerions n'importe quel autre nom de classe. Il est résolu correctement. Nous n'avons pas à nous soucier de gérer une feuille de style séparée ou quelque chose comme ça. Nous pouvons garder tous nos styles et co-implantés ensemble. C' est vraiment sympa et nous verrons comment cela peut fonctionner. Revenons à notre application et commençons à la coiffer. Nous devons d'abord installer nos nouvelles dépendances. Rappelez-vous que nous avons dit que nous revenons à notre paquetage.json. Comment pouvons-nous faire cela dans le bac à sable de code ? Cela nous donnera-t-il un moyen vraiment facile de le faire ? Nous pouvons simplement ajouter des dépendances ici avec ce bouton, nous allons cliquer qui va chercher l'émotion et là c'est. On va installer ça. Nous voyons que cela a été ajouté à nos dépendances. Mais rappelez-vous que nous travaillons dans les réactions, donc nous devons ajouter la dépendance de réaction émotionnelle. mouvement réagit, il y en a. Cool. On est prêts à partir. Nous avons de retour à notre index.js. Nous pouvons importer stylé à partir du mouvement de réaction verra cela. Maintenant, nous sommes prêts à commencer à coiffer notre application à l'intérieur avec CSS et JS, nous n'avons pas besoin de revenir à une feuille de style. J' aime généralement garder une feuille de style toujours afin de pouvoir gérer mes styles globaux. Vous pouvez le faire avec émotion, mais cela dépend juste de ce que vous voulez faire. J' aime avoir juste un fichier CSS régulier pour les styles globaux et utiliser le CSS et JS pour garder mes autres styles spécifiques aux composants co-localisés, ce qui est vraiment sympa. Motion nous donne cette fonction stylée. Nous pouvons commencer à l'utiliser tout de suite, faire du style, et ensuite nous pouvons lui passer une chaîne pour n'importe quelle balise que nous voulons utiliser. Dans ce cas, nous voulons utiliser une balise d'en-tête. Ensuite, nous allons passer une autre fonction avec un objet, et ce seront les styles que nous voulons lui donner. Nous ferons un peu de rembourrage pour le rendre un peu plus agréable. Donnez-lui 16 pixels de rembourrage. Ensuite, nous pourrions faire autour de la couleur, j'aime utiliser HSL, c'est la saturation de la teinte et le chargement. C' est juste un moyen facile de se souvenir de vos couleurs sans vraiment avoir à les regarder. Nous ferons zéro pour cent pour la saturation et ensuite le chargement que nous voulons faire , nous ferons comme un gris foncé ou comme un gris clair. Nous ferons 94 pour cent. On verra comment ça marche. Maintenant, nous avons ce composant qui a été créé pour nous et le style, le nom de la classe a déjà été créé pour nous aussi , donc nous n'avons pas à nous soucier d'aller à une feuille de style. Tout est juste ici, ce qui est vraiment sympa. Si nous descendons ici, envelopperons notre titre dans un en-tête et nous allons voir si cela fonctionne. Nous y allons, vous pouvez voir que c'est un peu gris clair, mais nous avons d'autres styles qui se heurtent. Nous avons une marge par défaut dans notre corps alors débarrassons-nous de cela. Ceci est juste à partir des styles par défaut du navigateur. Il semble que notre H1 hérite d'un style. C' est pour ça que j'aime juste nettoyer les choses. Nous pourrions même important de normaliser ou quelque chose ici pour réinitialiser tous les styles. Mais dans ce cas, nous allons simplement le faire nous-mêmes et ne ferons aucune marge sur notre en-tête. Eh bien, maintenant ça a l'air un peu mieux. Maintenant, nous allons prendre nos photos et les mettre dans une grille et les rendre un peu plus agréables. Nous pouvons faire const, nous allons appeler ceci TileView. Ensuite, nous pouvons utiliser notre fonction stylée à nouveau et ce sera juste un div maintenant. Ensuite, nous allons passer une autre fonction avec un objet et nous allons utiliser la grille d'affichage. Ensuite, nous voulons être en mesure de passer des accessoires à cet élément de style. Peut-être le changer rendre variable afin que nous puissions le changer en fonction de différentes options. Ce qui est cool dans l'émotion, c'est qu'elle nous permet de transmettre des accessoires ici. Nous allons envelopper cet objet en parens parce que nous voulons le retourner implicitement. Sinon, ils pensent que nous voulons une fonction dont nous avons besoin pour faire un retour. Ensuite, nous leur demanderons souvent dira rembourrage, espacement des accessoires, et ensuite nous ferons l'écart de grille. Les accessoires commencent également à espacement. Cela ajoutera un espacement autour de toute notre subvention ou verra si cela fonctionne. On peut juste prendre notre vision du temps, venir ici. Nous allons envelopper toutes nos images et voir s'il semble que ça marche, nous allons sauver ça. On dirait pas que ça marche. Voyons ce qui se passe. On n'y passe pas d'espacement. Peut-être que c'est là que nous pouvons introduire des accessoires par défaut. Nous ne passons pas d'accessoires vers le haut, mais peut-être que nous n'étions pas espacés pour être un accessoire par défaut. On peut y aller et faire TileView. Nous avons ce composant et nous pouvons accéder aux accessoires par défaut de la propriété sur elle, et maintenant nous pouvons passer l'espacement. Nous pouvons dire, loin 16 pixels comme un espacement par défaut. Cool, maintenant ça marche. Maintenant, si vous ne passez aucun espacement, nous allons juste par défaut à 16 pixels. Sinon, on peut venir ici. On peut dire espacement, peut-être quelque chose d'scandaleux comme 60. Bien cool donc ça marche. C' est trop d'espacement. Nous allons simplement rester avec l'espacement par défaut que nous avons configuré. Nous pouvons vraiment inspecter cela et voir que cela fonctionne et comment l'émotion transforme tout en nom de classe. C'est plutôt cool. Nous voyons ici, nous voyons ce petit nom de classe que nous obtenons, et il résout ici. Nous obtenons le remplissage de grille affiché 16 pixels, écart de grille 16 pixels. Plutôt cool. Ajoutons d'autres trucs pour nettoyer ça. La grille CSS est extrêmement puissante, alors profitons de cela. Nous pouvons utiliser quelque chose appelé colonnes de modèle de grille. Ensuite, nous allons passer un littéral de modèle de chaîne, et nous pouvons dire répéter. On va s'auto-remplir. Ensuite, nous pouvons utiliser une fonction minmax en CSS. va l'interpolation ici et on dira les accessoires. On pourrait aller à la largeur de cellule min. On n'aura qu'une fraction. Fondamentalement, ce que cela dit est d'essayer de remplir la fenêtre avec autant de cellules que vous le pouvez, mais de les garder à cette largeur de cellule minimale. Ce qui est vraiment causé, nous obtenons une fonctionnalité réactive par défaut. Nous n'avons pas à nous soucier de mettre en place des points d'arrêt ou quoi que ce soit du genre. Nous allons passer une cellule minimale par défaut avec. On va aller 3-20 pour l'instant. Nous devons également nous rappeler que nous devons lui transmettre une valeur de pixel. Donc, alors que les pixels ici, voyons si cela fonctionne. Pour la récréation de la fenêtre d'affichage devrait avoir des cellules qui ont obtenu une pile. Cool. On y va. On dirait que ça marche. Encore besoin de nettoyer nos images, nous le ferons ensuite. Mais maintenant, nous avons un design réactif automatique en cours, ce qui semble plutôt cool. Nettoyons un peu nos photos. Ils ne sont pas très bien dans la fenêtre. Nous allons créer un autre composant ici. On l'appellera photo égale à style. Ils veulent le transmettre à l'image. Maintenant, passez une fonction à nouveau avec nos styles. On va y aller avec 100 pour cent. Nous voulons également faire le bloc affiché. Si vous ne faites pas afficher les images de bloc ont l'inline par défaut et comment cette marge bizarre sur le bas d'eux, bloc d'affichage aide avec cela. Nous allons aller la couverture en forme d'objet, ce qui permettra de s'assurer que l'image est portée comme sa propre petite fenêtre qu'il est dans de sorte que les cellules dans notre cas. Nous avons ce composant, allons par ici. Mais nous devrions aussi changer notre cellule min. Eh bien, c'est un peu trop gros. Je pense que notre fenêtre est d'environ 300 en ce moment, donc nous allons le définir 240 qui pourrait être une belle largeur. On va descendre ici. Nous allons remplacer ceci et cela devrait juste fonctionner parce qu'il semble que ça marche. Ces images sont un peu longues. Faisons une image carrée en fait donc remplacera avec, nous allons faire un millier donc nous avons une belle qualité. C' est sympa à propos de l'API pixel. Il nous permet de recadrer des images très facilement. Maintenant, j'ai quelques images carrées. On a l'air plutôt bien. Nos images d'affilée. Ils ont un bel espacement autour d'eux. Voyons comment nous pouvons rendre ce petit interactif et peut-être cliquer dessus pour agrandir la vue et afficher quelques informations supplémentaires. 6. Ajouter de l'interaction: Avant d'aller ici, nettoyons un peu nos dossiers. Ils vont jusqu'à se gonfler un peu. Nous pouvons nettoyer cela en déplaçant un intuitif à partir d'un fichier. D' abord, nous allons tout copier. C' est ce que je fais, je copie toujours tout et puis je crée un nouveau fichier. On appellera les composants. Maintenant, en fonction du nombre de fichiers que vous avez, peut-être que vous voulez créer un dossier avec plus de fichiers à l'intérieur de cela. Mais dans notre cas, c'est assez simple, donc je vais garder ça assez simple. Nous avons seulement besoin de style, et ensuite nous pouvons voir ça. Nous voulons aussi exporter tout cela, donc c'est comme ça que nous pouvons les saisir. Ensuite, nous allons explorer le coût TileView, puis nous allons exporter la photo. Maintenant, nous devrions être en mesure d'importer ces, donc, vous pouvez vous débarrasser de tout cela et nous allons avoir quelques erreurs, mais c'est bon. Nous allons importer les fichiers maintenant. On n'a plus besoin de styliser. Maintenant, nous pouvons aller à l'importation, et nous pouvons choisir ces composants individuels que nous venons d'exporter, donc nous allons dire pour les composants, puis nous allons aller en-tête, TileView, puis photo. air bien. Revenons à notre fichier de composants. Maintenant, nous voulons cliquer sur une photo et l'agrandir, alors comment pouvons-nous faire ça ? Nos galeries un peu grandes maintenant aussi. On voit si on peut réduire ça juste un peu, alors on ira peut-être 120. On y va. Maintenant, si on ouvre ça et on le ferme, oui, on y va. On a un peu mieux vue. Quand nous avons élargi, cela a du sens. Maintenant, nous voulons prendre ce composant photo et nous lui passons des accessoires, mais je n'utilise même pas les accessoires en ce moment. Quand nous créons nos styles, j'aime tirer mes styles. J' aime peut-être que je ne serais pas une feuille de style et donc dira, nous pouvons dire vignettesStyles, donc c'est quand il est petit. Ensuite, nous ferons FullScreenStyles comme nous l'appelons ainsi. Ce sera aussi un objet de styles, donc nous voulons qu'ils soient par défaut ceux que nous avons déclarés, donc la vignette est celle-ci. Ensuite, quand c'est plein écran, on va fixer la position. Haut zéro, zéro droit, zéro gauche, zéro inférieur. Ce sera, quand nous avons élargi tout versé sur toute la fenêtre, nous voulons lui donner une hauteur minimale afin qu'il ne soit pas trop grand. Nous allons lui donner un peu d'espace de respiration, donc nous allons faire 80 hauteur de fenêtre, et ensuite nous pouvons également faire marge auto pour le centrer dans l'écran. Maintenant, nous pouvons prendre ces styles que nous venons de définir et nous allons nous en débarrasser. Nous pouvons dire, puisque nous récupérons les accessoires, nous dirons les accessoires, nous appellerons cette prop isActive, et vous pouvez dire si elle estActive, nous voulons utiliser les miniatures, mais nous utiliserons FullScreenStyles quand on dit actif, et sinon, nous allons utiliser les miniatures, afin que nous puissions enregistrer cela. Je pense qu'on est bien d'y aller maintenant. Rien ne se passera ou absolu ressemble le même, donc c'est bien. Voyons comment nous pouvons dire à une photo d'être si elle est active ou non. Nous pouvons introduire un nouvel état ici puisque nous voulons changer notre application lorsque nous cliquons sur quelque chose, et donc nous allons dire nous conserverons un CurrentPhotoID, qui sera nul par défaut. Ensuite, afin de déterminer si quelque chose est actif, nous allons faire, est actif dans cet état CurrentPhotoID est égal à cette image.id. Comment obtenons-nous CurrentPhotoID ? Souviens-toi qu'on a parlé de OnClick pour qu'on puisse passer un événement. Nous pourrions dire onClick, et passera une fonction, puis nous verrons ce setState, et nous obtiendrons le CurrentPhotoID. Nous allons le définir sur cette image.id sur laquelle nous cliquons. Nous sommes en boucle, nous attachons ces événements et nous voyons, quand nous cliquons sur cette photo, nous voulons définir n'importe quelle photo sur laquelle nous venons de cliquer sur le CurrentPhotoID, puis maintenant nous allons mettre à jour notre état et revenir, et donc chaque fois qu'il passe par chaque image, il dira que celle-ci est active ? Est-ce que celui-ci est actif ? Est-ce que celui-ci est actif ? Enfin, il arrivera à l'endroit où on avait cliqué, qui est défini sur CurrentPhotoID. Voyons si ça a marché. Il semble que cela fonctionne, donc maintenant nous pouvons cliquer sur quelques photos et agrandir et cela ne semble pas trop bon, mais nous allons résoudre ce problème ici très rapidement. Comment pourrions-nous fermer ça ? Lorsque nous cliquons sur une photo, rien d'autre ne se passe va juste continuer à la définir sur l'identifiant de l'image, n'est-ce pas ? Pour qu'on puisse dire ici, on pourrait sortir ça à nouveau. C' est peut-être quand vous voulez tirer ça dans une fonction ici. Parfois, je fais cela plutôt que de faire un retour implicite, nous allons faire un retour explicite, donc nous allons retourner ceci. Maintenant, nous pouvons stocker la variable ici appelée IsActive, et ensuite nous pouvons dire, nous allons passer IsActive ici maintenant, donc nous allons juste nettoyer les choses un peu. Maintenant, nous pouvons dire, si nous sommes IsActive, nous voulons qu'il soit réglé sur non, plutôt que sur l'image. Id, donc cela devrait fermer l'image parce qu'elle va juste revenir par non et puis maintenant il ne sera plus défini, donc nous allons enregistrer cela. Maintenant, nous devrions être en mesure de cliquer sur une photo, puis de cliquer dessus à nouveau, et cela fonctionne maintenant, donc il la réinitialise. Voyons comment nous pouvons nettoyer un peu nos styles et le rendre un peu meilleur. Ensuite, nous voulons ajouter un composant de cadre afin que nous puissions voir notre photo un peu mieux et nous n'avons pas destruction derrière nous, alors faisons-le. Quels sont les composants ? Va exporter const Frame égal style, et ce sera juste un div et passera ses propres styles lorsque vous utilisez un style similaire ici pour, tant que styles plein écran, nous allons simplement les coller dans. On va faire la couleur de fond. Dans ce cas, nous allons faire chaque hsla, qui est un canal Alpha. C'est vraiment bizarre. C' est ce que je n'aime pas ça dans les hsla et hsla, mais nous devons utiliser des virgules maintenant. Rappelez-vous toujours que si nous utilisons hsla et chaque hsla que nous devons utiliser des virgules avec le hsla et pas des virgules avec le hsla. C' est un peu déroutant, et donc ce que le zéro pour cent, nous voulons un 100 pour cent pour le blanc. Ensuite, nous allons faire une chaîne Alpha ici, donc ça nous donnera un peu de transparence. Nous allons faire 96, ce qui devrait être bon pour nos styles de cadre. Sauvera cette copie de cadre et retour à l'index, va l'importer, et puis nous allons juste le coller ici en bas. Depuis cette correction de position, il devrait juste apparaître. Comment on fait pour que ça se montre et se cache ? Avec quoi on peut faire des trucs cool ici. Rappelez-vous que nous sommes juste, nous pouvons interrompre avec JavaScript. Nous pouvons dire this.State.CurrentPhotoId et si, depuis null est vrai, l'IRF est une valeur fausse dira, s'il y a un CurrentPhotoId, montrer cette image. Sinon, ne le montre pas. Cela serait évalué à true, et alors il va juste exécuter ce qui serait créer un élément et rendre notre cadre, alors sauvegardez cela. Maintenant, quand nous cliquons, nous devrions avoir un cadre qui apparaît. On y va. C'est une bonne raison. Même si CurrentPhotoId sont null est falsey, CurrentPhotoId ne peut pas être nul. C' est ce que nous avons vu quand nous avons cliqué sur le premier. Revenez ici et nous dirons, n'est pas égal nul. Parfois, vous pouvez rencontrer un problème comme celui-ci. Il suffit de faire attention si vous avez quelque chose où vous le comparez et que c'est zéro, alors ce n'est peut-être pas vrai, alors nous cliquons dessus. Ça devrait être bon. On ne peut plus voir notre image. Allons faire en sorte que ça arrive. Descendez ici, pourquoi zIndex parce que maintenant c'est assis sur le dessus, fondamentalement parce qu'il est assis dans l'ordre des DOM et des ensembles souhaités, donc nous allons dire que c'est le zIndex de cinq. C' est là que nous commençons à jouer avec nos mots ZIndex, non ? Et puis CineX a 10 ans, alors maintenant nous cliquons dessus. Maintenant, cliquez dessus. Nous voyons que nous avons un cadre derrière nous. Nous pouvons cliquer sur et fermer, ouvrir, fermer. Plutôt doux. Nettoyons un peu les styles pour cette photo. Peut-être que la hauteur 80 n'était pas bonne. Faisons la largeur ici, nous ferons la largeur et nous ferons 80 largeur de fenêtre. On y va. On a l'air bien. Nous ajoutons une chose de plus ici. Voyons si nous allons aux accessoires est actif, allons juste ajouter un curseur ici, donc nous allons changer notre curseur lorsque nous survolons et dirons, et c'est en plein écran, nous voulons zoomer, et puis quand c'est une miniature, nous voulons vraiment zoomer et voir à quoi cela ressemble. Eh bien, il le fait. 7. Conclusion: Nous allons apprendre à récupérer des données à partir d'une API, comment le style fonctionne et réagit. Comment nous pouvons construire des API prop autour de choses comme la grille CSS. Comment ajouter une certaine interactivité en cliquant sur une image et développant.Je voulais garder cette leçon courte, mais rappelez-vous qu'il ya beaucoup plus que nous pourrions faire avec cela out.Si nous ouvrons cette image, par exemple, il est un peu grand.Nous peut mesurer la fenêtre d'affichage et s'assurer que l'image s'adapte toujours ou à une accessibilité appropriée en accrochant les commandes du clavier ou même en ajoutant de belles animations. Je vous encourage vivement à aller au-delà de vos projets si vous êtes prêt à relever le défi. C'était un aperçu de haut niveau de ce qui est capable React.Je vous encourage à continuer à lire la documentation React, apprendre JavaScript vanille et prendre des cours de réaction, s'il vous plaît poster vos projets et nous pouvons résoudre tous les problèmes que vous avez ensemble. Merci beaucoup d'avoir suivi ce cours. Ce fut un plaisir de vous donner un aperçu façon dont React fonctionne et comment nous pouvons l'utiliser. J'ai hâte de voir ce que vous créez.