30 Days Of React
1.0.0
Lernen Sie mit Asabeneh, indem Sie sich dem bevorstehenden Coding Bootcamp anschließen
Autor: Asabeneh noch
Oktober 2020
Tag 1 >>
| # Tag | Themen |
|---|---|
| 00 | Einführung Wie man Repo benutzt Anforderungen Aufstellen |
| 01 | JavaScript -Auffrischung |
| 02 | Erste Schritte reagieren |
| 03 | Einrichten |
| 04 | Komponenten |
| 05 | Requisiten |
| 06 | Liste, Karte und Schlüssel |
| 07 | Klassenkomponenten |
| 08 | Staaten |
| 09 | Bedingte Rendering |
| 10 | Projektordnerstruktur reagieren |
| 11 | Ereignisse |
| 12 | Formen |
| 13 | Kontrollierte und unkontrollierte Komponente |
| 14 | Lebenszyklen Komponenten |
| 15 | Pakete von Drittanbietern |
| 16 | Komponenten höherer Ordnung |
| 17 | Router reagieren |
| 18 | Fetch gegen Axios |
| 19 | Projekte |
| 20 | Projekte |
| 21 | Haken |
| 22 | Formulare mit Haken |
| 23 | Daten mit Haken abrufen |
| 24 | Projekt mit Haken |
| 25 | Benutzerdefinierte Haken |
| 26 | Kontext |
| 27 | Ref |
| 28 | Projekt |
| 29 | Erkunden |
| 30 | Schlussfolgerungen |
??? Happy Coding ???
Herzlichen Glückwunsch zur Entscheidung, an 30 Tagen der React -Programmierherausforderung teilzunehmen. In dieser Herausforderung lernen Sie alles, was Sie benötigen, um eine React -Anwendung zu entwickeln. Am Ende der Herausforderung erhalten Sie ein 30 -Tage -Programm für Programmier Challenge Completion Certification. Falls Sie Hilfe benötigen oder wenn Sie anderen helfen möchten, können Sie sich der Telegrammgruppe anschließen.
Eine 30 -Tage -Herausforderung ist ein Leitfaden für Anfänger und fortschrittliche JavaScript- und React -Entwickler. Willkommen zu 30 Tagen React. React ist eine JavaScript -Bibliothek. Ich benutze und unterrichte reagieren und hoffe, dass Sie dies auch tun werden. In diesem Schritt für Schritt, 30 Tage React Challenge, lernen Sie React, was eine der beliebtesten JavaScript -Bibliotheken der Benutzeroberfläche ist. React kann alles tun, was JavaScript tun kann. React kann verwendet werden , um Websites Interaktivität hinzuzufügen, mobile Apps, Desktop -Anwendungen und Spiele zu entwickeln . Ich glaube, Sie werden in den nächsten 30 Tagen ziemlich viel lernen und Ihre Programmier- und Problemlösungsfähigkeiten werden ebenfalls erheblich verbessert.
Ich werde Conversational English und weniger Jargone verwenden, um diese Herausforderung zu schreiben. Der Inhalt wird kontinuierlich aktualisiert. Wenn Sie einen Tippfehler oder Grammatikfehler finden, wenden Sie sich nicht überrascht, da ich keine Beweise mache, bevor ich ihn veröffentliche. Ich würde Ihnen empfehlen, sich auf die Hauptbotschaft der Herausforderung anstelle der Engländer und einige kleinere Fehler zu konzentrieren. Ich schätze es sehr, wenn Sie mir Verbesserungsanfragen schicken, und denken Sie daran, an erster Stelle vom Master zu ziehen, bevor Sie Pull -Anfragen senden. Die meisten Bilder, die ich in dieser Herausforderung verwendet habe, stammen aus der 30 -Tage -Herausforderung von 30 DaysofjavaScript. Wenn Sie gut in Arrays, Schleifen, Funktionen, Objekten, funktionaler Programmierung, Zerstörung und Ausbreitung und Klasse sind, können Sie der Herausforderung ordnungsgemäß befolgen. Andernfalls empfehle ich Ihnen dringend, 30DaysofjavaScript zu überprüfen.
Bevor Sie in diesen Kurs eintauchen, können Sie die Überprüfung von 30 Tagen React überprüfen.
Diese Herausforderung ist leicht zu lesen, in gesprächiger Englisch, engagiert, motivierend und gleichzeitig sehr anspruchsvoll. Sie müssen viel Zeit einsetzen, um diese Herausforderung zu beenden. Wenn Sie ein visueller Lerner sind, erhalten Sie möglicherweise die Videostunde auf dem YouTube -Kanal von Washera. Abonnieren Sie den Kanal, kommentieren Sie und stellen Sie Fragen auf YouTube Vides und seien Sie proaktiv. Der Autor wird Sie schließlich bemerken.
Der Autor hört gern Ihre Meinung über die Herausforderung und teilen Ihre Gedanken über die 30 -Tage -Herausforderung. Sie können Ihr Zeugnis auf diesem Link überlassen
Lernen Sie mit Asabeneh, indem Sie sich dem bevorstehenden Coding Bootcamp anschließen
Um mit der Herausforderung zu kommen, müssen Sie Folgendes haben:
Sterne dieses Repo mit, um diese Arbeit zu unterstützen und das Repo zu geben, um eine eigene Kopie zu erstellen, aus der er arbeitet.
Sie sollten immer direkt aus Ihrer Gabelkopie arbeiten.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactUm die täglichen Übungen abzuschließen, ist mein Vorschlag, einen separaten Zweig zu erstellen, um Ihren Übungsordner oder andere von Ihnen vorgenommene Änderungen unterzubringen. Dadurch wird Ihr Master -Zweig jederzeit sauber gehalten, was bedeutet, dass Ihr Meister immer dem ursprünglichen Meister ähnelt.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existIn Ihrer neuen Niederlassung können Sie Dateien/Ordner verwenden, um Ihre Lösungen für tägliche Übungen zu strukturieren
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileVerpflichten Sie Ihre Lösungen für Ihre Gabel
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierDieses Repo wird den ganzen Monat über täglich aktualisiert. Wenn ein neuer Inhalt eines neuen Tages verfügbar ist, können Sie Ihre Gabelkopie mit den folgenden Schritten aktualisieren.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterBeachten Sie, dass die Updates nur auf den Master -Zweig angewendet werden. Wenn Sie einen anderen Zweig aktualisieren möchten, wiederholen Sie die Schritte 6-7 mit dem Zweignamen. Siehe Snippet unten für
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsIch glaube, Sie haben die Motivation und den starken Wunsch, Entwickler, Computer und Internet zu sein. Zusätzlich zu dieser grundlegenden bis mittleren HTML, CSS und JS. Wenn Sie diese haben, haben Sie alles, um loszulegen.
Möglicherweise benötigen Sie momentan keinen Node.js, aber Sie benötigen es möglicherweise für später. Installieren Sie Node.js.
Nach dem Herunterladen von Doppelklick und Installation
Wir können überprüfen, ob der Knoten auf unserem lokalen Computer installiert ist, indem wir unseren Geräteklemme oder die Eingabeaufforderung öffnen.
asabeneh $ node -v
v12.14.0Bei diesem Tutorial habe ich die Knotenversion 12.14.0 verwendet, aber jetzt ist die empfohlene Version von Node.js zum Download 12.17.0.
Es gibt viele Browser da draußen. Ich empfehle jedoch nachdrücklich Google Chrome.
Installieren Sie Google Chrome, wenn Sie noch keine haben. Wir können einen kleinen JavaScript -Code auf die Browserkonsole schreiben, verwenden jedoch nicht die Browserkonsole, um Anwendungen zu entwickeln.
Sie können die Google Chrome -Konsole entweder öffnen, indem Sie in der oberen rechten Ecke des Browsers klicken, weitere Tools auswählen -> Entwickler -Tools oder eine Tastaturverknüpfung. Ich bevorzuge Verknüpfungen.
So öffnen Sie die Chromkonsole mit einer Tastaturverknüpfung. Es ist gut, die Abkürzung als JavaScript und React -Entwickler zu kennen, dass Sie viel Zeit mit einer Browserkonsole verbringen und nicht faul sein werden, um sie während der Entwicklung zu öffnen.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Nachdem Sie die Google Chrome -Konsole geöffnet haben, versuchen Sie, die markierten Schaltflächen zu erkunden. Wir werden die meiste Zeit auf der Konsole verbringen. Die Konsole ist der Ort, an dem Ihr JavaScript -Code geht. Die Google Console V8 Engine ändert Ihren JavaScript -Code in den Maschinencode. Lassen Sie uns einen JavaScript -Code in die Google Chrome -Konsole schreiben:
Wir können jeden JavaScript -Code auf die Google -Konsole oder eine beliebige Browserkonsole schreiben. Für diese Herausforderung konzentrieren wir uns jedoch nur auf die Google Chrome -Konsole. Öffnen Sie die Konsole mit:
Mac
Command+Option+I
Windows:
Ctl+Shift+IUm unseren ersten JavaScript-Code zu schreiben, haben wir eine integrierte Funktionskonsole () verwendet. Wir haben ein Argument als Eingabedaten übergeben, und die Funktion zeigt die Ausgabe an. Wir haben 'Hallo, Welt' als Eingabedaten oder Argument in der Funktion console.log () bestanden.
console . log ( 'Hello, World!' ) Die Funktion console.log () kann mehrere durch Kommas getrennte Parameter aufnehmen. Die Syntax sieht wie folgt aus: console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Wie Sie aus dem obigen Snippet -Code sehen können, kann Console.log () mehrere Argumente aufnehmen. Es wird empfohlen, so viele Konsolen zu verwenden. Machen Sie Ihr Leben einfach, indem Sie die Browserkonsole offen halten.
Wir fügen unserem Code Kommentare hinzu. Kommentare sind sehr wichtig, um Code lesbarer zu machen und Bemerkungen in unserem Code zu hinterlassen. JavaScript führt den Kommentarteil unseres Codes nicht aus.
Beispiel: Einzelzeilenkommentar
// Dies ist der erste Kommentar
// Dies ist der zweite Kommentar
// Ich bin ein einzelner Zeilenkommentar
Beispiel: Multiline Kommentar
/* Dies ist ein multiline Kommentar
Multiline -Kommentare können mehrere Zeilen einnehmen
JavaScript ist die Sprache des Webs
*/
Programmiersprachen ähneln den menschlichen Sprachen. Englisch oder viele andere Sprache verwendet Wörter, Sätze, Sätze, zusammengesetzte Sätze und andere mehr, um eine aussagekräftige Nachricht zu vermitteln. Die englische Bedeutung der Syntax ist die Anordnung von Wörtern und Phrasen, um gut geformte Sätze in einer Sprache zu erstellen . Die technische Definition der Syntax ist die Struktur von Aussagen in einer Computersprache. Programmiersprachen haben Syntax. JavaScript ist eine Programmiersprache und hat wie andere Programmiersprachen eine eigene Syntax. Wenn wir keine Syntax schreiben, die JavaScript versteht, erhöht sie verschiedene Arten von Fehlern. Wir werden später verschiedene Arten von JavaScript -Fehlern untersuchen. Lassen Sie uns im Moment Syntaxfehler sehen.
Ich habe einen absichtlichen Fehler gemacht. Infolgedessen erhöht die Konsole Syntaxfehler. Tatsächlich ist die Syntax sehr informativ. Es informiert, welche Art von Fehler gemacht wurde. Durch das Lesen der Fehlerfeedback -Richtlinie können wir die Syntax korrigieren und das Problem beheben. Der Prozess der Identifizierung und Entfernung von Fehlern aus einem Programm wird als Debugging bezeichnet. Lassen Sie uns die Fehler beheben:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )Bisher haben wir gesehen, wie man Text mit der console.log () anzeigt. Wenn wir Text oder Zeichenfolge mit Console.log () drucken, muss sich der Text in den einzelnen Zitaten, Doppelzitaten oder einem Backtick -Zitate befinden. Beispiel:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Lassen Sie uns nun mehr JavaScript -Codes mit Console.log () auf Google Chrome -Konsole für Zahlendatentypen üben. Zusätzlich zum Text können wir auch mathematische Berechnungen mit JavaScript durchführen. Lassen Sie uns die folgenden einfachen Berechnungen durchführen. Die Konsole kann direkt Argumente ohne die Funktion von Console.log () aufnehmen. Es ist jedoch in dieser Einführung enthalten, da der größte Teil dieser Herausforderung in einem Texteditor stattfinden würde, bei dem die Verwendung der Funktion obligatorisch wäre. Sie können direkt mit Anweisungen auf der Konsole herumspielen.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Wir können unsere Codes auf die Browser -Konsole schreiben, aber es wird nicht für größere Projekte tun. In einer realen Arbeitsumgebung verwenden Entwickler verschiedene Code -Editoren, um ihre Codes zu schreiben. In dieser 30 -tägigen JavaScript -Herausforderung werden wir Visual Studio -Code verwenden.
Visual Studio Code ist ein sehr beliebter Open-Source-Texteditor. Ich würde empfehlen, Visual Studio -Code herunterzuladen, aber wenn Sie für andere Redakteure zugunsten sind, können Sie mit Ihren haben, was Sie haben.
Wenn Sie Visual Studio -Code installiert haben, können Sie ihn verwenden.
Öffnen Sie den Visual Studio-Code, indem Sie auf das Symbol klicken. Wenn Sie es öffnen, erhalten Sie diese Art von Schnittstelle. Versuchen Sie, mit den beschrifteten Symbolen zu interagieren.
Glückwunsch! Sie haben das Setup abgeschlossen, den Sie benötigen, um mit React zu beginnen, aber bevor wir in React eintauchen, machen wir eine JavaScript -Auffrischung. Wenn Sie sich mit JavaScript sehr wohl fühlen, können Sie Tag 1 JavaScript Refresher überspringen. Der Abschnitt JavaScript Refresher ist riesig und kann mehr als einen Tag dauern. Nach meiner Erfahrung bleiben die Menschen normalerweise in React stecken, da ihr JavaScript -Wissen sehr flach ist, um diese Lücke zu füllen, die alle erforderlichen JavaScript -Merkmale, die in React verwendet werden können, im Abschnitt JavaScript Refresher verwendet werden. Es gibt viele Übungen, aber Sie müssen sie nicht lösen. Klicken Sie hier, wenn Sie JavaScript überspringen möchten und direkt in React springen möchten.
? GLÜCKWUNSCH ! ?
Tag 1 >>
