1 00:00:02,240 --> 00:00:08,750 Das war eine Menge Einführung in React Native und Expo, aber ich finde es wichtig, dass Sie 2 00:00:08,750 --> 00:00:11,540 verstehen, womit Sie arbeiten, bevor Sie anfangen. 3 00:00:11,540 --> 00:00:18,470 Jetzt ist es an der Zeit, loszulegen und dafür die Expo zu besuchen. io. Dort können Sie auf Erste 4 00:00:18,470 --> 00:00:22,020 Schritte klicken und die Startschritte finden Sie hier. 5 00:00:22,190 --> 00:00:24,290 Jetzt brauchen Sie diesen ersten Schritt nicht wirklich, 6 00:00:24,290 --> 00:00:30,920 wir können direkt zu Schritt Nummer zwei springen, nämlich, dass Sie NodeJS benötigen. Jetzt benötigen Sie NodeJS, eine Javascript-Laufzeit, mit der Sie 7 00:00:30,920 --> 00:00:36,800 beispielsweise serverseitige Apps mit Javascript erstellen können. Sie brauchen das nicht, weil wir in 8 00:00:36,800 --> 00:00:39,980 diesem Kurs NodeJS-Code schreiben werden. Es ist kein 9 00:00:39,980 --> 00:00:41,020 Node-Kurs, keine 10 00:00:41,030 --> 00:00:42,550 Sorge, Sie müssen 11 00:00:42,590 --> 00:00:50,750 NodeJS nicht kennen, aber es ist ein Paket, mit dem wir Javascript auf unserem Computer ausführen können Zum Beispiel läuft 12 00:00:50,750 --> 00:00:54,680 der Expo-Client hinter den Kulissen auch mit Javascript. Er hat 13 00:00:54,680 --> 00:00:57,410 nichts mit React Native zu tun. 14 00:00:57,410 --> 00:01:00,100 Nur damit dieses Tool richtig funktioniert. 15 00:01:00,230 --> 00:01:05,050 Auch für diesen Befehl zum Installieren des Tools npm ist dies der Node Package 16 00:01:05,150 --> 00:01:08,320 Manager, der auch von NodeJS zur Verfügung gestellt wird. 17 00:01:08,330 --> 00:01:14,300 Der erste Schritt ist also, dass Sie nodejs besuchen. org und dort die neueste 18 00:01:14,300 --> 00:01:20,300 Version herunterladen, in meinem Fall 12. 6 von dort aus, um loszulegen, und was auch immer Ihre 19 00:01:20,300 --> 00:01:22,840 neueste Version ist, wenn Sie diese anzeigen, laden Sie einfach 20 00:01:22,880 --> 00:01:28,080 diese Version herunter, installieren Sie sie. Sie erhalten ein normales Installationsprogramm, durch das Sie einfach gehen können, indem Sie alle 21 00:01:28,100 --> 00:01:29,420 diese Schritte dort durchklicken. 22 00:01:29,420 --> 00:01:32,220 Es ist für MacOS, Windows und Linux verfügbar. 23 00:01:32,270 --> 00:01:38,330 Laden Sie es einfach hier herunter, gehen Sie durch das Installationsprogramm und sobald es installiert ist, können Sie hier mit 24 00:01:38,330 --> 00:01:39,760 diesem dritten Schritt fortfahren. 25 00:01:39,830 --> 00:01:46,130 Wenn NodeJS installiert ist, kopieren wir diesen Befehl hier und öffnen dann Ihr normales Terminal oder unter 26 00:01:46,130 --> 00:01:49,770 Windows Ihre Eingabeaufforderung und fügen diesen Befehl hier ein. 27 00:01:49,790 --> 00:01:54,530 Unter Mac und Linux müssen Sie möglicherweise ein Sudo hinzufügen. Unter Windows ist 28 00:01:54,530 --> 00:01:57,820 dies nicht erforderlich, um die richtigen Berechtigungen zu erhalten. 29 00:01:57,830 --> 00:01:59,090 Hier gebe ich es 30 00:01:59,120 --> 00:02:03,630 ein, dann werden Sie möglicherweise aufgefordert, Ihr Passwort einzugeben. Geben Sie es einfach 31 00:02:03,740 --> 00:02:09,290 ein, wenn dies der Fall ist. Jetzt wird die Expo-CLI installiert. Mit diesem Tool können wir 32 00:02:09,290 --> 00:02:15,080 React Native-Projekte mithilfe von Expo global erstellen und verwalten auf Ihrem Computer, sodass Sie es von überall 33 00:02:15,230 --> 00:02:16,280 auf Ihrem 34 00:02:16,280 --> 00:02:19,190 Computer verwenden können, also von überall in Ihrem Terminal. 35 00:02:19,280 --> 00:02:21,540 Warten wir also, bis diese Installation abgeschlossen ist. 36 00:02:21,560 --> 00:02:26,180 Sie können alle Warnungen ignorieren, die möglicherweise dazwischen liegen, und ich bin zurück, sobald diese 37 00:02:26,180 --> 00:02:27,470 Installation abgeschlossen ist. 38 00:02:27,560 --> 00:02:33,170 Sie können solche Zwischenfehler hier übrigens auch ignorieren, solange der Gesamteindruck nicht mit einem Fehler abstürzt, 39 00:02:33,170 --> 00:02:35,990 sondern am Ende mit einer Meldung wie 40 00:02:35,990 --> 00:02:38,030 dieser endet, waren Sie erfolgreich. 41 00:02:38,030 --> 00:02:43,760 Damit haben wir Expo CLI installiert. Der nächste Schritt ist das Erstellen unseres Projekts, also Schritt Nummer 42 00:02:43,760 --> 00:02:44,510 vier hier. 43 00:02:44,510 --> 00:02:46,280 Dazu führen wir expo init 44 00:02:46,340 --> 00:02:52,250 und dann einen beliebigen Projektnamen Ihrer Wahl aus. Stellen Sie dazu zunächst sicher, dass Sie mit dem Befehl cd in den Ordner 45 00:02:52,310 --> 00:02:58,890 hier auf Ihrem Computer navigieren, in dem Sie das Projekt erstellen möchten. Also habe ich das hier gemacht, ich bin in diesem 46 00:02:58,890 --> 00:03:04,440 Ordner und jetzt kann ich expo init ausführen und ich werde diese rn-first-App benennen, weil es hier 47 00:03:04,440 --> 00:03:09,870 doch unsere erste React Native App ist. Drücken Sie einfach die Eingabetaste, dieser Name liegt natürlich ganz 48 00:03:09,870 --> 00:03:11,250 bei Ihnen, den Sie 49 00:03:11,250 --> 00:03:16,530 hier haben. Dadurch wird an der Stelle, an der Sie diesen Befehl ausgeführt haben, ein neuer Ordner erstellt und 50 00:03:16,800 --> 00:03:18,810 dort mit expo eine React Native-App eingerichtet. 51 00:03:18,900 --> 00:03:22,290 Jetzt werden Sie wahrscheinlich gefragt, welche Vorlage Sie verwenden möchten, und 52 00:03:22,350 --> 00:03:25,480 dort können Sie zunächst mit der leeren Vorlage fortfahren. 53 00:03:25,560 --> 00:03:32,700 Stellen Sie sicher, dass Sie sich nicht für ein Minimum entscheiden, da dies ein Setup 54 00:03:32,700 --> 00:03:34,060 ohne die 55 00:03:34,080 --> 00:03:36,570 Expo-Umgebung mit allen praktischen Funktionen wäre. 56 00:03:36,570 --> 00:03:42,570 Als nächstes werden Sie wahrscheinlich aufgefordert, einen Namen für Ihre App einzugeben, und ich gebe hier einfach rn-first-app ein. 57 00:03:42,570 --> 00:03:43,050 Dies 58 00:03:43,080 --> 00:03:47,770 ist am Ende der Name, der im Task-Umschalter Ihrer App auf dem Startbildschirm und angezeigt 59 00:03:47,770 --> 00:03:48,540 wird bald. 60 00:03:48,570 --> 00:03:52,130 Sie können die Schnecke so lassen, wie sie ist, und einfach 61 00:03:52,140 --> 00:03:58,650 erneut die Eingabetaste drücken. Jetzt verwende ich auch Garn auf meiner Maschine, was eine Alternative zu npm ist. Möglicherweise werden Sie 62 00:03:58,650 --> 00:04:00,780 nicht gefragt, ob Sie Garn verwenden 63 00:04:00,780 --> 00:04:03,210 möchten, das völlig in Ordnung ist Wählen 64 00:04:03,390 --> 00:04:08,550 Sie hier auch Nein, um npm zu verwenden. Daher wird jetzt dieser Projektordner erstellt, alle erforderlichen 65 00:04:08,550 --> 00:04:14,970 Abhängigkeiten wie React und React Native installiert und uns ein React Native-Projekt gegeben, mit dem wir eine native App erstellen 66 00:04:14,970 --> 00:04:15,330 können. 67 00:04:15,570 --> 00:04:17,960 Warten wir also, bis dies abgeschlossen ist. 68 00:04:17,970 --> 00:04:23,610 Sobald es fertig ist, sehen Sie hier die nächsten Anweisungen. Sie können mit dem Befehl cd in 69 00:04:23,610 --> 00:04:31,230 den neu erstellten Ordner navigieren und dort einfach npm start ausführen. Npm start startet nun das Expo-Entwicklungstool, 70 00:04:31,230 --> 00:04:38,410 die Expo-Entwicklungstools und eine neue Registerkarte sollten sich in Ihrem Browser öffnen. 71 00:04:38,570 --> 00:04:43,420 Hier ist die Registerkarte, die geöffnet wurde. Wenn Sie hier Probleme haben, können Sie 72 00:04:43,550 --> 00:04:49,070 diese vorerst ignorieren. Hier handelt es sich um das Expo-Entwicklungstool oder die Expo-Entwicklungstools, wie sie genannt werden. 73 00:04:49,280 --> 00:04:55,610 Es ist ein Fenster, in dem Sie Ihre App auf verschiedenen verbundenen Geräten ausführen oder Simulatoren hinzufügen können. Im Allgemeinen können 74 00:04:55,760 --> 00:05:00,740 Sie Teile Ihrer App verwalten. Hier sehen Sie einige Ausgaben Ihrer App, einige Warnungen, die Sie möglicherweise 75 00:05:00,740 --> 00:05:02,650 erhalten, und dies ist sehr 76 00:05:02,750 --> 00:05:09,200 praktisch Fenster zum Verwalten Ihrer App und zum Ausführen Ihrer App. Stellen Sie jetzt auch sicher, dass Sie 77 00:05:09,210 --> 00:05:15,780 diesen Prozess hier in dem Terminal, in dem Sie npm start ausgeführt haben, laufen lassen. 78 00:05:15,810 --> 00:05:21,000 Möglicherweise sehen Sie, dass es nicht beendet wurde. Sie sehen diese Eingabezeile nicht mehr, in der Sie 79 00:05:21,630 --> 00:05:27,630 Befehle eingeben können. Stattdessen können Sie hier nicht eingeben oder einige der hier angezeigten Verknüpfungen drücken, aber nicht eingeben 80 00:05:27,630 --> 00:05:28,500 neue Befehle. 81 00:05:28,500 --> 00:05:33,960 Sie können diesen Prozess jederzeit beenden, indem Sie gleichzeitig die Steuerung und c drücken. Sie sollten diesen Prozess 82 00:05:33,960 --> 00:05:37,640 jedoch so lange laufen lassen, wie Sie an Ihrem Projekt arbeiten. 83 00:05:37,740 --> 00:05:42,660 Wenn Sie dann für den Tag fertig sind, können Sie ihn beenden und neu starten Da 84 00:05:42,660 --> 00:05:47,850 dieser Prozess am nächsten Tag auch Ihren Code überwacht und wenn Sie etwas in Ihrem Code ändern 85 00:05:47,850 --> 00:05:52,530 und diese Änderung speichern, wird dies automatisch gespeichert und auf Ihrem angeschlossenen Gerät veröffentlicht. 86 00:05:52,560 --> 00:05:58,680 Aber wenn wir gerade davon sprechen, schließen wir das Gerät an. Der einfachste Weg, um loszulegen, ist 87 00:05:58,680 --> 00:06:01,940 die Verwendung Ihres iPhone oder Android-Telefons, das Sie besitzen. 88 00:06:01,950 --> 00:06:08,290 In meinem Fall ist es hier ein iPhone und hier ist mein echtes Telefon und ich bin im App Store. Jetzt ist es auf Deutsch, weil ich ein deutsches 89 00:06:08,290 --> 00:06:12,730 Telefon habe, aber dies ist der normale App Store. Jetzt können Sie dort 90 00:06:12,730 --> 00:06:19,900 in den Suchbereich gehen und nach Expo suchen. Sobald Sie dies getan haben, sollten Sie diesen Expo-Client hier finden und Sie 91 00:06:20,020 --> 00:06:26,680 können ihn einfach auf Ihr Gerät herunterladen. Die Verwendung ist kostenlos. Installieren Sie es einfach auf Ihrem Gerät und warten Sie, bis 92 00:06:26,680 --> 00:06:28,430 diese Installation abgeschlossen ist. Sobald 93 00:06:28,450 --> 00:06:30,690 dies abgeschlossen ist, können Sie diese öffnen. 94 00:06:30,700 --> 00:06:37,030 Wenn die Expo-App installiert ist, müssen Sie sich hier nicht anmelden. Stattdessen sollten Sie auf Android in der Lage sein um 95 00:06:37,370 --> 00:06:42,880 diesen Barcode direkt aus Ihrer Expo-App heraus zu scannen. Öffnen Sie unter iOS einfach die Kamera-App 96 00:06:42,880 --> 00:06:49,230 und gehen Sie dann auch zu den Entwicklertools hier. Dort sehen Sie den Barcode. Halten 97 00:06:49,230 --> 00:06:58,190 Sie einfach Ihre Kamera auf iOS oder den Expo-App-Scanner hier auf Android und Sie sollten dazu aufgefordert werden ob du dann eine 98 00:06:58,190 --> 00:07:03,510 app in expo öffnen willst. Klicken Sie einfach dort auf Öffnen und 99 00:07:03,800 --> 00:07:07,730 jetzt sollte Ihre App hier im Expo-Client geöffnet werden, den Sie 100 00:07:07,760 --> 00:07:14,810 installiert haben, ohne sich erneut anzumelden, indem Sie Ihre iPhone-Kamera über diesen Barcode halten oder auf Android, indem Sie dies 101 00:07:14,810 --> 00:07:19,350 direkt in der Expo-App tun, in der Sie sich befinden diese Option dazu. 102 00:07:19,370 --> 00:07:24,050 Jetzt wird das Javascript-Bundle erstellt, wie Sie hier unten sehen oder mit anderen Worten, dies 103 00:07:24,050 --> 00:07:30,260 wird nun Ihre App nehmen und sie im Grunde kompilieren und vorbereiten und dann hier über die Server von expo in 104 00:07:30,320 --> 00:07:36,920 Ihre App laden und Sie können einfach darauf klicken Habe es hier auf dem ersten Bildschirm und dann ist dies deine startende 105 00:07:36,920 --> 00:07:38,130 React Native App. 106 00:07:38,270 --> 00:07:43,220 Und jetzt sehen wir uns den Code dafür an und sehen, wie wir etwas im Code ändern können, um hier 107 00:07:43,220 --> 00:07:45,110 auf diesem Bildschirm etwas anderes zu sehen.