1 00:00:02,460 --> 00:00:04,290 Nachdem wir nun wissen, was 2 00:00:04,290 --> 00:00:07,370 React Native ist, werfen wir einen kurzen Blick hinter die Kulissen. 3 00:00:07,530 --> 00:00:13,080 Wie ich bereits erwähnt habe, erstellen wir mit React und React Native eine App, und unser Code sieht normalerweise 4 00:00:13,080 --> 00:00:13,700 so aus. 5 00:00:13,710 --> 00:00:19,260 Wir erstellen normale React-Komponenten, wie Sie sie aus dem Web kennen, mit Javascript, da Javascript die 6 00:00:19,260 --> 00:00:21,650 Sprache ist, in der wir React 7 00:00:21,810 --> 00:00:26,290 Native-Apps erstellen. Dort verwenden wir jedoch spezielle Komponenten wie Ansicht und Text. 8 00:00:26,310 --> 00:00:31,130 Dies sind keine normalen HTML-Elemente, da die normalen HTML-Elemente nicht unterstützt werden. Die 9 00:00:31,680 --> 00:00:37,230 nativen Plattformen wissen nicht, wie sie verwendet werden sollen. Daher verwenden Sie spezielle Komponenten, die Sie 10 00:00:37,230 --> 00:00:42,600 von React Native erhalten haben und für die React Native sie in Anweisungen übersetzen kann 11 00:00:42,630 --> 00:00:46,380 Die nativen Plattformen verstehen das. So funktioniert das also. 12 00:00:46,380 --> 00:00:51,150 Jetzt ist es wichtig zu verstehen, dass Ihre Ansichten, also die Komponenten, mit denen Sie arbeiten, letztendlich zu echten 13 00:00:51,150 --> 00:00:58,440 nativen Widgets, zu echten nativen Elementen und zu echtem nativem Code kompiliert werden. Ihr Javascript-Code, in dem Sie Ihre Geschäftslogik verwalten, 14 00:00:58,470 --> 00:01:03,480 wird nicht kompiliert, Ihre Ansichten jedoch, und das bedeutet natürlich auch, dass Sie 15 00:01:03,750 --> 00:01:09,190 beim Erstellen von React Native-Apps normalerweise eine hervorragende Leistung erzielen, da das Ergebnis eine echte 16 00:01:09,190 --> 00:01:14,310 native App ist, in der ein großer Teil der Code ist echter nativer Code. 17 00:01:14,310 --> 00:01:19,300 Wenn wir uns diese Komponente genauer ansehen, ist es wichtig zu verstehen, dass Sie React 18 00:01:19,320 --> 00:01:25,640 natürlich zum Erstellen von Web-Apps verwenden können, aber dass Sie auch native Apps für Android und iOS mit nativem 19 00:01:25,650 --> 00:01:31,530 Code erstellen können, also ohne React Native oder Sie kann React Native verwenden, daher gibt es vier verschiedene 20 00:01:31,530 --> 00:01:37,410 Möglichkeiten, Apps zu erstellen, bei denen React for the Web uns natürlich keine native App bietet, sondern nur 21 00:01:37,410 --> 00:01:40,260 um zu vergleichen, wie dies zusammenhängen würde. 22 00:01:40,260 --> 00:01:45,630 Wenn Sie also React for the Web verwenden, arbeiten Sie normalerweise mit einem Div, um Ihre Inhalte zu strukturieren. 23 00:01:46,260 --> 00:01:48,540 Wenn Sie direkt mit Android 24 00:01:48,540 --> 00:01:54,780 arbeiten und Ihre App in Android Studio ohne React Native erstellen würden, würden Sie beispielsweise mit 25 00:01:54,780 --> 00:02:00,600 einer Android-Ansicht arbeiten, die ein Widget ist, das Sie dort in der von Ihnen erstellten 26 00:02:00,600 --> 00:02:08,970 Benutzeroberfläche verwenden können direkt mit nativen Plattformfunktionen zur Strukturierung Ihrer Inhalte. Unter iOS wäre dies das UI-Ansichts-Widget, und Sie müssen sich diese 27 00:02:08,970 --> 00:02:10,780 Begriffe nicht merken. Ich 28 00:02:10,830 --> 00:02:16,020 möchte nur erklären, wie React Native die Dinge für Sie übersetzt, da Sie in 29 00:02:16,020 --> 00:02:18,180 React Native-Apps das Ansichtselement tatsächlich verwenden. 30 00:02:18,180 --> 00:02:22,950 Wenn Sie sich dieses Ansichtselement ansehen, sehen Sie natürlich, dass es dem div-Element 31 00:02:23,010 --> 00:02:24,830 sehr ähnlich ist. Es 32 00:02:24,840 --> 00:02:30,510 sieht aus wie ein HTML-Tag. Der Unterschied besteht natürlich darin, dass es mit einem Großbuchstaben beginnt 33 00:02:30,690 --> 00:02:36,180 und diese Ansicht kein HTML-Tag ist Der Browser würde nicht wissen, was mit einer Ansicht zu 34 00:02:36,240 --> 00:02:42,990 tun ist, aber React Native tut dies und React Native übersetzt diese Ansicht für Sie in die Android-Ansicht oder in 35 00:02:43,050 --> 00:02:49,260 die UI-Ansicht, und dies natürlich nicht nur für diese Ansicht, sondern auch für die allgemeine Wrapper-Komponente Wenn Sie 36 00:02:49,260 --> 00:02:54,210 beispielsweise Benutzereingaben abrufen, tun Sie dies im Web mit dem Eingabeelement. Wenn Sie eine 37 00:02:54,210 --> 00:02:59,850 native Android-App erstellen, verwenden Sie Text bearbeiten. Für eine native iOS-App verwenden Sie ein UI-Textfeld und 38 00:03:00,090 --> 00:03:06,240 in React Native gibt es die Texteingabekomponente. Wieder kompiliert React Native diese für Sie in die nativen Widgets, 39 00:03:06,240 --> 00:03:11,520 und so funktioniert React Native hinter den Kulissen. Natürlich interessiert uns das Web in diesem Kurs hier nicht, 40 00:03:11,520 --> 00:03:17,310 nur damit Sie verstehen, dass es einige Ähnlichkeiten gibt, verwenden wir diese Tags, die wie HTML-Tags aussehen, aber natürlich besteht der wichtige Unterschied 41 00:03:17,440 --> 00:03:24,660 darin, dass es sich um spezielle Komponenten handelt, die kompiliert wurden zu nativem Code. Wie ich bereits erwähnt habe, ist es wichtig zu 42 00:03:24,660 --> 00:03:30,500 verstehen, dass React Native für die Benutzeroberfläche spezielle Komponenten bietet, die dann für Ihre 43 00:03:30,540 --> 00:03:33,000 andere Logik zur nativen Verwendung 44 00:03:33,060 --> 00:03:38,760 kompiliert werden. Wenn Sie also Redux verwenden oder über eine Geschäftslogik verfügen, Wenn Sie 45 00:03:38,760 --> 00:03:47,070 HTTP-Anforderungen senden, transformieren Sie Daten. Der gesamte andere Javascript-Code wird nicht in nativen Code kompiliert, sondern in einem speziellen Thread 46 00:03:47,070 --> 00:03:52,980 ausgeführt, der von React Native gehostet wird. Sie können sich also Ihre React Native-App vorstellen, 47 00:03:52,980 --> 00:03:58,450 die Sie am Ende als echte native App erhalten, da alle Ansichten zu nativen 48 00:03:58,450 --> 00:04:05,760 Widgets kompiliert wurden, Ihre App jedoch eine zusätzliche Mini-App enthält, ein Mini-Javascript Die App wird dort ausgeführt, sozusagen von React 49 00:04:05,760 --> 00:04:12,690 Native gehostet und gestartet. Sie führt Ihren gesamten Javascript-Code aus und Ihr Javascript-Code kann dann mit der nativen 50 00:04:12,690 --> 00:04:13,800 Plattform kommunizieren. 51 00:04:14,160 --> 00:04:19,860 Sie können sich das hier so vorstellen, Sie haben Ihren Code, Ihre App und Sie erstellen eine native 52 00:04:19,860 --> 00:04:25,110 App, die auf einer nativen Plattform ausgeführt wird, und natürlich stehen Ihnen dort bestimmte Plattformfunktionen zur 53 00:04:25,110 --> 00:04:27,150 Verfügung, beispielsweise mit einer Gerätekamera. 54 00:04:27,150 --> 00:04:32,520 Wie bereits erwähnt, kann Ihr Code hier in zwei Dinge unterteilt werden - Ihre Ansichten 55 00:04:32,520 --> 00:04:38,430 und Ihre Geschäftslogik, also den anderen Javascript-Code. Wie bereits mehrfach erwähnt, werden Ihre Ansichten 56 00:04:38,490 --> 00:04:46,620 zu nativen Ansichten und nativen Widgets für diese Plattformen kompiliert. Ihr Code wird jedoch als Javascript-Code beibehalten, und Sie können auf native Plattformfunktionen 57 00:04:46,620 --> 00:04:53,090 wie die Kamera zugreifen, da Ihr Javascript-Code in einer speziellen virtuellen Ausführung ausgeführt wird Maschine, die am Ende 58 00:04:53,100 --> 00:04:58,430 von React Native in Ihrer App hochgefahren und gehostet wird. Der richtige Teil hier 59 00:04:58,440 --> 00:05:04,710 befindet sich also in unserer nativen App, die wir an die App Stores liefern, und dieser Javascript-Code, 60 00:05:04,710 --> 00:05:10,080 diese virtuelle Javascript-Maschine, kann sprechen zu den nativen Plattformfunktionen, also zu dem Betriebssystem, auf dem 61 00:05:10,200 --> 00:05:14,340 Ihre App am Ende über eine spezielle Brücke läuft, die Sie 62 00:05:14,340 --> 00:05:20,580 sagen könnten, und diese Brücke und diese virtuelle Maschine, die alle automatisch von React Native bereitgestellt werden. 63 00:05:20,580 --> 00:05:22,050 Sie müssen sich nicht 64 00:05:22,170 --> 00:05:29,190 darum kümmern, alles, was Sie tun, ist, Ihre React Native-App mit Javascript und diesen speziellen Komponenten zu schreiben, und das ist alles, was Sie 65 00:05:29,190 --> 00:05:30,720 vorerst wissen müssen. So funktioniert 66 00:05:30,720 --> 00:05:36,870 eine React Native-App hinter den Kulissen und ich Es ist wichtig, sich dessen bewusst zu sein, da es einen Teil der 67 00:05:37,170 --> 00:05:43,050 Magie im positiven Sinne wegnimmt, weil Sie verstehen, was Sie tatsächlich schreiben und was mit Ihrem Code passieren wird und wie 68 00:05:43,050 --> 00:05:47,020 dieser Code in einer nativen App landet und natürlich Sie verstehen auch, dass Sie 69 00:05:47,100 --> 00:05:51,960 daher am Ende eine echte native App haben. Nicht Ihr gesamter Code ist kompiliert, das 70 00:05:51,960 --> 00:05:52,980 wäre ziemlich 71 00:05:52,980 --> 00:05:58,300 unmöglich, aber Ihre Ansichten werden kompiliert, und natürlich sind die Ansichten, also der Teil, den der Benutzer 72 00:05:58,320 --> 00:06:03,650 sieht, der wichtigste Teil, wenn es um die Leistung einer App geht, da die Benutzeroberfläche neu gerendert 73 00:06:03,650 --> 00:06:05,700 wird und all das, das ist 74 00:06:05,700 --> 00:06:10,620 normalerweise der leistungsintensive Teil und daher ist es sehr gut, dass dies kompiliert wird und 75 00:06:10,620 --> 00:06:13,410 das ist eine der großen Stärken von React Native.