Zum Anzeigen und Bearbeiten unseres Codes benötigen wir einen Editor. Ich empfehle die Verwendung von Visual Studio Code,
einer kostenlosen, sehr leistungsfähigen IDE, die sich hervorragend für die Javascript-Entwicklung eignet. Dies tun wir am
Ende hier.
Sie können es aus Code erhalten. Visualstudio. Dort finden
Sie Versionen für Mac, Windows und Linux. Laden Sie einfach die Version für Ihr Betriebssystem
herunter und führen Sie das Installationsprogramm durch, das Sie erhalten. Sobald Sie es installiert haben, öffnen Sie Visual Studio
Code und öffnen Sie dort Ihr Projekt, indem Sie in die Datei open gehen und dann einfach
Ihr Projekt auswählen, in meinem Fall rn-first-app. Klicken Sie hier öffnen und das
Projekt wird jetzt hier in Visual Studio Code geöffnet. Jetzt sieht mein Visual Studio-Code so aus, wie er hier aussieht, da ich
ein spezielles Thema aktiviert habe, das Sie unter Einstellungen, Farbthema ändern können, und dort verwende ich das dunkle Plus-Thema.
Wenn Sie also das gleiche Aussehen
haben möchten, können Sie das verwenden, und ich habe auch eine spezielle Erweiterung installiert, die
Sie unter Ansichtserweiterungen ausführen können. Dort habe ich das Material-Symbol-Thema installiert. Dieses hier ist völlig optional, aber Sie können
es von
installieren Auch dort und danach kehren Sie zum Explorer zurück,
um Ihre Dateien erneut anzuzeigen, sodass
Sie die gleichen Dateisymbole wie hier erhalten. Auch dies ist völlig optional. Damit ist dies unsere von expo verwaltete React Native-App.
Lassen Sie sich jetzt schnell durch das führen, was wir hier haben, und Ihnen dann zeigen, was Sie im Code
ändern können, um etwas in Ihrer App zu ändern.
Jetzt haben wir hier ein paar Ordner
und Dateien, die. Der Expo-Ordner enthält nur
eine Konfiguration für die Expo. Sie müssen diese nicht berühren. Der Assets-Ordner, der in diesem Fall einige Bilder enthält, wie das
Symbol Ihrer App und das Begrüßungsbildschirmbild, und wir werden uns mit dem Anpassen befassen, wie Sie dies gegen Ende des Kurses anpassen können, und wir
werden andere Assets wie Bilder in verwenden allgemein während dieses Kurses natürlich. Der Ordner für Knotenmodule enthält alle Abhängigkeiten dieses
Projekts, z. B. React und React Native, aber auch die Abhängigkeiten von Abhängigkeiten. Dieser Ordner wird
automatisch für Sie verwaltet, sodass Sie ihn nicht berühren müssen und ihn
in der Tat nicht berühren sollten . gitignore ist eine Datei, die uns bei git
hilft, einem Quellcodeverwaltungssystem oder einem Quellcodeverwaltungswerkzeug, und Sie müssen git nicht verwenden. Wenn Sie dies tun,
wissen Sie wahrscheinlich, was gitignore tut und wenn Sie nicht wissen, was git ist, dass Sie nach
dieser Vorlesung eine kurze Einführung oder einige Ressourcen finden, die Ihnen den Einstieg erleichtern, aber Sie müssen git nicht
verwenden, um mit React Native zu arbeiten. Watchmenconfig, das können Sie ignorieren, wenn Sie sehen, dass es hier leer ist. Es ist ein
Tool, das hinter den Kulissen von expo am Ende und der App verwendet wird. js-Datei dann die Datei, die den
Code enthält, der für das Rendern der hier auf dem Bildschirm angezeigten Daten verantwortlich ist.
Wir werden gleich darauf eingehen, App. json hat eine Konfiguration für unsere React Native-App, die von expo unterstützt
wird, und wir werden uns auch in diesem Kurs damit befassen. Lassen Sie es uns ignorieren. Babel config konfiguriert, wie der Javascript-Code
optimiert und kompiliert wird. Sie können den Standard auch hier
und das Paket belassen. Die json-Datei verwaltet Ihre Abhängigkeiten und dort sehen
Sie, dass Sie expo verwenden, aber auch React, auch React DOM, da expo tatsächlich auch das Erstellen von React-Apps für das Web unterstützt, dann
aber auch React Native hier und React Native web, da expo Ihnen erneut die Option bietet Wir werden uns
in diesem Kurs jedoch nicht darauf konzentrieren, Web-Apps mit Hilfe von React Native zu erstellen.
Das ist also das Setup, das wir hier
haben. Die wichtige Datei für uns im Moment ist die App. js Datei, weil das am Ende dafür verantwortlich ist,
dass etwas auf den Bildschirm kommt.
Nun den genauen Dateiinhalt, den Sie hier in Ihrer App sehen. Die js-Datei kann sich jedoch im Laufe
der Zeit ändern. Dieses Startprojekt, das automatisch generiert wird, wird manchmal einfach geändert.
Das hat natürlich keinen Einfluss darauf, was ich hier oder in diesem Kurs erkläre. Es bedeutet nicht, dass etwas
veraltet ist oder so, es ist
nur ein anderes Startprojekt, und wenn Sie genau
dem folgen möchten, das ich bekommen habe, Sie ' Ich finde es im Anhang, also kannst du es auch verwenden, aber
natürlich kannst du auch mit den Zuschauern weitermachen, wenn es etwas anders aussieht, denn wie ich
bereits erwähnt habe, ist es nur ein Startprojekt, das
du hast. React Native funktioniert natürlich immer noch genauso wie Ich habe es hier erklärt und
deshalb kannst du dem absolut folgen und deine App hinzufügen. js-Datei genau so, wie ich sie hinzugefügt habe, und
dort sehen wir, dass wir React genauso importieren, wie wir es in einer React-Web-App tun würden.
Wir müssen React importieren, da Sie hier auch sehen können, dass wir jsx verwenden. Dies ist diese
spezielle Javascript-Syntax, die wie
HTML aussieht, aber am Ende nur Javascript
ist. Falls Sie dies nie gesehen haben, tauchen Sie definitiv in eine React-App oder React ein Ich erwarte
zunächst, dass Sie wissen, wie React im Allgemeinen funktioniert.
Wir haben hier immer einen anderen Import und das ist der React Native-Import, bei dem wir Stylesheet, Text
und Ansicht von dort importieren.
Dies sind die speziellen Komponenten und Funktionen, über die ich bereits gesprochen habe. Text und
Ansicht sind Komponenten von React Native, die zu nativen Plattform-Widgets kompiliert wurden. Das Stylesheet ist eine zusätzliche Funktion
von React Native, die Sie beim Stylen unterstützt.
Dann haben wir hier eine normale React-Komponente, wie wir sie auch in einer React for Web-App erstellen würden.
Wir haben hier eine Funktionskomponente und mit Hilfe von React-Hooks können wir nur mit Funktionskomponenten arbeiten,
wie Sie wahrscheinlich wissen, und diese Funktionskomponente gibt etwas jsx-Code zurück, der auf dem Bildschirm gerendert
wird, und
hier verwenden wir das Ansichts-Widget oder Die von React Native bereitgestellte Ansichtskomponente und die Textkomponente sowie
die Ansichtskomponente sind wie ein Div.
Sie sind ein guter Wrapper. Sie eignen sich auch zum Anwenden einiger Stile für einige Container und zum Erkennen
von Text, der zwischen die Öffnung und eingefügt wird Tags schließen.
Und hier unten haben wir einige Stile definiert. React Native verwendet kein CSS, verwendet jedoch
eine auf CSS basierende Stilsyntax oder folgt ähnlichen Namenskonventionen. Wir werden uns jedoch in diesem Kurs eingehender mit
dem Stil Ihrer React Native-Apps befassen natürlich.
Lassen Sie uns also ändern, was wir auf dem Bildschirm sehen, und hier tatsächlich eine Schaltfläche hinzufügen.
Das Gute ist nun, dass wir eine Schaltfläche aus React Native importieren können, eine weitere Kernkomponente von React Native, sodass wir diesen Import
hinzufügen und dann dort unten eine Schaltfläche verwenden können. Wir verwenden es jedoch nicht mit einem öffnenden
und schließenden
Tag, sondern als selbstschließendes Element. Anschließend können wir hier eine Titelstütze hinzufügen, um den Text festzulegen, den
wir auf einer Schaltfläche sehen, z. B. Text ändern.
Wenn wir jetzt auf diese Schaltfläche tippen, möchten wir möglicherweise diesen Text hier ändern. Dazu
müssen wir hier einen Status verwalten, da ich einige Daten ändern möchte, die dazu führen sollen, dass
diese Komponente erneut gerendert wird. Dazu benötigen Sie den Status .
Jetzt vor Reaktion 16. 8, die hier jedoch unterstützt wird, müssten Sie dies in eine klassenbasierte Komponente
konvertieren, um StateState zu verwenden, da React 16. 8, wir können React-Hooks verwenden
und falls Sie nicht wissen, was Hooks sind, sollten
Sie sich auf jeden Fall mit den Grundlagen von Hooks befassen. Im Anhang
finden Sie Ressourcen, mit denen Sie beginnen können. Hooks werden aus React importiert. Hier benötigen wir den useState-Hook, mit dem
wir den Status in einer Funktionskomponente verwalten können.
Damit können wir diesen Hook verwenden, indem wir hier useState aufrufen und ihm einen Standardwert geben, der dieser Text hier sein kann. Schneiden wir ihn
von dort unten ab
und fügen ihn hier als Zeichenfolge hinzu. Dann können wir hier die Array-Destrukturierung verwenden, um unsere Ausgabe zu
erhalten Text und erhalten eine Funktion zum Ändern oder Zurücksetzen oder Überschreiben dieses Ausgabetextes. So funktioniert der useState-Hook. Er
bietet Ihnen ein Array mit genau zwei
Elementen, wobei das erste Element Ihr aktueller Status-Snapshot ist, also entweder unser Startstatus oder danach Für
nachfolgende Re-Rendering-Zyklen ist alles, worauf wir unseren Status setzen, und die zweite eine Funktion, mit der
Sie
Ihren Status auf einen neuen Wert setzen können. Wenn Sie diese Funktion aufrufen, wird
die gesamte Komponente erneut gerendert, und der Ausgabetext bezieht sich dann auf den neuesten neuer Staat.
Hier zwischen Text möchte ich also Ausgabetext ausgeben und durch Drücken dieser Taste möchte
ich dies ändern.
Auf der Schaltfläche können wir also onPress registrieren, was im Grunde dem onClick entspricht, das
wir im Web
haben würden. Hier ist es onPress, und dann müssen wir dies an eine Funktion binden, zum Beispiel
an eine anonyme Inline-Funktion hier mit dieser Syntax wo wir set output text aufrufen und dies auf den geänderten Text setzen.
Dies ruft diese Funktion hier auf, überschreibt unseren Status und rendert diese Komponente
erneut. Dies wird im nächsten Renderzyklus aktualisiert. Da wir dort unten Ausgabetext ausgeben,
ändert sich dies. Wenn wir das alles jetzt
speichern, ist das Coole daran, dass Ihre App, die Sie noch auf Ihrem Telefon geöffnet haben sollten, automatisch neu geladen
werden
sollte. Sie müssen
sie nicht neu starten. Sie müssen diesen Code hier einfach nicht erneut scannen Wenn Sie den Code ändern und
diese Datei speichern, sollte sie hier automatisch neu geladen werden. Wenn wir jetzt hier auf Text ändern tippen, wird der Text geändert,
und dies ist Ihre erste React Native-App, die ihre Arbeit auf der Expo
erledigt. Sie können diese App jedoch auch als eigenständige App erstellen und veröffentlichen. Dies wird bis Ende des Jahres geschehen
Der Kurs und daher ist dies eine erstaunliche Möglichkeit, um loszulegen, und die Entwicklung von React Native kann so
einfach sein.
Lassen Sie uns nun dieses erste Modul beenden, bevor wir uns eingehender mit React Native
befassen und ab dem zweiten Kursmodul React Native-Code schreiben.