react exercise
1.0.0
Diese Übung ist für Sie vorgesehen, um sich mit grundlegenden Reaktionskonzepten auf interaktive Weise vertraut zu machen, sowie Sie, um sich in einer modernen Node.js -Umgebung wohl zu entwickeln. Dieses Projekt wird in mehrere Teile unterteilt. Jeder Teil deckt ein grundlegendes React/Frontend -Konzept ab.
Der Leitfaden von React Anfänger und der Anfänger -Leitfaden für React sind sehr vorteilhaft, um ein vollständiges Verständnis für React -Grundlagen zu erhalten. Es wird auch von Vorteil sind, im Rahmen dieser Übung bequemes Eintauchen in React -Dokumente und JavaScript -Dokumente zu erreichen.
Installieren Sie hier Knoten und NPM.
Überprüfen Sie, ob Sie die richtigen Versionen haben, indem Sie die folgenden Befehle in Ihrem Terminal ausführen:
node -v
npm -v
Installieren Sie die React Devtools, um leicht zu debuggen und zu sehen, was in Ihrer React -App vor sich geht.
Ihr Texteditor unterstützt möglicherweise nicht nativ die in diesem Projekt verwendete JSX -Syntax. Es kann jedoch Plugins geben, um eine ordnungsgemäße Syntax -Hervorhebung zu erhalten. Zum Beispiel verwendet Sublime Text das Babel -Plugin.
Geben Sie zuerst dieses Repository. Die Gabeltaste oben rechts. Dies kopiert dieses Repository auf Ihr Konto. Jetzt sollten Sie ein Repository mit dem Namen <yourusername>/react-exercise haben.
Es sollte so aussehen (mein Benutzername ist Davidachang): 
Klonen Sie dann dieses Repository (klicken Sie auf die grüne Schaltfläche "Klonen oder Download", wählen Sie HTTP und kopieren Sie es und fügen Sie sie den Speicherort <url> ein) und gehen Sie darauf ein:
$ git clone <url>
$ cd react-exercise
Projektabhängigkeiten installieren:
npm install
Danach führen Sie dies aus, um mit der Entwicklung zu beginnen:
npm start
Dadurch wird die App ausgeführt und sie automatisch unter http: // localhost: 3000 geöffnet. Immer wenn Sie den Code ändern und speichern, wird er automatisch neu geladen! Dies bleibt ein laufender Vorgang in Ihrem Terminal, sodass Sie eine neue Registerkarte oder ein neues Fenster öffnen müssen, um andere Befehle auszuführen.
Schöner ist ein Tool, das Ihren Code automatisch neu formatiert, um eine bestimmte Reihe von Richtlinien für Codierungsstile zu befolgen. Es ist so konfiguriert, dass es vor jedem Commit automatisch ausgeführt wird. Dies stellt sicher, dass all unser Code den gleichen Codestilen folgt, um gute Praktiken durchzusetzen und Konflikte zu minimieren.
Für diese Übung ist es definitiv nicht erforderlich, aber es gibt hübschere Plugins, die Sie für Ihren Editor installieren können. Siehe Anweisungen hier.
Ziel: Machen Sie sich mit der JSX -Syntax, der Komponentenstruktur und den Passieren von Requisiten vertraut
Aufgaben:
shouldDisplayImage Instructions Ziel: Machen Sie sich mit Rendering -Listen und JavaScript -Array -Funktionen vertraut
Aufgaben:
items -Prop in die Instructions , die eine Liste von Zeichenfolgen enthältitems anfor oder while Schleifen zu verwendenZiel: Machen Sie sich mit dem Komponentenzustand vertraut
Aufgaben:
Countercount auf 0Ziel: Machen Sie sich mit den Benutzereingaben vertraut
Aufgaben:
App.js eine Eingabe und eine Sendel -Schaltfläche, die einen initialCount -Status festlegtinitialCount -Zustand als Prop in die Counter ein und verwenden Sie diesen Wert als anfängliche count im Counter . Achten Sie darauf, wie Sie dies tun, da die Benutzereingabe eine String ist und wir eine Number einsenden möchten.<button type="button" ... Ziel: Verstehen Sie die Kommunikation von Zustand/Requisiten zwischen Geschwisterkomponenten
Aufgaben:
input und Sendentaste in eine eigene Komponente, die als InitialCountForm bezeichnet wird und ein Kind der App -Komponente istZiel: Machen Sie CSS/SCSS und Styling vertraut
Aufgaben: Nichts Spezifisches, spielen Sie mit Styling herum!
Hinweis: Sie können SCSS -Dateien erstellen, die beim Speichern automatisch mit CSS -Dateien zusammengestellt werden. Sie müssen jedoch die CSS -Datei in Ihre Komponente importieren.
Einige Styling -Ressourcen:
Der Leitfaden des React Anfängers
MDN - Eine Wiedereinführung in JavaScript
Der Anfängerleitfaden zum Reagieren
Reagieren Dokumente
Airbnbs JavaScript Style Guide
Airbnbs React Style Guide
Airbnbs CSS Style Guide
Wenn Sie mit all den Schritten fertig sind, drücken Sie Ihre Änderungen in Ihr Github -Repo!
Bevor Sie eine PR einreichen können, müssen Sie Ihre Filiale in eine abgelegene Filiale bringen (die auf Github und nicht lokal).
Überprüfen Sie, ob Sie in Ihrer Niederlassung sind:
git branch
Wenn Sie sicherstellen möchten, dass alle Ihre Commits in:
git log
Drücken Sie Q , um den git log zu beenden.
Schieben Sie Ihre Commits in Ihre Remote -Filiale:
git push
Wenn Sie dies zum ersten Mal tun, erhalten Sie möglicherweise einen Fehler, da Ihre Remotezweig noch nicht vorhanden ist. Normalerweise werden Sie den richtigen Befehl zur Verwendung angezeigt:
git push --set-upstream origin <YOUR_BRANCH_NAME>
HINWEIS: Dies muss nur erledigt werden, wenn Sie zum ersten Mal einen neuen Zweig schieben. Sie können danach nur git push verwenden.
Sobald dies erledigt ist, senden Sie bitte eine E -Mail an [email protected] mit dem Link zu Ihrem Forked Repository und Ihrem Filiallamen. Wir brauchen diese beiden Dinge, um Ihre Einreichung anzusehen.
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
