Premiers pas avec React.js | Julien Fradin | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Premiers pas avec React.js

teacher avatar Julien Fradin

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Intro

      1:22

    • 2.

      Qu'est-

      1:16

    • 3.

      Configuration de l'environnement

      4:24

    • 4.

      Introduction aux composants

      3:28

    • 5.

      Première composante App

      4:21

    • 6.

      Communication (Props) composant (Props)

      4:52

    • 7.

      Utiliser l'État

      5:03

    • 8.

      Ajouter des styles CSS

      5:10

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

673

apprenants

--

projet

À propos de ce cours

Vous apprendrez à utiliser React.js et ses fonctionnalités pour créer une application Web simple de panier State & accessoires sera vos amis et vous apprendrez quand il est préférable d'utiliser l'un ou l'autre. Vous apprendrez diverses façons d'optimiser React.js.

Les connaissances antérieures comprennent JavaScript, ideally ES6 et la compréhension des modules Java.

Rencontrez votre enseignant·e

Teacher Profile Image

Julien Fradin

Enseignant·e

Hey everyone, I'm Julien. I'm a front-end web developer based in Toulouse, France. My job consists in helping my clients build attractive websites by using modern technologies such as React.js, CSS3, HTML5 and everything you would call "hype" on Medium

Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Intro: Tout le monde. Je suis Julian. Amusez-vous avec l'inférence du spectateur. Je marche librement et depuis le début de l'année 2017 et maintenant j'ai été contacté par croquis qui viennent faire un premier cours en ligne. Et je suis vraiment excité de vous montrer mes progrès. Mon premier test en ligne serait avec la poursuite réactionnée. C' est un bon cadre à faire à partir de 10 travaux. Nous verrons plus en détail ce que nous pouvons faire. La classe en ligne contiendra un projet de classe comme presque tous les autres cours sur le partage de compétences . Et nous le ferons tout au long du cours. Si vous suivez le cours, normalement vous devriez être en mesure de terminer ce projet de classe sans aucune erreur. Quoi qu'il en soit, si vous voulez m'envoyer votre projet de classe vraiment en créature pour le faire pour que je puisse vos erreurs sur peut-être vous donner quelques points d'amélioration ou quelque chose comme ça, ça va vraiment vous faire sentir comme vous avez progressé parce que vous auriez des commentaires sur votre travail. Et j'apprécie vraiment, vraiment. Si elle se tenait derrière moi parce que ça me montrerait que j'ai fait un bon club. Comme vous pouvez le voir, je l'utilise pour le dire en six dans mon équipe. Ils ont aussi mon ordinateur personnel ici. Je ne l'utiliserai pas pour cette classe. Avons-nous utilisé le Mac ? Mais ce n'est pas militaire. Je vais vous expliquer tout pour commencer à réagir. J' espère que vous apprécierez les écoles. Passez un bon moment. Les gars continuent de travailler. 2. Qu'est-: Et quand nous arrivons à ce veau sur le point de re en fait il première étape avec trois réellement réagi pour meurtre avec créative mon Facebook en 2013. Il vise à créer une seule page avec des applications, et il utilise une porte virtuelle, qui fait se demander très rapidement quelle autre force de réagit. Il vous encourage à utiliser le composant, qui sont très simples. Écartez chaque jour. Mon manteau il l'utilise JSX comme un modèle, insistant Michelle comme il orteil complexe. Gwendolyn condition vient de quitter, et il utilise son vétéran. Donc, ce que nous avons appris dans ce cours, nous verrons comment arrêter de travailler quand je suis allé travailler pour le réacteur comprend le paillis A S et P M et le créateur. Pourtant, jusque-là, nous verrons intégrer notre premier composant rendant le rendu basique sur la page . Ensuite, nous apportons le deuxième composant, qui sera un bouton. Et quand nous étions dans le retour le premier compartiment. Après cela, nous apprenons à communiquer entre les composants. Mais vous pensez que les propriétés après avoir communiqué entre les composants pour vous, je comprends comment interagir au sein de l'entreprise. Mais c'est dans l'état. Et pour finir, vraiment, vraiment, vous voyez de l'aide à faire sortir. Je me sens plus jolie. Ce cours comprendra également un projet de classe qui consistera sera comme une simple coupe de poulet. Nous devrons utiliser à la fois les propriétés et l'état, et vous devrez m'envoyer un manteau pour que je puisse le commettre. 3. Configuration de l'environnement: tout le monde que nous allons commencer. Notre vrai est la classe. Tout d'abord, on va le voir, donc tous les deux le feraient. Nous devrons commencer notre première réaction. Donc, d'abord, nous allons ne pas savoir pas de chaises sur votre navigateur Web et à la tête d'un notoire que le travail. Ensuite, dirigez-vous vers la section des notes de pâte bonne à la baignoire actuelle et à l'intellect pour répondre aux questions pointant vers votre mardi opérationnel. Mike. Ce serait ma question de départ. Vous pouvez utiliser les penches du programme d'installation Windows, les binaires. Je ne couvrirai pas l'installation sur Lenox parce que les utilisateurs UNIX devraient être capables d'insulter inventer maintenant que la zone arrière n'a pas dit qu'ils allaient l'ouvrir. Ce paquet publié sur Notorious et NPM en PM dans le paquet note. Militaires. Il serait utile d'installer d'autres paquets tels que React, par exemple, continuer. Venez à nouveau, acceptez la licence et puis venez de terminer l'installation. Ne vérifiez rien. Il sera installé et nous travaillerons hors de la boîte. Le chèque. Si votre installation a été réussie Evident Terminal et de type noeud Dash V Cela donnera . Peut-être et j'ai mis un peu différent de cela, mais il devrait être au moins 8,9 point un. Au moment de l'enregistrement, La division vidéo de la note est de 8,9 point un. C' est un chèque. Si NPM n'est pas pensé qu'il devrait, 5.5 point un peut être différent maintenant. Ils vont insérer un très pratique à leurs pommes. Commencez notre première réaction. Cela nous aidera à en avoir un développement qui se rétablit. D' abord, nous chargeons CSS freeloading et vivons avec elle. Peut-être récupéré dans une autre classe. Comment obtenir votre premier développement propre jamais. Mais c'est un sujet très compliqué, et nous allons nous concentrer sur le plus important pour l'instant, le code dans votre terminal NPM de type. Installez Dashti à la place de globalement afin que vous puissiez l'utiliser. D' autres réguliers doivent venir et le nom des paquets créer réagir vers le haut. Comme vous pouvez le voir, le paquet a été connu localement. Maintenant, je vais l'utiliser pour créer réagir que le premier argument de cette commande sera le nom de votre projet pour les oublier avant qu'ils ne vont taper. Notre premier projet a été installé bean. Ils ont probablement un différent sont mis à l'esprit parce que j'ai installé Young, qui est un paquet différent de note de bas de page militaire. Il déchire que vous avez installé les paquets fester. Non, allons dans notre répertoire Scotia, qui est où le projet S'il vous plaît ouvrir votre éditeur de code mon crédit ou est-ce sublime texte regardant avec quelque chose que vous voulez ? Je m'ai dit le choix cool pour réagir. Donc, comme vous pouvez le voir, il y a beaucoup de choses compliquantes dans ce répertoire, mais nous allons l'utiliser d'une manière simple pour l'instant dans votre terminal. Ou vous pouvez taper PM run. Commencez pour un stock NPM court, qui fait la même chose que vous pouvez voir. Il ouvre un nouvel onglet dans mon navigateur Web car il déjeuner est le développement jamais, mais charge également la première page. Bienvenue à réagir pour commencer il SRC adulte oui et sûr à recharger. Écoutons la façon dont les deux gars s'ouvrent. Abdo change. Vous pouvez voir que c'est un peu compliqué, mais nous allons essayer le développement à partir de là. Ce n'est pas quelque chose comme ça. Déplacez la fenêtre pour voir le fichier d'effets. Mon frère a rechargé et nous a dirigé sa vie. Je n'ai pas senti le chemin pour moi. Il en a 32 lui-même. La première partie de sa classe est terminée. Je vais vous faire revenir dans le deuxième point pour commencer à comprendre comment réagir fonctionne. 4. Introduction aux composants: Hé, tout le monde, si vous regardez la vidéo, vous ne devriez pas avoir une tradition concurrente de travail du réacteur Notorious. Et donc vous devez savoir que réagir O. J s fonctionne avec des composants. Donc, dans cette écoute, nous allons apprendre et comprendre. Composant est fondamentalement quelque chose que vous auriez à réutiliser et quelque chose que vous pouvez diviser dans votre composant do pour avoir quelque chose de plus utilisable et plus testable de cette façon. Pour Rex compétent, vous ne vous casserez pas sur votre site web. S' ils peuvent exemple de quelque chose, je les ai. Est-ce que les types de site Web de ou bish était encore parler de langue Comme nous continuons exemple très basique, cette barre verte ici pourrait être appelé un en-tête, par exemple et il est fondamentalement réagir composant et vous cliquez sur les robinets. Il ouvre de nouvelles pages et vous mettre à jour son faire ici votre continuel pour cela. Donc, fondamentalement, c'est un composant, le tout, le composant et même une seule lettre. Un seul caractère plus tard et du composant. Les filtres ici sont également des composants. La chose que vous avez à Alistair est que les composants n'ont pas accès à votre environnement supplémentaire . Ils ont besoin de communiquer avec les finales ou même pour commander composant. Nous verrons comment ça marche dans, Ah, une autre leçon. Alors maintenant comment ceux-ci étaient composants conscients de candor est fondamentalement GSX sur une partie du code. Alors nous allons ouvrir notre Donc maintenant nous avons la nôtre peut trader directement, celui qui a été créé plus tôt qui a ouvert un répertoire saucy en deux, comme un patraeus pour que vous puissiez le voir. C' est de l'autre côté ? Fondamentalement, il est six près, qui serait traduit plus tard en biscuit de base. Integrated étend le composant et le composant est réagir. Croix. Il a essentiellement tout ce dont vous avez besoin pour utiliser votre composant. La méthode de rendu est ce qui a montré le composant. Dépêchez-vous d'utiliser visuel. Faites-le revenir. Mesuré, quelles fenêtres ? Tout ce dont vous avez besoin dans votre composant. Donc, vous utilisez GSX. C' est un peu différent de HTM sont parce que, comme vous pouvez le voir, par exemple, ici, nous ne fermons pas blanc. Il appelle mieux. Quel nom proche ? Parce que son en-tête où nous avons le Christ atterri parce que le clavier proche est avec le mot clé dans votre sexe donc nous allons avoir besoin que vous ayez ah attribut nom de classe. Il y a un attribut list off que vous devez utiliser avec act à la place off regular attribut. Ah, celui à qui je peux penser, par exemple, est ah html quatre. Pour une étiquette comme, par exemple, label html quatre n'importe quel temps t 80 vous aurez un minimum complet sur ce que vous pouvez utiliser comme un hommage sur la documentation officielle de réaction. Il y a un est littéralement, mais on s'y habitue. De plus, si votre serveur de développement Web est correctement configuré, nous vous avertissons de l'utilisation de noms d'attributs incorrects. Ok, donc tu es excité de te voir avec une facilité de composant ? Maintenant, vous savez un peu comment ça marche. Maintenant, nous allons créer notre premier composant dans la leçon suivante. Je te vois plus tard. Au revoir. 5. Première composante App: a tout le monde le soignant que vous regardez la vidéo que vous auriez dû regarder à part à nos premiers pas avec le réacteur. Oui, proche. Et dans cette classe, nous allons voir comment faire notre premier composant quand le faire sur la page et nous allons voir ce qui a été fait. Le festival ici j'ai ma sublime fenêtre texte avec notre projet ouvert. Tout d'abord, tu vas aller dans l'adultère. Oui, nous bougeons tout et pour défendre le chant indexé O J s. Donc, tout d' abord, dans l'application,les dans l'application, Thaci s qui vont orteils importent tout ce dont nous aurons besoin pour créer notre premier composant. Donc, nous allons importer, réagir et composant de réaction. La syntaxe ici est équivalente à import act. Nous agissons cette composante. Et en fait, je pourrais même blanc réagir composant point directement. Eh bien, premières raisons de simplicité. Nous allons importer le composant au Singleton. Ensuite, nous allons créer notre classe. C' est appelé comme il est un apt ou chaises cloche up étend composant. Donc c'est simple, Opie. Nous allons prolonger. Nous sommes proches du composant. Ensuite, si vous vous souvenez correctement dans la partie précédente, nous avons vu avoir à se demander quelque chose sur la page. C' est dans le métal de rendu. Créons une méthode de fenêtre. Souviens-toi, ça doit rendre un peu de sexe partagé, une sorte de dynamique. HTML. allons créer un poids à temps et nous utilisons Parentis est de faire un nettoyeur de disque. Donc, fondamentalement, nous allons écrire un simple H. composant « Notre Hello World » de Harry Lee. Sauvons tout maintenant nous allons finir, Docteur Chaos va importer. Réagissez encore une fois Ensuite, nous sommes importants de nous demander de la méthode du réacteur. Alors ils vont faire Wender. On peut vous GSX juste ici ? Oui, et réguler pour le rendre dans le document. Obtenir élément par 80 que. Ok, donc si on s'en occupe, tu ne vois pas quelque chose qui est pour moi ? Qu' est-ce qui se passe ? Pourquoi est-ce différent ? Ce n'est défini nulle part. Je viens de découvrir. C' est donc le genre de vierge que nous allons importer aussi. Importer vers le haut depuis la barre oblique du panier. Heureux de quoi ? Ce qu'elle est emballeuse saura. C' est difficile à faire dans ces partages, OK, alors essayons d'exécuter notre serveur Web de développement et de voir ce qui se passe, comme généralement remplir dans mon navigateur Web. Nous allons voir Oui, il y a un défaut d'exportation jamais et l'a soulevé avec pas trouvé vers le haut. Module vers le haut. Nous allons écouter cette heure et faire quelque chose comme l'exportation par défaut à disons, Oh, je reçois conteneur dans moins un domaine. Un homme en fait avant eu à créer ou élément. Donc, puisque ce n'est pas un élément, nous allons utiliser quelque chose qu'ils vont utiliser. Dutchman, ce corps que ça marche. Ah, composant est demandé. Ainsi, comme vous pouvez le voir, nous avons créé le composant leurs feuilles dans un seul module. Modèle de Che. Ensuite, nous avons importé ce composant dans notre fichier de base. Ensuite, nous avons la date de fenêtre sur la page. Vous pouvez aussi les femmes avec cette ligne et réellement écrire la classe par défaut d'exportation. Il a essayé. Tu vois, ça marche encore. Nous avons donc créé notre premier composant. Ensuite, écoutez, nous allons créer le deuxième composant, puis nous les faisons interagir les uns avec les autres par 6. Communication (Props) composant (Props): que tout le monde traite ici et bienvenue à la quatrième partie des premiers pas avec Reactor aussi proche . Elle se souvient correctement de la troisième partie de cette classe que nous devons savoir pour créer notre premier composant, et j'en ai 200 sur la page. Maintenant, nous allons voir comment créer un deuxième composant et le faire interagir avec le composant off up, comme c' composant off up, est votre Espérons qu'il monte notre eTour texté Et après les traders, nous avons eu deux séjours. Bonjour, monde. Utilisons juste un Deve et combattons ici bouton d'importation de mais Favor Basic. Maintenant, nous allons utiliser le composant bouton, que nous allons créer dans quelques instants, tout comme nous avons utilisé le composant apt dans notre combat de base. Alors, nous allons bouton blanc. On va dire que l'étiquette refroidit et que le monde entier, et on va habiller la marée. Vous devez vous rappeler que dans JSX, étiquettes d'écrêtage Moto sont très couramment utilisées. Disons ce dossier maintenant. Si vous vous en souvenez, nous devons créer notre composant bouton. Faisons un nouveau combat. Ça s'appelle ça. Mais alors l'arbre est tout comme pour l'application confiante peut importer, afficher à nouveau, et il est de créer notre coût sport par défaut Fermer le compartiment des extensions de bouton. Alors ils vont au blanc. Wender, nous tournons et ce sera un bouton de conversation HTML très basique. Mieux. Qu' est-ce qu'on attend maintenant ? Un autre bouton dont elle se souvient Nous avons déclaré ici, mais l'étiquette rampe. mots de maître. Alors, comment obtenons-nous ce travail mais va devoir utiliser les propriétés de la propriété du point de réaction qui réagissent composant sont récupérés dans la propriété props de la classe. On va l'extraire, Const. espoirs sont égaux à ça. Donc, il va utiliser des accessoires mais peut faire encore mieux. Conseil capable égal, différents pops. On va utiliser l'étiquette dans les accessoires et maintenant on va l'utiliser comme ça. Cela va écrire le bouton, puis notre étiquette et puis fermer la cravate tibétaine. Voyons comment ça marche. Nous y voilà. Nous avons un composant bouton. Vous pouvez cliquer dessus. Ça ne se passerait rien. Richard le Battat. Maintenant tu vas voir qu'on peut faire presque n'importe quoi dans les accessoires. Voyons voir, nous allons utiliser cette indentation pour avoir très propre appelé égal. Et maintenant que voulez-vous faire sur un rapide. On va vous voir la fonction. Disons que le bateau est propre et qu'on va déclarer quelque chose ici. Quelque chose est égal à la fonction. Fenêtre de fonction simple point Alert. J' avais raison. Ils pourraient avoir à utiliser la fusion anonyme ici, mais nous allons utiliser ce quelque chose de très propre. Non. Qu' est-ce qu'on fait ? Rappelez-vous, nous pouvons utiliser la défense des chiots. Un clic, et maintenant ils vont dire sur rapide égalé un clic. D' accord. Comment ça marche. Un clic, j'ai été rapide. Ce composant est connu marche et peut interagir avec un composant présent. Tu peux peut-être faire quelque chose comme ça. Quelque chose ici. Disons, par exemple, , qu'on m'a cliqué sur eux. De plus, disons que non, écoutez, nous allons faire ce point sur le clic 10e en un clic. Il appelle cela que peut-être que sur clic, nous allons dire sur clic aujourd'hui. Vous pouvez passer des arguments à n'importe quelle fonction que vous mettez dans les propriétés. Donc, ce le spot de propriété dans la partie suivante de dans l'état comment interagir avec le composant lui-même 7. Utiliser l'État: Salut, tout le monde. Bienvenue à environ cinq de ces premiers jours pour trois. En fait, c'est proche, si vous vous souvenez correctement à l'étape précédente, nous avons vu comment créer un deuxième composant et lui donner d'interagir sans premier composant. Maintenant, nous allons interagir avec le composant lui-même en utilisant. L' état devrait se souvenir de la vidéo d'introduction correctement, indiquer catégoriquement un objet que la réaction observée pour gagner la chose tout ce dont il a besoin. Alors, comment pouvons-nous rapidement succession ? Ouvrons notre Je croyais qu'elle a viré. L' état est déclaré dans le constructeur des composants. C' est un constricteur, peut-être des propriétés, et ça s'appelle des super chiots. Donc que re réellement initialiser les propriétés politiquement, un état membre de classe est égal. Et puis nous avons un objet étape que différent spectacle infini à partir de maintenant c'est la force. Ok, j'ai créé un membre de l'État. Comment l'utilisons-nous ? Souviens-toi, c'est un peu comme des accessoires. C' est pour ça que Const montre Dave. Il appelle ça l'état. Nous avons récupéré des heures. Vous a montré un membre de l'État. Comment l'utilisons-nous ? Quelque chose comme ce spectacle, Dave. Et je suis là, le Deer Show. Oh, salut. Cool à partir de ça. Normalement, il ne devrait pas être loué. L' amour là-bas. Comment avons-nous Data State ? Maintenant, ils vont à vous. L' ensemble State Metal. Regarde ça. Au lieu de partager dans le let, nous allons mettre à jour grillé. Elle n'a pas sauvé ST. Et le premier périmètre est un objet. Ce sera l'état à mettre à jour. Donc on va voir la date des orteils, si c'est tout à fait vrai. Non, nous voyons l'état des données réactives et une date qu'une seule partie. Ils l'ont montré parce que dans l'état à mettre à jour Je veux juste mettre à jour l'a montré. Ok, laisse-le. Maintenant, essayons de donner un coup de pied sur le bouton. D' accord. Sur la profondeur pour montrer une hauteur. Mais si on clique à nouveau, il a volé ici ? Je voulais me cacher. Est-ce que je fais ça essentiellement en parlant de l'état. Regarde ça. Si j'écris, n'a pas déclaré qui a montré là Il pourrait être penser que ne changera pas car il sera toujours adapté à votre valeur de chose, qui est quatrième au début. Mais si je fais cela, nous avons pris tout l'état Maintenant sur le premier clic qui est montré qu'ils peuvent cliquer sur le Davis caché, qui est ce que nous voulons maintenant. Je profite de l'occasion pour vous montrer quelque chose avec réaction. Vous pouvez toujours utiliser pour le vent ou quelque chose. Ecoute, ce ver jusqu'à l'étape 3. C' est une carte sombre, Deb. Et puis on se demande quelque chose ici. Qu' est-ce qu'on se demande quelle fenêtre il, mais et haut Cool. Maintenant, on peut faire quelque chose. Prêt, salope. Intérêt. Er baignoire actuelle juste ici. Nous avons donc déclaré un nouveau membre d'un État. Mettez-le ici. Mort actuelle. Non. Et c'est ce que c'est pour le récupérer. Cool. Maintenant, comment interagissons-nous avec elle ? Fondamentalement comme un mais sur clic. Et appelons ceci qui dit Children, Doug, temps que je crée ici en fonction anonyme. Le dossier, mon dit courant a admis. C' est créé, dit Smith. Corrente. Tab, qu'est-ce que je fais ? Je fais la même chose aux deux. Je suis en train de mettre à jour l'état. Écoute, ça dit le courant de l'Etat Tad dur. Et maintenant je suis en train de mettre à jour sur Lee le courant. membre de la chose que je ne mets pas à jour vous a montré et avec le spectacle Brookly David, pas le courant des rencontres. Alors jetons un coup d'oeil. Un mot sous a fait pour montrer ou cacher, et ici que rien, parce que vous que jusqu'à trois chaud. Et si j'avais la défécation ? Le top est pour vous ici comme nous le voulions parce que nous avons seulement un spectacle daté Le membre de l'Etat n'a pas assez réduit pour obtenir pour cette partie de. J' ai dit non au cours de la nuit que nous allons voir comment créer quelque chose d'un peu plus intéressant et faire en forme de prière ici en utilisant des styles C. 8. Ajouter des styles CSS: Hey, tout le monde viendra en plastique sur la dernière partie de cette réaction Js classe 1ère 8 avec réacteur. Pourtant, dans la partie précédente, nous n'avons rien vu à agir dans le cadre de notre propre composante. Maintenant, nous allons le rendre plus joli en utilisant des styles CSS. Non, comme vous vous demandez réagir vous permet de créer de belles éducations. Mais maintenant, les applications ont l'air gentil. Ouais, moche. Donc, nous allons ajouter une touche CSS à elle. Mais comment on va ? Voir l'évaluation du réacteur. Nous ne pouvons pas utiliser une pile serrée à l'intérieur. Je partageais six. Ce n'est pas beau. En fait, la plupart des utilisateurs réagissent utilisent dans les styles légers. Oui. Basic dans les dés lumières au lieu d'utiliser close est comme normalement vous le feriez avec HTML. Nous utilisons principalement des balises de démarrage à l'intérieur car cela vous permet d'avoir plus de contrôle sur ce que vous avez commencé. Fais ça maintenant. Ok, créons une valeur de style. Maintenant, nous allons dire, comme par exemple, Tab, Ce sera la barre supérieure elle-même. Comme sur la couleur. Ils vont dire « pas génial ». Certains électeurs peuvent être un choix, donc je vais utiliser du noir. Ok, alors maintenant comment on l'utilise d'abord, Dave serré. Ce sera la barre supérieure. Maintenant, on va aux pieds où ça a commencé, égal à meurt. Baignoires pour voir cette Brooke ont créé sur Taba qui n'aime pas gris par sol une bordure noire d'un pixel . On peut en faire un peu plus. C'est en cour dentaire correctement. Disons commencer appelle style bain singler parce que ce serait une seule fois. Jetez un oeil à ça. Je ne peux pas. Kohler. Nous allons utiliser la bordure grise réelle d'un pixel uniquement noir à nouveau. Mais cette fois, nous allons dire frontière bas zéro. Vous pouvez utiliser n'importe quoi en CSS. Mais vous avez juste à utiliser des soucis de chameau au lieu de cas de trait d'union. Comment puis-je utiliser quelque chose comme le travail qu'il transforme ? En fait, vous pouvez utiliser la transformation d'arme comme ça. Mets-le dans la rue. Alors, comment ça ressemble maintenant de créer une nouvelle partie CSS pour les robinets ? Cool. Vous pouvez faire peut-être un peu plus de marge. Zéro séparation zéro nuit serait très concentrée. Cool. C' est un peu trop Compressez-le dedans. C' est ce que j'ai. Step cool. Maintenant, nous avons une baignoire fraîche. C' est juste là. Peut-être que vous pouvez avoir un peu plus de rembourrage ici encore. Mettez-en 10 et on ne veut pas caresser. Autre bas mettant zéro. Cool. Quoi ? La bouteille a l'air assez efficace maintenant, n'est-ce pas ? Il a l'air vertical, et nous pouvons aussi le rendre un peu meilleur. Oui, nous avons un onglet actuel dans l'état. Nous pouvons l'utiliser pour ajouter plus de style. Ok, donc nous allons créer une nouvelle entrée pour un sujet CSS qui est coincé comenta. Il va avoir un sac jaune sur la couleur. Ce n'est pas joli, mais c'est pour l'exemple. Donc, si vous vous souvenez correctement, c'est le serveur d'objet jaloux gardé. Alors, comment pouvons-nous créer un nouvel objet ? On va utiliser la mission. Pensé à l'objet. Fermer Objected. Un signe. Je suis sujet Tyler Tab, et nous allons dire style, pas onglet actuel. Ok, maintenant tous les robinets ont les robinets actuels sont morts. Comment prendre ce courant d'utilisateur simple de la propriété qui viennent de l'état ? Souviens-toi, avec le courant de toi, ce truc puis je viens de mourir cet objet de script de coquille en cours tandis que la femme à une chaise vide . Un objet de script. Voyez, maintenant aucun de nos robinets n'a commencé le type actuel. Donnons un coup de pied à ce look actuel sélectionné. On peut faire quelque chose d'un peu plus intéressant. Comme la couleur bleue son bleu. Maintenant, vous savez comment créer une application de réaction très simple. Vous pensez que les propriétés état et le style CSS. C' est tout ce dont vous avez besoin pour créer une application très simple. Maintenant, je vais créer un autre cours un peu plus avancé dans réagir. Amusez-vous bien. Et n'oubliez pas de m'envoyer votre projet de classe. Vous trouverez ci-dessous une description au revoir.