Erste Schritte mit React.js

1. Einführung: jeder. Ich bin Julian. Viel Spaß mit dem Looker Inferenz. Ich bin frei und seit Anfang des Jahres 2017 und jetzt wurde ich Sketcher kontaktiert, die kommen, um eine erste Online-Klasse zu machen. Und ich freue mich sehr, Ihnen meine Fortschritte zu zeigen. Mein erster Online-Test wäre mit reagierter Verfolgungsjagd. Es ist ein guter Rahmen, um von 10 Arbeit zu tun. Wir werden mehr im Detail sehen, was wir tun können. Die Online-Klasse wird ein Klassenprojekt enthalten, genau wie fast jeder andere Kurs auf Skillshare . Und wir werden es während des Kurses machen. Wenn Sie dem Kurs folgen, sollten Sie normalerweise in der Lage sein, dieses Klassenprojekt ohne Fehler abzuschließen. Wie auch immer, wenn Sie mir Ihr Klassenprojekt wirklich in Kreatur schicken wollen, um es zu tun, so dass ich Ihre Fehler auf nehmen kann vielleicht geben Sie einige Punkte der Verbesserung oder so etwas, es wird wirklich machen Sie das Gefühl, dass Sie Fortschritte gemacht haben weil Sie Feedback zu Ihrer Arbeit haben würden. Und ich genieße es wirklich. Wenn sie zu mir zurückstand, weil es mir zeigen wird, dass ich einen guten Club gemacht habe. Wie Sie sehen können, benutze ich es, um in sechs meiner Crew zu erzählen. Sie haben auch meinen PC hier. Ich werde es nicht für diese Klasse verwenden. Haben wir den Mac benutzt? Aber das ist kein Militär. Ich werde Ihnen alles erklären, um mit reagieren zu beginnen. Ich hoffe, Sie werden die Schulen genießen. Amüsieren Sie sich gut. Die Jungs arbeiten weiter. 2. Was ist React.js?: Und wenn wir kommen zu diesem Kalb über tatsächlich wieder es ersten Schritt mit drei tatsächlich für Mord mit kreativen meine Facebook reagiert 2013. Es zielt darauf ab, einzelne Seite mit Anwendungen zu erstellen, und es verwendet eine virtuelle Tür, die fragt sehr schnell, was andere Stärke der reagiert. Es ermutigt Sie, Komponente zu verwenden, die sehr einfach sind. Packen Sie jeden Tag ab. Mein Mantel es verwenden es JSX als Vorlage, beharrlich Michelle, wie es Zehe Komplex. Gwendolyn Zustand einfach aufhören, und es verwendet seinen Veteran. Also, was wir in diesem Kurs gelernt haben, werden wir sehen, wie man aufhören zu arbeiten, wenn ich ging für den Reaktor umfasst Mulch A S und P M und der Schöpfer. Doch bis dahin werden wir sehen integrieren unsere erste Komponente macht grundlegende rendern es auf der Seite . Dann bringen wir die zweite Komponente, die ein Knopf sein wird. Und als wir in der Rückgabe waren das erste Abteil. Danach lernen wir, wie man zwischen Komponenten kommuniziert. Aber Sie denken, die Eigenschaften nach der Kommunikation zwischen Komponenten für Sie, Ich verstehe, wie innerhalb des Unternehmens zu interagieren. Aber es ist im Staat. Und um es zu beenden, wirklich, sehen Sie Hilfe zu machen. Ich fühle mich hübscher. Dieser Kurs wird auch ein Klassenprojekt enthalten, das wie ein einfacher Hähnchenschnitt bestehen wird . Wir müssen sowohl Eigenschaften als auch Staat verwenden, und Sie müssen mir einen Mantel schicken, damit ich ihn begehen kann. 3. Umwelt einrichten: alle, die wir anfangen werden. Unser Echt ist eigentlich Klasse. Zuerst gehen wir zu ihm, also würden alle zwei. Wir müssen unsere erste Reaktion beginnen. Also zuerst werden wir nicht wissen, keine Stühle auf Ihrem Web-Browser und Kopf davon eine berüchtigte , dass funktionieren. Dann gehen Sie zu den Teignotizen Abschnitt gut zur aktuellen Wanne und dem Intellekt Fragen zu beantworten, die auf Ihren Betrieb Dienstag zeigen. Mike es. Es wäre meine Frage Starter. Sie können Windows Installer Leanings, Binärdateien verwenden. Ich werde die Installation auf Lenox nicht abdecken, da UNIX-Benutzer jetzt beleidigen können , da der hintere Bereich nicht gesagt hat, dass sie es öffnen werden. Dieses Paket veröffentlicht auf Notorious und NPM en PM's in Note Paket. Militär. Es wäre nützlich, andere Pakete wie React zu installieren, zum Beispiel, weiter. Kommen Sie zu neuen, akzeptieren Sie die Lizenz und dann gerade die Installation abgeschlossen. Schauen Sie sich nichts an. Es wird installiert und wir werden aus der Box arbeiten. Der Scheck. Wenn Ihre Installation erfolgreich war Evident Terminal und geben Sie Knoten Dash V Dies wird geben. Vielleicht und ich habe ein wenig anders als das, aber es sollte mindestens 8,9 Punkt eins sein. Zum Zeitpunkt der Aufnahme, Die Video-Division der Note ist 8.9 Punkt eins. Das ist ein Scheck. Wenn NPM nicht gedacht wird, dass es sollte, kann 5,5 Punkt eins jetzt vielleicht anders sein. Sie werden eine sehr bequem zu ihren Äpfeln einfügen. Beginnen Sie unsere erste Reaktion. Dies wird uns helfen, eine Entwicklung davon zu haben, die sich erholen. Zuerst laden wir CSS freeloading und leben damit. Vielleicht ein in einer anderen Klasse erholt. Wie Sie Ihre erste eine eigene Entwicklung überhaupt bekommen. Aber das ist ein sehr kompliziertes Thema, und konzentrieren wir uns auf den wichtigsten für jetzt, den Code in Ihrem Terminal Typ NPM. Installieren Sie Dashti auf statt global, damit Sie es verwenden können. Andere reguläre kommen und der Name der Pakete erstellen reagieren auf. Wie Sie sehen können, wurde das Paket lokal bekannt. Jetzt werde ich es verwenden, um zu reagieren, dass das erste Argument dieses Befehls der Name Ihres Projekts sein wird , um sie zu vergessen, bevor sie tippen. Unser erstes Projekt hat Bean installiert. Sie haben wahrscheinlich eine andere im Auge gestellt, weil ich Young installiert haben, das ist ein anderes Paket von militärischen Fußnote. Es reißt Sie installierte Pakete fester. Nein, lassen Sie uns in unsere Scotia-Direktorial gehen, wo das Projekt Bitte öffnen Sie Ihren Code-Editor meinen Kredit oder ist erhabenen Text suchen mit etwas, das Sie mögen? Ich sagte mir, die coole Wahl für reagieren. Wie Sie sehen können, gibt es viele komplizierende Dinge in diesem Verzeichnis, aber wir werden es für jetzt auf einfache Weise in Ihrem Terminal verwenden. Oder Sie können PM run eingeben. Beginnen Sie mit kurzen NPM-Aktien, die das gleiche tun, wie Sie sehen können. Es öffnet eine neue Registerkarte in meinem Web-Browser, weil es Mittagessen ist die Entwicklung überhaupt, sondern lädt auch die erste Seite. Willkommen zu reagieren, um es zu starten SRC Erwachsenen ja und sicher nachladen. Hören wir uns die Art und Weise an, wie sich beide öffnen. Abdo ändert sich. Sie können sehen, dass es ein bisschen kompliziert ist, aber wir werden nur die Entwicklung von dort aus ausprobieren. etwas ist es nicht. Verschieben Sie das Fenster, um die Effektdatei anzuzeigen. Mein Bruder hat wieder geladen und unser Leben geleitet. Ich fühlte nicht den Weg für mich selbst. Es hat 32 selbst. Der erste Teil seiner Klasse ist vorbei. Ich werde Sie im zweiten Punkt zurückbringen, um zu verstehen, wie reagieren funktioniert. 4. Einführung in Komponenten: Hey, alle, wenn Sie sich das Video ansehen, sollten Sie keine konkurrierende Tradition des Reaktors berüchtigt arbeiten. Und so sollten Sie wissen, dass reagieren O. J s arbeitet mit Komponenten. Also in diesem Hören, werden wir lernen und verstehen. Komponente ist im Grunde etwas, das Sie wieder verwenden müssen und etwas, das Sie in Ihrer do-Komponente teilen können , um auf diese Weise etwas nützlicher und testbarer zu haben. Für kompetenten Rex werden Sie nicht auf Ihre Website aufbrechen. Wenn sie etwas vorführen können, habe ich sie. Ist die Website-Arten von oder bish war noch Sprachgespräch Wie wir weiterhin sehr grundlegendes Beispiel, diese grüne Balken direkt hier könnte ein Header aufgerufen werden, zum Beispiel und es ist im Grunde reagieren Komponente und Sie klicken auf die Hähne. Es öffnet neue Seiten und aktualisieren Sie sein tun hier Ihre kontinuierliche dafür. Also im Grunde ist dies eine Komponente, die ganze Sache, die Komponente und sogar ein einzelner Buchstabe. Ein einzelnes später und ein Zeichen aus der Komponente. Die Filter hier sind ebenfalls Bestandteil. Die Sache, die Sie haben, um Alistair ist, dass Komponenten haben keinen Zugriff auf zusätzliche Ihre Umgebung. Sie müssen mit dem Finale kommunizieren oder sogar Komponente bestellen. Wir werden sehen, wie es funktioniert, in einer anderen Lektion. Also, jetzt, wie diese Offenheit Komponente bewusst waren Komponente ist im Grunde GSX auf einem Teil des Codes. Also lassen Sie uns öffnen unsere Also jetzt haben wir unsere können direkt handeln, die eine, die früher erstellt wurde, die ein frechtiges Verzeichnis in zwei geöffnet hat, wie ein Patraeus, damit Sie es sehen können. Ist es da drüben? Grundsätzlich ist es sechs in der Nähe, die später in grundlegenden Keks übersetzt werden würde. Integrierte erweitert Komponente und Komponente reagiert. Kreuz. Es hat im Grunde alles, was Sie brauchen, um Ihre Komponente zu verwenden. Die Rendermethode ist, was die Komponente gezeigt hat. Beeilen Sie sich, visuell zu verwenden. Habe es zurückgekehrt. Dosierbar, welche Fenster? Alles, was Sie in Ihrem Bauteil benötigen. So verwenden Sie GSX. Es ist ein wenig anders als HTM sind, weil, wie Sie sehen können, zum Beispiel, genau hier haben wir nicht weiß nah. Er ruft besser an. Welchen nahen Namen? Weil ihr Header, wo wir mit Christus landen, weil die Tastatur in der Nähe ist mit dem Schlüsselwort in Ihrem Geschlecht, so dass wir brauchen, um ah Klassenname Attribut haben müssen. Es gibt ein Listenaus-Attribut, das Sie mit respondieren anstelle von regulären Attributen verwenden müssen. Ah, der, an den ich zum Beispiel denken kann , ist ah html vier. Für ein Label wie zum Beispiel, Label html vier jeder Ihrer Zeit t 80 Sie haben eine komplette mindestens auf, was Sie als Tribut auf offizielle Reaktionsdokumentation verwenden können . Es gibt einen buchstäblich Osten, aber man gewöhnt sich daran. Und wenn Ihr Webentwicklungsserver korrekt konfiguriert ist, warnen wir Sie tatsächlich vor der Verwendung falscher Attributnamen. Okay, bist du also aufgeregt, dich mit einer Bauteil-Leichtigkeit zu sehen? Jetzt weißt du ein bisschen, wie es funktioniert. Jetzt werden wir unsere erste Komponente in der nächsten Lektion erstellen. Ich sehe dich später. Tschüss. 5. Erste App: hatte jeder ihn behandelt, dass du dir das Video ansiehst, das du auseinander gesehen haben solltest, um unsere ersten Schritte mit Reaktor abzuschalten. Ja, in der Nähe. Und in dieser Klasse werden wir sehen, wie wir unsere erste Komponente machen, wenn es auf der Seite tun und wir werden sehen, was getan wurde. Das Festival hier habe ich mein erhabenes Textfenster mit unserem Projekt offen. Zuallererst wirst du in Ehebruch gehen. Ja, wir bewegen alles und zu verteidigen indizierte O J s. Also, vor allem, in App, Thaci s, die Zehe gehen importieren alles, was wir brauchen, um unsere erste Komponente zu erstellen. Also werden wir importieren, reagieren und Komponenten von reagieren. Die Syntax hier ist äquivalent zum Import reagieren. Wir handeln diese Komponente. Und eigentlich könnte ich sogar weiße Punktkomponente direkt reagieren. Nun, erste Einfachheit Gründe. Wir werden die Komponente im Singleton importieren. Dann werden wir unsere Klasse schaffen. Das nennt es sich, wie es eine apt oder Stühle Nahaufnahme erweitert Komponente ist. Das ist also einfach, Opie. Wir werden ausdehnen. Wir sind nah an der Komponente. Dann, wenn Sie sich richtig erinnern, im vorherigen Teil haben wir gesehen haben, um etwas auf der Seite zu fragen . Es ist im Rendermetall. Lassen Sie uns eine Fenstermethode erstellen. Denken Sie daran, es muss etwas teilen Sex, eine Art off dynamisch. HTML. Lassen Sie uns ein Gewicht auf Zeit zu schaffen und wir verwenden Parentis ist, um eine Platte sauberer zu machen. Also im Grunde werden wir ein einfaches H schreiben. Harry Lee ist unsere Hello World Komponente. Lass uns alles retten, jetzt gehen wir zu Ende, Doktor Chaos wird importieren. Reagieren Sie noch einmal, dann sind wir wichtig, uns von der Reaktormethode zu fragen. Also werden sie Wender aufmachen. Kannst du gsx hier? Ja, und regulieren, um es im Dokument zu rendern. Holen Sie Element von 80, dass. Okay, wenn wir damit machen, siehst du nicht etwas, das für mich ist? Was ist los? Warum ist es anders? Es ist nirgends definiert. Ich habe es gerade herausgefunden. Das ist also die Art von Jungfrau, die wir auch importieren werden. Importieren Sie den Schrägstrich der Transportkiste nach oben. Glücklich zu was? Was sie Packager ist, wird wissen. Es ist schwer, in diesen Aktien zu tun, Okay, also lasst uns versuchen, unseren Entwicklungswebserver laufen und sehen, was passiert, wie normalerweise in meinem Webbrowser füllen. Wir werden sehen, Ja, es gibt einen nie Export-Standard und brachte es mit nicht gefunden. Modul nach oben. Wir werden uns diese Stunde anhören und so etwas wie Export-Standard bei sagen wir, Oh, ich bekomme Container in weniger einer Domäne. Ein Mann tatsächlich, bevor bekam zu erstellen oder Element. Da es also kein Element war, werden wir etwas verwenden, das sie verwenden werden. Holländer, die Leiche funktioniert. Ah, Komponente ist gefragt. So, wie Sie sehen können, haben wir Komponente ihre Blätter in einem einzigen Modul erstellt. Che s Modell. Dann haben wir diese Komponente in unsere Basisdatei importiert. Dann haben wir Fenster Datum auf der Seite. Sie könnten auch Frauen mit dieser Zeile und tatsächlich Export-Standardklasse schreiben. Es hat versucht. Siehst du, es funktioniert wieder. So haben wir jetzt unsere erste Komponente erstellt. Als nächstes hören, werden wir die zweite Komponente erstellen, und dann bekommen wir sie, um miteinander zu interagieren, indem 6. Components (Props): haben alle hier behandelt und willkommen, vier erste Schritte mit Reactor so nah zu teilen . Sie erinnert sich richtig an den Teil drei dieser Klasse, die wir wissen müssen, um unsere erste Komponente zu erstellen , und ich habe 200 auf der Seite. Jetzt werden wir sehen, wie Sie eine zweite Komponente erstellen und es mit off up Komponente interagieren , wie es Ihre Lassen Sie uns hoffen, dass es unsere SMS eTour und nach Händlern, wir hatten zwei Aufenthalte. Hallo, Welt. Lasst uns einfach einen Deve verwenden und lasst uns hier kämpfen Import-Button von aber Favor Basic. Jetzt werden wir die Tastenkomponente verwenden, die wir in wenigen Augenblicken erstellen werden, genau wie wir apt-Komponente in unserem Basiskampf verwendet haben. Also lasst uns weißen Knopf. Wir werden sagen, dass es kühlt und die Welt beschriftet, und wir werden die Flut kleiden. Sie müssen sich daran erinnern, dass in JSX Moto Clipping-Tags sehr häufig verwendet werden. Sagen wir jetzt diese Akte. Wenn Sie sich erinnern, müssen wir unsere Schaltflächenkomponente erstellen. Lasst uns einen neuen Kampf erschaffen. Es nennt es. Aber dann ist der Baum genau wie für die App zuversichtlich importieren kann, Anzeige wieder, und es ist unsere Kosten Sport Standard Schließen Taste Grenzen Fach erstellen. Also gehen sie zu weiß. Wender, wir drehen uns und es wird eine sehr einfache HTML-Button Talk-Button sein. Besser. Also, was warten wir jetzt? Ein weiterer Knopf, den sie sich erinnern, Wir haben hier erklärt, aber beschriftet es kriecht. Handler-Worte. Also, wie bekommen wir diese Arbeit, aber wir müssen die Eigenschaften der Reaktionspunkt-Eigenschaft verwenden , die Komponente reagieren, werden in der Requisiten Eigenschaft der Klasse abgerufen. Wir werden es extrahieren, Const. Hoffnungen sind gleich. Es wird also Requisiten verwenden, kann aber noch besser sein. Rat in der Lage gleich, verschiedene Pops. Wir werden das Etikett in den Requisiten verwenden und jetzt werden wir es so verwenden. Dies wird Knopf zu schreiben, dann unser Etikett und dann schließen tibetische Krawatte. Mal sehen, wie es funktioniert. Hier sind wir. Wir haben eine Tastenkomponente. Sie können darauf klicken. Das würde nichts passieren. Richard, der Battat. Jetzt wirst du sehen, dass wir fast alles in den Requisiten machen können. Mal sehen, wir werden diese Einrückung verwenden, um sehr sauber genannt gleich zu haben. Und jetzt, was wollen Sie auf einem auf eine schnelle tun. Wir gehen zu Ihnen die Funktion. Sagen wir, das ist das Boot sauber und wir werden hier etwas erklären. Etwas entspricht der Funktion. Einfaches Funktionsfenster Punkt Alert. Ich hatte recht. Sie könnten hier anonyme Fusion verwenden müssen, aber wir werden das etwas sehr sauberes benutzen. Nein, nein. Was machen wir denn? Denken Sie daran, wir können die Verteidigung von Welpen verwenden. Ein Klick, und jetzt werden sie auf schnelle gleich einen Klick sagen. Ok. Wie es funktioniert. einem Klick war ich schnell. Diese Komponente ist bekannt zu Fuß und kann mit einer vorhandenen Komponente interagieren. So etwas kannst du vielleicht machen. Etwas hier drauf. Sagen wir, zum Beispiel, ähm, die ich geklickt wurde. Plus Okay, sagen wir, Sie Nein , schau, wir werden diesen Punkt auf Klick 10 im Jahr einen Klick machen. Er nennt dies, dass vielleicht, dass auf Klick wir heute auf Klick sagen werden. Siehe, Sie können Argumente an jede Funktion übergeben, die Sie in den Eigenschaften einfügen. Dies ist also die Eigenschaft Spot im nächsten Teil von in den Zustand, wie man mit der Komponente selbstinteragiert Komponente selbst 7. Zustand verwenden: Hallo, alle. Willkommen zu etwa fünf dieser ersten Tag für drei. Eigentlich ist es in der Nähe, wenn Sie sich im vorherigen Schritt richtig erinnern, haben wir gesehen, wie man eine zweite Komponente erstellt und es ohne erste Komponente interagiert . Jetzt werden wir mit der Komponente selbst interagieren, indem wir. Der Staat sollte sich an das Einführungsvideo richtig erinnern, nachdrücklich ein Objekt angeben, dass Reaktion beobachtet, um das Ding zu gewinnen, was es braucht. Wie können wir schnell nachkommen? Öffnen wir unsere Ich dachte, sie hätte gefeuert. Der Status wird im Konstruktor der Komponenten deklariert. Es ist eine Verengung, vielleicht Eigenschaften, und es wird Super-Welpen genannt. Damit die Eigenschaften tatsächlich politisch initialisiert werden, ist ein Klassenmitgliedstaat gleich. Und dann haben wir ein Schrittobjekt, das verschiedene unendliche zeigen Ab jetzt ist es Kraft. Okay, ich habe ein Staatsmitglied angelegt. Wie verwenden wir es? Denk dran, es ist ein bisschen wie Requisiten. Deswegen zeigt Const Dave. Er nennt diese Zustand, jetzt haben Wir Stunden geholt. Ich habe dir ein Mitglied des Staates gezeigt. Wie verwenden wir es? So etwas wie diese Show, Dave. Und da bin ich, die Deer Show. Oh, hallo. Cool davor. Normalerweise sollte es nicht gemietet werden. Liebe dort. Wie haben wir Data State? Jetzt gehen sie zu dir. Das Set State Metal. Sieh dir das an. Anstatt in das Lassen zu teilen, werden wir getoastet aktualisieren. Sie hat ST nicht gerettet. Und der erste Umfang ist ein Objekt. Es wird der Status sein, der aktualisiert werden soll. Also gehen wir Toe Date zeigte, wenn das ganz stimmt. Nein, wir sehen den reaktiven Datenstatus und ein Datum Nur ein Teil. Sie zeigten es, weil in dem Zustand aktualisiert werden Nur wollen zu aktualisieren zeigte es. Okay, lass es. Versuchen wir nun, auf den Knopf zu treten. Ok. Auf der Tiefe, um eine Höhe zu zeigen. Aber wenn wir noch einmal klicken, hat er hier gestohlen? Ich wollte mich verstecken. Tu ich das im Grunde, indem ich den Staat rede. Sieh dir das an. Wenn ich schreibe, gab nicht an, dass es gezeigt Es könnte denken, dass sich nicht ändern wird, da es immer passen Ihre Sache Wert, die vierte am Anfang. Aber wenn ich das tue, nahmen wir den ganzen Zustand Jetzt auf dem ersten Klick, der gezeigt wird, dass sie auf die Davis versteckt klicken können , was wir jetzt wollen. Ich nutze diese Gelegenheit, um Ihnen etwas mit React zu zeigen. Sie können immer verwenden, um Wind oder so. Schau , der Wurm bis zu Schritt drei. Es ist eine dunkle Karte, Deb. Und dann fragen wir uns etwas an dieser Stelle genau hier. Was für eine eine Frage, was Fenster es, aber und top Cool. Jetzt können wir etwas tun. Bereit, Miststück. Interesse. Er aktuelle Wanne genau hier. Also haben wir ein neues Mitglied eines Staates erklärt. Legen Sie es hier. Aktueller Tod. Nein. Und es ist, was es hier ist, um es zurück zu bekommen. Cool. Wie interagieren wir damit? Grundsätzlich wie ein, aber auf Klick. Und nennen wir das, was Kinder sagt, Doug, Zeit, die ich hier in anonymer Funktion erschaffe. Die Aufzeichnung, meine sagte Strom zugegeben. Das ist erschaffen, sagte Smith. Corrente. Tab, was mache ich? Ich mache das Gleiche bei den beiden. Ich aktualisiere den Staat. Schau, das sagte Staatsstrom Tad hart. Und jetzt aktualisiere ich auf Lee die aktuelle. Das Mitglied der Sache, die ich nicht aktualisiere, hat dir gezeigt und mit der Brookly-Show David, nicht die Dating-Strömung. Also schauen wir uns mal an. Ein Wort unter hat getan, um zu zeigen oder zu verstecken, und hier, dass nichts, weil Sie, dass bis drei warm. Was, wenn ich den Stuhlgang hätte? Das Top ist für Sie hier, wie wir wollten, weil wir nur eine datierte Show haben Das Staatsmitglied hat nicht genug gemindert, um für diesen Teil zu bekommen. Ich habe in der Nacht nein gesagt, dass wir sehen werden, wie man etwas interessanteres kreiert und es zum Gebet hier passt, indem man C Stile benutzt. 8. CSS Stile hinzufügen: Hey, jeder wird auf dem letzten Teil dieser reagieren Js Klasse 1. 8 mit Reaktor zu Plastik kommen. Doch im vorangegangenen Teil haben wir nichts gesehen, um innerhalb unserer eigenen Komponente zu handeln. Jetzt werden wir es schöner machen, indem wir CSS-Stile verwenden. Nein, wie Sie sich fragen reagieren ermöglicht es Ihnen, schöne Erziehungen zu schaffen. Aber jetzt sieht Anwendungen nett aus. Ja, hässlich. Also werden wir CSS-Touch hinzufügen. Aber wie machen wir das? Siehe Bewertung des Reaktors. Wir können nicht einen Stapel dicht im Inneren verwenden. Ich würde sechs teilen. Es ist nicht schön. Eigentlich reagieren die meisten Benutzer in Lichtstilen verwenden. Ja. Basic in Lichtern Würfel statt schließen zu verwenden, ist wie normalerweise Sie mit HTML tun würden. Wir verwenden hauptsächlich Inland-Start-Tags, weil es Ihnen erlaubt, mehr Kontrolle über das zu haben, was Sie begonnen haben. Tun Sie das sofort. Okay, lassen Sie uns einen Stil-Wert erstellen. Jetzt werden wir sagen, wie zum Beispiel, Tab, Tab, Dies wird die obere Leiste selbst sein. Wie auf Farbe. Sie werden sagen, nicht großartig. Einige Wähler mögen eine Wahl sein, also, aber ich werde schwarz verwenden. Okay, jetzt, wie benutzen wir es zuerst, Dave eng. Dies wird die obere Leiste sein. Jetzt gehen wir dahin, wo es angefangen hat, gleich stirbt. Wannen, um diese Brooke zu sehen, haben über Taba erstellt, die nicht wie grau durch Boden einen Pixel schwarzen Rand. Wir können ein bisschen mehr machen, das ist im Zahngericht richtig. Nehmen wir an, starten Sie Anrufe Stil Wanne Singler, weil es ein einziges Mal sein würde. Werfen Sie einen Blick auf das. Ich kann nicht. Kohler. Wir werden tatsächliche graue Grenze ein Pixel ausschließlich schwarz wieder verwenden. Aber dieses Mal werden wir sagen Grenze unten Null. Sie können tatsächlich alles in CSS verwenden. Aber Sie müssen nur Kamel Pflege anstelle von Bindestrich Fall verwenden. Wie verwende ich so etwas wie Arbeit es transformieren? Eigentlich können Sie Waffen-Transformation so verwenden. Legen Sie es einfach auf die Straße. Wie sieht es jetzt aus, einen neuen CSS-Teil für Taps zu erstellen? Cool. Du kannst vielleicht ein bisschen mehr Spielraum machen. Null-Abschied Nullnächte wäre sehr konzentriert. Cool. Das ist ein bisschen zu komprimieren es darin. Das ist es, was ich habe. Schritt kühl. Jetzt haben wir eine coole Wanne. Sind genau hier. Vielleicht kannst du hier wieder ein bisschen mehr Polsterung haben. Setzen Sie 10 ein und wir wollen kein Streicheln. Andere untere Putting Null. Cool. Was? Die Flasche sieht jetzt ziemlich effizient aus, nicht wahr? Es sieht vertikal aus, und wir können es auch ein bisschen besser machen. Ja, wir haben eine aktuelle Registerkarte im Zustand. Wir können es verwenden, um mehr Stil hinzuzufügen. Okay, also werden wir einen neuen Eintrag für ein CSS-Thema erstellen, das Comenta beschichtet ist. Es wird eine gelbe Tasche auf Farbe haben. Es ist nicht schön, aber es ist zum Beispiel. Also, wenn Sie sich richtig erinnern, dies die eifersüchtige gehalten Objekt Kellner. Wie erstellen wir also ein neues Objekt? Wir werden den Auftrag nutzen. Ich dachte an das Objekt. Schließen Sie Widerspruch. Ein Schild. Ich bin Subjekt Tyler Tab, und wir sagen Stil, nicht aktuelle Registerkarte. Okay, jetzt sind alle Wasserhähne die aktuellen Wasserhähne gestorben. Wie nehmen wir diesen einfachen Benutzerstrom von Eigentum, die aus dem Staat kommen? Denken Sie daran, mit dem Strom von Ihnen, dieses Zeug, dann starb ich gerade das aktuelle Shell-Skript-Objekt, während die Frau auf einem leeren Stuhl. Ein Skriptobjekt. Siehe, Jetzt hat keiner unserer Taps den aktuellen Typ gestartet. Lassen Sie uns diesen Look aktuell ausgewählt treten. Wir können es etwas in etwas interessanterem tun. Wie die Farbe blau sein Blau. Jetzt wissen Sie, wie Sie eine sehr einfache Reaktionsanwendung erstellen. Sie denken, Eigenschaften Zustand und CSS-Stil. Dies ist alles, was Sie brauchen, um eine sehr einfache Anwendung zu erstellen. Jetzt werde ich einen anderen Kurs ein wenig fortgeschrittener in reagieren erstellen. Viel Spaß. Und vergiss nicht, mir dein Klassenprojekt zu schicken. Eine Beschreibung finden Sie unten auf Wiedersehen.