1
00:00:02,620 --> 00:00:08,140
Zum Anzeigen und Bearbeiten unseres Codes benötigen wir einen Editor. Ich empfehle die Verwendung von Visual Studio Code,

2
00:00:08,140 --> 00:00:13,480
einer kostenlosen, sehr leistungsfähigen IDE, die sich hervorragend für die Javascript-Entwicklung eignet. Dies tun wir am

3
00:00:13,480 --> 00:00:14,210
Ende hier.

4
00:00:14,290 --> 00:00:16,680
Sie können es aus Code erhalten. Visualstudio. Dort finden

5
00:00:16,720 --> 00:00:21,490
Sie Versionen für Mac, Windows und Linux. Laden Sie einfach die Version für Ihr Betriebssystem

6
00:00:21,790 --> 00:00:28,070
herunter und führen Sie das Installationsprogramm durch, das Sie erhalten. Sobald Sie es installiert haben, öffnen Sie Visual Studio

7
00:00:28,070 --> 00:00:34,390
Code und öffnen Sie dort Ihr Projekt, indem Sie in die Datei open gehen und dann einfach

8
00:00:34,390 --> 00:00:40,200
Ihr Projekt auswählen, in meinem Fall rn-first-app. Klicken Sie hier öffnen und das

9
00:00:40,220 --> 00:00:47,080
Projekt wird jetzt hier in Visual Studio Code geöffnet. Jetzt sieht mein Visual Studio-Code so aus, wie er hier aussieht, da ich

10
00:00:47,380 --> 00:00:51,950
ein spezielles Thema aktiviert habe, das Sie unter Einstellungen, Farbthema ändern können, und dort verwende ich das dunkle Plus-Thema.

11
00:00:51,970 --> 00:00:54,420
Wenn Sie also das gleiche Aussehen

12
00:00:54,670 --> 00:01:00,680
haben möchten, können Sie das verwenden, und ich habe auch eine spezielle Erweiterung installiert, die

13
00:01:00,760 --> 00:01:08,230
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

14
00:01:08,230 --> 00:01:09,550
es von

15
00:01:09,580 --> 00:01:13,480
installieren Auch dort und danach kehren Sie zum Explorer zurück,

16
00:01:13,510 --> 00:01:16,060
um Ihre Dateien erneut anzuzeigen, sodass

17
00:01:16,060 --> 00:01:24,290
Sie die gleichen Dateisymbole wie hier erhalten. Auch dies ist völlig optional. Damit ist dies unsere von expo verwaltete React Native-App.

18
00:01:24,300 --> 00:01:28,920
Lassen Sie sich jetzt schnell durch das führen, was wir hier haben, und Ihnen dann zeigen, was Sie im Code

19
00:01:29,190 --> 00:01:31,470
ändern können, um etwas in Ihrer App zu ändern.

20
00:01:31,470 --> 00:01:34,350
Jetzt haben wir hier ein paar Ordner

21
00:01:34,380 --> 00:01:37,570
und Dateien, die. Der Expo-Ordner enthält nur

22
00:01:37,590 --> 00:01:43,500
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

23
00:01:43,500 --> 00:01:49,470
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

24
00:01:49,470 --> 00:01:55,470
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

25
00:01:55,470 --> 00:02:01,120
Projekts, z. B. React und React Native, aber auch die Abhängigkeiten von Abhängigkeiten. Dieser Ordner wird

26
00:02:01,120 --> 00:02:05,740
automatisch für Sie verwaltet, sodass Sie ihn nicht berühren müssen und ihn

27
00:02:05,790 --> 00:02:11,460
in der Tat nicht berühren sollten . gitignore ist eine Datei, die uns bei git

28
00:02:11,460 --> 00:02:16,920
hilft, einem Quellcodeverwaltungssystem oder einem Quellcodeverwaltungswerkzeug, und Sie müssen git nicht verwenden. Wenn Sie dies tun,

29
00:02:16,920 --> 00:02:22,860
wissen Sie wahrscheinlich, was gitignore tut und wenn Sie nicht wissen, was git ist, dass Sie nach

30
00:02:22,860 --> 00:02:29,100
dieser Vorlesung eine kurze Einführung oder einige Ressourcen finden, die Ihnen den Einstieg erleichtern, aber Sie müssen git nicht

31
00:02:29,130 --> 00:02:34,530
verwenden, um mit React Native zu arbeiten. Watchmenconfig, das können Sie ignorieren, wenn Sie sehen, dass es hier leer ist. Es ist ein

32
00:02:34,530 --> 00:02:39,750
Tool, das hinter den Kulissen von expo am Ende und der App verwendet wird. js-Datei dann die Datei, die den

33
00:02:39,750 --> 00:02:45,930
Code enthält, der für das Rendern der hier auf dem Bildschirm angezeigten Daten verantwortlich ist.

34
00:02:46,590 --> 00:02:52,350
Wir werden gleich darauf eingehen, App. json hat eine Konfiguration für unsere React Native-App, die von expo unterstützt

35
00:02:52,350 --> 00:02:59,140
wird, und wir werden uns auch in diesem Kurs damit befassen. Lassen Sie es uns ignorieren. Babel config konfiguriert, wie der Javascript-Code

36
00:02:59,140 --> 00:03:04,950
optimiert und kompiliert wird. Sie können den Standard auch hier

37
00:03:04,950 --> 00:03:10,380
und das Paket belassen. Die json-Datei verwaltet Ihre Abhängigkeiten und dort sehen

38
00:03:10,700 --> 00:03:17,970
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

39
00:03:17,970 --> 00:03:23,910
aber auch React Native hier und React Native web, da expo Ihnen erneut die Option bietet Wir werden uns

40
00:03:23,910 --> 00:03:28,710
in diesem Kurs jedoch nicht darauf konzentrieren, Web-Apps mit Hilfe von React Native zu erstellen.

41
00:03:28,710 --> 00:03:30,600
Das ist also das Setup, das wir hier

42
00:03:30,600 --> 00:03:35,520
haben. Die wichtige Datei für uns im Moment ist die App. js Datei, weil das am Ende dafür verantwortlich ist,

43
00:03:35,790 --> 00:03:37,800
dass etwas auf den Bildschirm kommt.

44
00:03:37,800 --> 00:03:43,350
Nun den genauen Dateiinhalt, den Sie hier in Ihrer App sehen. Die js-Datei kann sich jedoch im Laufe

45
00:03:43,410 --> 00:03:48,390
der Zeit ändern. Dieses Startprojekt, das automatisch generiert wird, wird manchmal einfach geändert.

46
00:03:48,570 --> 00:03:53,520
Das hat natürlich keinen Einfluss darauf, was ich hier oder in diesem Kurs erkläre. Es bedeutet nicht, dass etwas

47
00:03:53,520 --> 00:03:55,300
veraltet ist oder so, es ist

48
00:03:55,350 --> 00:03:57,580
nur ein anderes Startprojekt, und wenn Sie genau

49
00:03:57,720 --> 00:04:03,130
dem folgen möchten, das ich bekommen habe, Sie ' Ich finde es im Anhang, also kannst du es auch verwenden, aber

50
00:04:03,150 --> 00:04:07,320
natürlich kannst du auch mit den Zuschauern weitermachen, wenn es etwas anders aussieht, denn wie ich

51
00:04:07,320 --> 00:04:09,870
bereits erwähnt habe, ist es nur ein Startprojekt, das

52
00:04:09,870 --> 00:04:14,250
du hast. React Native funktioniert natürlich immer noch genauso wie Ich habe es hier erklärt und

53
00:04:14,250 --> 00:04:19,770
deshalb kannst du dem absolut folgen und deine App hinzufügen. js-Datei genau so, wie ich sie hinzugefügt habe, und

54
00:04:19,770 --> 00:04:24,290
dort sehen wir, dass wir React genauso importieren, wie wir es in einer React-Web-App tun würden.

55
00:04:24,420 --> 00:04:30,630
Wir müssen React importieren, da Sie hier auch sehen können, dass wir jsx verwenden. Dies ist diese

56
00:04:30,630 --> 00:04:32,640
spezielle Javascript-Syntax, die wie

57
00:04:32,790 --> 00:04:35,390
HTML aussieht, aber am Ende nur Javascript

58
00:04:35,460 --> 00:04:42,120
ist. Falls Sie dies nie gesehen haben, tauchen Sie definitiv in eine React-App oder React ein Ich erwarte

59
00:04:42,270 --> 00:04:45,720
zunächst, dass Sie wissen, wie React im Allgemeinen funktioniert.

60
00:04:45,720 --> 00:04:51,270
Wir haben hier immer einen anderen Import und das ist der React Native-Import, bei dem wir Stylesheet, Text

61
00:04:51,360 --> 00:04:53,220
und Ansicht von dort importieren.

62
00:04:53,220 --> 00:04:59,640
Dies sind die speziellen Komponenten und Funktionen, über die ich bereits gesprochen habe. Text und

63
00:04:59,640 --> 00:05:06,720
Ansicht sind Komponenten von React Native, die zu nativen Plattform-Widgets kompiliert wurden. Das Stylesheet ist eine zusätzliche Funktion

64
00:05:06,720 --> 00:05:10,290
von React Native, die Sie beim Stylen unterstützt.

65
00:05:10,290 --> 00:05:15,820
Dann haben wir hier eine normale React-Komponente, wie wir sie auch in einer React for Web-App erstellen würden.

66
00:05:16,120 --> 00:05:21,960
Wir haben hier eine Funktionskomponente und mit Hilfe von React-Hooks können wir nur mit Funktionskomponenten arbeiten,

67
00:05:21,960 --> 00:05:28,110
wie Sie wahrscheinlich wissen, und diese Funktionskomponente gibt etwas jsx-Code zurück, der auf dem Bildschirm gerendert

68
00:05:28,200 --> 00:05:29,270
wird, und

69
00:05:29,400 --> 00:05:35,550
hier verwenden wir das Ansichts-Widget oder Die von React Native bereitgestellte Ansichtskomponente und die Textkomponente sowie

70
00:05:36,270 --> 00:05:38,790
die Ansichtskomponente sind wie ein Div.

71
00:05:38,790 --> 00:05:45,720
Sie sind ein guter Wrapper. Sie eignen sich auch zum Anwenden einiger Stile für einige Container und zum Erkennen

72
00:05:45,870 --> 00:05:50,030
von Text, der zwischen die Öffnung und eingefügt wird Tags schließen.

73
00:05:50,270 --> 00:05:57,090
Und hier unten haben wir einige Stile definiert. React Native verwendet kein CSS, verwendet jedoch

74
00:05:57,090 --> 00:06:04,890
eine auf CSS basierende Stilsyntax oder folgt ähnlichen Namenskonventionen. Wir werden uns jedoch in diesem Kurs eingehender mit

75
00:06:04,890 --> 00:06:08,550
dem Stil Ihrer React Native-Apps befassen natürlich.

76
00:06:08,550 --> 00:06:14,490
Lassen Sie uns also ändern, was wir auf dem Bildschirm sehen, und hier tatsächlich eine Schaltfläche hinzufügen.

77
00:06:14,490 --> 00:06:20,730
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

78
00:06:20,730 --> 00:06:26,140
hinzufügen und dann dort unten eine Schaltfläche verwenden können. Wir verwenden es jedoch nicht mit einem öffnenden

79
00:06:26,140 --> 00:06:27,280
und schließenden

80
00:06:27,280 --> 00:06:33,190
Tag, sondern als selbstschließendes Element. Anschließend können wir hier eine Titelstütze hinzufügen, um den Text festzulegen, den

81
00:06:33,460 --> 00:06:36,620
wir auf einer Schaltfläche sehen, z. B. Text ändern.

82
00:06:36,850 --> 00:06:41,010
Wenn wir jetzt auf diese Schaltfläche tippen, möchten wir möglicherweise diesen Text hier ändern. Dazu

83
00:06:41,200 --> 00:06:45,970
müssen wir hier einen Status verwalten, da ich einige Daten ändern möchte, die dazu führen sollen, dass

84
00:06:46,180 --> 00:06:49,680
diese Komponente erneut gerendert wird. Dazu benötigen Sie den Status .

85
00:06:49,900 --> 00:06:56,110
Jetzt vor Reaktion 16. 8, die hier jedoch unterstützt wird, müssten Sie dies in eine klassenbasierte Komponente

86
00:06:56,110 --> 00:07:00,270
konvertieren, um StateState zu verwenden, da React 16. 8, wir können React-Hooks verwenden

87
00:07:00,310 --> 00:07:03,710
und falls Sie nicht wissen, was Hooks sind, sollten

88
00:07:03,820 --> 00:07:08,620
Sie sich auf jeden Fall mit den Grundlagen von Hooks befassen. Im Anhang

89
00:07:08,620 --> 00:07:14,800
finden Sie Ressourcen, mit denen Sie beginnen können. Hooks werden aus React importiert. Hier benötigen wir den useState-Hook, mit dem

90
00:07:14,800 --> 00:07:17,290
wir den Status in einer Funktionskomponente verwalten können.

91
00:07:17,290 --> 00:07:26,230
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

92
00:07:26,230 --> 00:07:27,910
von dort unten ab

93
00:07:27,910 --> 00:07:34,420
und fügen ihn hier als Zeichenfolge hinzu. Dann können wir hier die Array-Destrukturierung verwenden, um unsere Ausgabe zu

94
00:07:34,420 --> 00:07:41,040
erhalten Text und erhalten eine Funktion zum Ändern oder Zurücksetzen oder Überschreiben dieses Ausgabetextes. So funktioniert der useState-Hook. Er

95
00:07:41,110 --> 00:07:43,800
bietet Ihnen ein Array mit genau zwei

96
00:07:43,840 --> 00:07:49,620
Elementen, wobei das erste Element Ihr aktueller Status-Snapshot ist, also entweder unser Startstatus oder danach Für

97
00:07:49,660 --> 00:07:55,510
nachfolgende Re-Rendering-Zyklen ist alles, worauf wir unseren Status setzen, und die zweite eine Funktion, mit der

98
00:07:55,510 --> 00:07:56,120
Sie

99
00:07:56,220 --> 00:08:01,300
Ihren Status auf einen neuen Wert setzen können. Wenn Sie diese Funktion aufrufen, wird

100
00:08:01,530 --> 00:08:07,150
die gesamte Komponente erneut gerendert, und der Ausgabetext bezieht sich dann auf den neuesten neuer Staat.

101
00:08:07,180 --> 00:08:13,670
Hier zwischen Text möchte ich also Ausgabetext ausgeben und durch Drücken dieser Taste möchte

102
00:08:13,680 --> 00:08:15,400
ich dies ändern.

103
00:08:15,400 --> 00:08:21,250
Auf der Schaltfläche können wir also onPress registrieren, was im Grunde dem onClick entspricht, das

104
00:08:21,310 --> 00:08:22,640
wir im Web

105
00:08:22,660 --> 00:08:29,020
haben würden. Hier ist es onPress, und dann müssen wir dies an eine Funktion binden, zum Beispiel

106
00:08:29,020 --> 00:08:36,740
an eine anonyme Inline-Funktion hier mit dieser Syntax wo wir set output text aufrufen und dies auf den geänderten Text setzen.

107
00:08:36,820 --> 00:08:42,340
Dies ruft diese Funktion hier auf, überschreibt unseren Status und rendert diese Komponente

108
00:08:42,340 --> 00:08:48,100
erneut. Dies wird im nächsten Renderzyklus aktualisiert. Da wir dort unten Ausgabetext ausgeben,

109
00:08:48,100 --> 00:08:51,520
ändert sich dies. Wenn wir das alles jetzt

110
00:08:51,520 --> 00:08:58,840
speichern, ist das Coole daran, dass Ihre App, die Sie noch auf Ihrem Telefon geöffnet haben sollten, automatisch neu geladen

111
00:08:58,850 --> 00:08:59,390
werden

112
00:08:59,390 --> 00:09:00,830
sollte. Sie müssen

113
00:09:00,920 --> 00:09:08,090
sie nicht neu starten. Sie müssen diesen Code hier einfach nicht erneut scannen Wenn Sie den Code ändern und

114
00:09:08,150 --> 00:09:15,320
diese Datei speichern, sollte sie hier automatisch neu geladen werden. Wenn wir jetzt hier auf Text ändern tippen, wird der Text geändert,

115
00:09:15,320 --> 00:09:19,020
und dies ist Ihre erste React Native-App, die ihre Arbeit auf der Expo

116
00:09:19,040 --> 00:09:24,590
erledigt. Sie können diese App jedoch auch als eigenständige App erstellen und veröffentlichen. Dies wird bis Ende des Jahres geschehen

117
00:09:24,740 --> 00:09:30,110
Der Kurs und daher ist dies eine erstaunliche Möglichkeit, um loszulegen, und die Entwicklung von React Native kann so

118
00:09:30,110 --> 00:09:30,850
einfach sein.

119
00:09:31,150 --> 00:09:36,510
Lassen Sie uns nun dieses erste Modul beenden, bevor wir uns eingehender mit React Native

120
00:09:36,590 --> 00:09:40,130
befassen und ab dem zweiten Kursmodul React Native-Code schreiben.