1 00:00:02,250 --> 00:00:09,030 Damit im Anhang ein Startprojekt gefunden wird, wurde dieses Startprojekt mit der App "React erstellen" erstellt, einem 2 00:00:09,150 --> 00:00:11,820 Tool, das vom React-Team erstellt wurde. 3 00:00:11,880 --> 00:00:18,510 Am Ende ist es einfach, neue Reaktionsprojekte zu starten und uns eine solche Projektstruktur zu geben. 4 00:00:18,630 --> 00:00:22,980 Ich habe es ein wenig angepasst, aber im Allgemeinen ist es genau das gleiche, was Sie von diesem Tool erhalten würden. 5 00:00:23,460 --> 00:00:25,550 Warum brauchen wir so ein Werkzeug? 6 00:00:25,560 --> 00:00:28,020 Warum importieren wir nicht einfach ein Skript in unser H. 7 00:00:28,020 --> 00:00:29,580 HTML-Datei und loslegen? 8 00:00:30,120 --> 00:00:33,660 Weil React etwas komplexer ist als Vanille-JavaScript. 9 00:00:33,840 --> 00:00:39,660 Am Ende liefern wir Vanille-JavaScript-Code aus, aber die Art und Weise, wie wir in Code schreiben, ist für uns als 10 00:00:39,690 --> 00:00:40,770 Entwickler etwas bequemer. 11 00:00:41,070 --> 00:00:46,620 Wir können bestimmte Funktionen verwenden, die nicht im Browser ausgeführt werden. Daher sind in diesem 12 00:00:46,620 --> 00:00:52,680 Projekt-Setup einige Tools enthalten, die den Code, den wir als Entwickler schreiben, in Code konvertieren, der in 13 00:00:52,680 --> 00:00:54,480 einem Browser ausgeführt wird. 14 00:00:54,570 --> 00:00:57,960 Hatten wir also Neuroma, den Code, der im Browser ausgeführt wird? 15 00:00:58,320 --> 00:01:01,710 Als Entwickler fällt es uns jedoch leichter, diesen Code zu schreiben. 16 00:01:02,220 --> 00:01:07,800 Darüber hinaus erhalten wir einen Entwicklungsserver, bei dem es sich um einen einfachen Server handelt, der unsere Front-End-Anwendung 17 00:01:07,860 --> 00:01:13,020 bedient, also kein Back hat und nur diese Front dieser Anwendung bedient und der Änderungen automatisch 18 00:01:13,020 --> 00:01:18,060 neu lädt oder einfügt, wenn wir etwas ändern und in einer unserer Quellen speichern Codedateien. 19 00:01:18,780 --> 00:01:23,950 Außerdem erstellen wir hier mit REACT eine einseitige Anwendung. 20 00:01:24,060 --> 00:01:29,040 Das ist kein Muss, aber es ist eine häufige Wahl in einer Anwendung mit nur einer Seite. 21 00:01:29,370 --> 00:01:34,710 Sie haben nur eine H Timal-Datei, die am Ende vom Server zurückgegeben wird, der diese Anwendung bedient. 22 00:01:34,890 --> 00:01:39,360 In diesem Fall ist diese Alters-Timmo-Datei, die selbst relativ leer ist. 23 00:01:39,930 --> 00:01:44,490 Diese Datei enthält jedoch später Skriptimporte. 24 00:01:44,620 --> 00:01:50,370 Sie werden automatisch von diesen zuvor erwähnten Tools hinzugefügt, die am Ende unsere Reaktionsanwendung hosten und 25 00:01:50,430 --> 00:01:56,280 ausführen, die wir wiederum hier im Quellordner mit unseren Dateien, die wir dort erhalten haben, so 26 00:01:57,000 --> 00:02:03,420 dass wir am Ende eine Webanwendung von haben Front-End, das aus einer HTML-Datei besteht, in der Denn JavaScript 27 00:02:03,420 --> 00:02:09,450 verwendet wird, um etwas auf dem Bildschirm zu rendern und es bei Bedarf erneut auf dem Bildschirm 28 00:02:09,750 --> 00:02:10,740 zu rendern. 29 00:02:11,250 --> 00:02:17,910 Und das ermöglicht es uns, hochreaktive moderne Benutzeroberflächen zu erstellen, in denen alles sofort geschieht, da JavaScript vom 30 00:02:18,030 --> 00:02:21,480 Browser ausgeführt wird und die Dinge sofort geschehen. 31 00:02:21,570 --> 00:02:25,530 Wir müssen nicht warten, bis eine neue L-Datei von einem Server heruntergeladen wurde. 32 00:02:25,950 --> 00:02:27,510 Es ist so, dass alles schon da ist. 33 00:02:27,570 --> 00:02:33,270 Wenn ein Benutzer auf eine Schaltfläche klickt und als Reaktion auf diesen Klickboom ein Feld auf dem Bildschirm angezeigt werden 34 00:02:33,540 --> 00:02:35,730 soll, geschieht dies sofort aufgrund von JavaScript. 35 00:02:36,090 --> 00:02:37,530 Das ist das Gefühl, das wir vermitteln wollen. 36 00:02:37,900 --> 00:02:40,110 Wir können das jetzt mit reagieren tun. 37 00:02:40,200 --> 00:02:41,700 Genug von der Theorie. 38 00:02:42,030 --> 00:02:42,990 Schreiben wir einen Code. 39 00:02:43,350 --> 00:02:47,940 Wie bereits erwähnt, tun wir dies hier im Quellordner, wo wir in der App Chase-Datei einen Index 40 00:02:47,940 --> 00:02:50,370 für seine Datei finden, beides sehr einfache Dateien. 41 00:02:50,970 --> 00:02:53,100 Schauen wir uns nun das indizierte Zufallstelefon an. 42 00:02:53,340 --> 00:02:56,010 Sie sehen, wir haben oben ein paar Importe. 43 00:02:56,310 --> 00:02:59,610 So importieren Sie übrigens Code im Frontend. 44 00:03:00,150 --> 00:03:05,550 Importieren Sie etwas aus und Śiva einen relativen Pfad zu Ihrer eigenen Datei. 45 00:03:05,700 --> 00:03:08,820 Oder wenn es sich um ein Paket eines Drittanbieters handelt, nur um einen Paketnamen. 46 00:03:09,780 --> 00:03:13,080 Und dann haben wir hier Importe aus unseren eigenen Dateien mit einem relativen Pfad. 47 00:03:13,170 --> 00:03:16,800 Wie ich damals hier erwähnte, führen wir am Ende einen Befehl aus. 48 00:03:16,980 --> 00:03:18,660 Reagiere Dom rendern. 49 00:03:19,740 --> 00:03:24,990 Dies kommt vom React Dom-Objekt hier am Ende, das wir aus der 50 00:03:24,990 --> 00:03:31,110 React Arm-Bibliothek importieren, und das macht diese seltsame Sache, die kein reguläres JavaScript ist. 51 00:03:31,490 --> 00:03:31,760 Du bist es. 52 00:03:31,800 --> 00:03:33,900 Dies spielt auf unserem H. M. Seite. 53 00:03:34,290 --> 00:03:35,900 Dies ist normales JavaScript. 54 00:03:35,910 --> 00:03:39,110 Und hier wählen wir das Element mit einer Idee von root aus. 55 00:03:39,510 --> 00:03:42,990 Wenn wir uns unsere einzelne HGL-Datei ansehen, dann ist das hier Dave. 56 00:03:43,110 --> 00:03:48,270 Daten sind also am Ende, wo unsere einseitige Reaktionsanwendung um zwei gehostet wird. 57 00:03:48,600 --> 00:03:52,710 Und sie sind bereit zu reagieren, werden alles an diesem Ort übernehmen und rendern. 58 00:03:53,940 --> 00:03:55,230 Das machen wir hier also. 59 00:03:55,260 --> 00:03:58,290 Aber was ist das für eine seltsame Sache für Papa? 60 00:03:58,310 --> 00:04:01,500 Wir müssen verstehen, was Komponenten sind und wie die Reaktion funktioniert.