1
00:00:02,380 --> 00:00:07,720
Wir haben also gelernt, dass wir Transvaal angeben müssen, und ich kann Ihnen sagen, dass diese Datei am Ende Decode

2
00:00:07,720 --> 00:00:09,280
enthält, das zuerst ausgeführt wird.

3
00:00:09,310 --> 00:00:16,300
Wenn wir unsere App starten und dass dies dieses seltsame Ding an den Ort dieses d'Hiv hier macht.

4
00:00:16,780 --> 00:00:19,480
Was ist das für eine seltsame App hier?

5
00:00:20,170 --> 00:00:24,920
App aus dieser App-Datei erneut importieren Indianer aus der App Shreyas-Datei.

6
00:00:24,970 --> 00:00:27,640
Weil Erweiterungen bei den Importen automatisch hinzugefügt werden.

7
00:00:28,410 --> 00:00:31,360
Sehr geehrte Damen und Herren, am Ende haben wir eine JavaScript-Funktion.

8
00:00:31,510 --> 00:00:35,200
Dies ist eine reguläre Funktion, eine gespeicherte Pfeilfunktion und konstant.

9
00:00:35,620 --> 00:00:40,330
Und dann exportieren wir diese Konstante und daher funktioniert sie ziemlich einfach.

10
00:00:40,540 --> 00:00:43,120
Aber die Sache innerhalb der Funktion ist nicht einfach.

11
00:00:43,530 --> 00:00:50,770
Was wir hier zurückgeben, sieht aus wie Alter, Timal, genauso wie dies wie Alter HTML aussieht, aber es ist in einer

12
00:00:50,770 --> 00:00:51,250
JavaScript-Datei.

13
00:00:51,250 --> 00:00:52,480
Es kann nicht HTML sein.

14
00:00:52,540 --> 00:00:52,750
Recht.

15
00:00:52,780 --> 00:00:55,330
Sie können HTML nicht in eine JavaScript-Datei einfügen.

16
00:00:56,230 --> 00:00:59,330
Das ist eine spezielle Syntax, die vom React-Team erfunden wurde.

17
00:00:59,350 --> 00:01:01,090
Es heißt J als X ..

18
00:01:01,480 --> 00:01:08,530
Und es ermöglicht uns, E-Mail-Code in JavaScript-Dateien unter der Haube per E-Mail zu versenden.

19
00:01:08,560 --> 00:01:14,350
Dies wird in Anweisungen übersetzt, die im Detail verstanden werden.

20
00:01:14,380 --> 00:01:24,160
Dieses Jahr ähnelt dem React Create-Element, einer Methode, die hier und dann hier für dieses React-Objekt bereitgestellt wird.

21
00:01:25,480 --> 00:01:26,320
Alter eins.

22
00:01:27,100 --> 00:01:27,970
Und dann hier.

23
00:01:30,190 --> 00:01:30,760
Nein.

24
00:01:31,130 --> 00:01:32,390
Oder ein leeres Objekt.

25
00:01:32,750 --> 00:01:36,860
Und dann gibt es noch ein drittes Argument, Ihren Text hier zum Beispiel.

26
00:01:36,950 --> 00:01:37,520
Hallo.

27
00:01:38,510 --> 00:01:40,020
Das ist reagieren.

28
00:01:42,050 --> 00:01:45,650
Anderer Text als zuvor, aber es wird etwas Ähnliches auf dem Bildschirm gerendert.

29
00:01:46,220 --> 00:01:49,040
Dies wird das gleiche Ergebnis liefern und ich kann Ihnen das beweisen.

30
00:01:49,400 --> 00:01:55,430
Wenn wir einfach unseren Entwicklungsserver starten und versuchen, diese App und die Aktion zum Starten sowie das Paket zum Verfolgen der Datei

31
00:01:55,430 --> 00:01:59,480
anzuzeigen, finden wir ein Skript zum Starten des Skripts, das dort bereits vorhanden ist.

32
00:01:59,870 --> 00:02:02,000
Und dies wird am Ende dieses Werkzeug verwenden.

33
00:02:02,030 --> 00:02:07,310
Ich habe bereits erwähnt, um dann unseren Code zu transformieren und einen Entwicklungsserver zu starten, der

34
00:02:07,310 --> 00:02:10,640
Änderungen automatisch neu lädt oder einfügt, wenn wir etwas ändern.

35
00:02:11,210 --> 00:02:15,710
Hier können wir also ein neues Terminal eröffnen, das in diese Idee integriert ist.

36
00:02:17,040 --> 00:02:20,110
Und sie sind auf NPM, um diesen Entwicklungsserver aufzurufen.

37
00:02:20,500 --> 00:02:25,510
Und Sie sollten diesen Server so lange am Laufen halten, wie Sie an Ihrem Code arbeiten, denn wenn Sie ihn

38
00:02:25,510 --> 00:02:29,050
schließen, können Sie Ihre Seite und Ihre App nicht mehr in der Vorschau anzeigen.

39
00:02:29,980 --> 00:02:34,750
Wenn Sie diesen Server starten und npm start ausführen, sollte automatisch ein neuer Tab im

40
00:02:34,750 --> 00:02:36,910
Browser von localhost 3000 geöffnet werden.

41
00:02:37,150 --> 00:02:41,320
Wenn es nicht einfach alleine und besucht und lieb ist, sollten Sie sich verstecken sehen.

42
00:02:41,350 --> 00:02:44,560
Dies ist eine Reaktion, was eindeutig der Text ist, den ich hier eingegeben habe.

43
00:02:45,430 --> 00:02:51,970
Am Ende dieses Jahres steht also React Syntex und wir könnten unsere gesamte App mit dieser Syntax schreiben.

44
00:02:52,180 --> 00:02:57,760
Dies wird jedoch sehr umständlich, insbesondere wenn wir anfangen, Elemente ineinander zu verschachteln.

45
00:02:58,270 --> 00:03:05,170
Deshalb gibt uns React diese Alternative J. S. X-Syntax, die am Ende nur übersetzt wird, um zu reagieren,

46
00:03:05,170 --> 00:03:07,930
Element zu erstellen und dann das, was ich Ihnen gerade gezeigt habe.

47
00:03:08,380 --> 00:03:13,420
Das ist auch der Grund, warum wir React hier importieren müssen, obwohl es so aussieht, als würden wir dieses

48
00:03:13,450 --> 00:03:15,070
React-Objekt nirgendwo in dieser Datei verwenden.

49
00:03:15,150 --> 00:03:15,340
Recht.

50
00:03:15,430 --> 00:03:18,280
Wir müssen hier auf Text reagieren, aber das ist etwas anderes.

51
00:03:18,610 --> 00:03:20,470
Wir verwenden es also nirgendwo in dieser Datei.

52
00:03:20,710 --> 00:03:24,820
Nun, es wird implizit verwendet, weil dies nur syntaktischer Zucker ist.

53
00:03:24,940 --> 00:03:28,090
Am Ende wird es in diese offensichtliche Syntax übersetzt.

54
00:03:28,180 --> 00:03:28,780
Ich habe es Ihnen gezeigt.

55
00:03:29,230 --> 00:03:31,060
Und darum geht es im Reaktor.

56
00:03:31,450 --> 00:03:34,090
Wir sagen reagieren, welche Elemente es rendern soll.

57
00:03:34,420 --> 00:03:40,300
Und unter der Haube übersetzen wir dies in Befehle, die das DOM versteht und die der

58
00:03:40,300 --> 00:03:43,270
Browser versteht, um echte DOM-Elemente zu rendern.

59
00:03:43,900 --> 00:03:49,840
Wenn ich zum Beispiel hier den Titel hinzufüge, erhalten wir diesen Tooltip, der im Grunde genommen in den Browser integriert

60
00:03:49,840 --> 00:03:50,320
ist.

61
00:03:51,580 --> 00:03:54,130
Das funktioniert und ich speichere das.

62
00:03:54,550 --> 00:03:55,540
Es wird automatisch neu geladen.

63
00:03:55,570 --> 00:03:58,360
Sie müssen dies nicht alleine tun und sollten jetzt darüber schweben.

64
00:03:58,570 --> 00:03:59,590
Sie sehen diesen Tooltip.

65
00:03:59,740 --> 00:04:04,000
Dies funktioniert hier sehr klein, aber Sie können es sehen, wenn Sie dies auf Ihrem eigenen System testen.

66
00:04:04,940 --> 00:04:11,600
Nun, das funktioniert, weil Papa am Ende übersetzt wird, um zu reagieren, Element zu erstellen.

67
00:04:13,650 --> 00:04:17,750
Alter eins, dann Objekt, das wir hier leer gelassen haben.

68
00:04:18,150 --> 00:04:24,090
Wir legen die Attribute oder Eigenschaften fest, die wir für diesen DOM-Knoten festlegen möchten, der hier in diesem Fall,

69
00:04:24,090 --> 00:04:26,310
Titel zwei, erstellt wird. Dies funktioniert.

70
00:04:26,520 --> 00:04:28,380
Und danach haben wir den Text.

71
00:04:28,740 --> 00:04:30,270
So funktioniert das und reagieren.

72
00:04:30,270 --> 00:04:31,510
Wir werden alles tun, was nötig ist.

73
00:04:31,530 --> 00:04:32,820
Es wird dieses Element erstellen.

74
00:04:33,210 --> 00:04:36,180
Hier werden alle diese Eigenschaften oder Attribute festgelegt.

75
00:04:36,540 --> 00:04:38,950
Und es wird das letzte Argument hier wiedergeben.

76
00:04:39,270 --> 00:04:40,890
Innerhalb dieses erstellten Elements.

77
00:04:41,310 --> 00:04:47,340
Und das ist auch der Teil, in dem es sich um J handelt. X-Code hilft uns, denn wenn wir hier drin

78
00:04:47,430 --> 00:04:49,290
sind, sagen wir, ein anderes HTML-Element.

79
00:04:49,620 --> 00:04:56,010
Wir müssten mehrere Reaktionen verschachteln und Elementaufrufe ineinander erstellen, was schnell sehr schwer zu

80
00:04:56,340 --> 00:04:57,510
verwalten ist.

81
00:04:57,540 --> 00:05:00,200
Deshalb ist es J ist X Index.

82
00:05:00,210 --> 00:05:02,460
Hier ist eine großartige Idee, eine großartige Erfindung.

83
00:05:03,000 --> 00:05:05,980
Also werden wir die Syntax verwenden und wir haben sie auch hier bei Index J verwendet.

84
00:05:05,980 --> 00:05:06,320
S.

85
00:05:06,570 --> 00:05:10,640
Der Unterschied ist jedoch, dass wir es hier nicht mit einem normalen H verwenden.

86
00:05:10,690 --> 00:05:11,850
Timal Dom-Element.

87
00:05:12,180 --> 00:05:20,520
Stattdessen verwenden wir hier eine benutzerdefinierte Funktion, da wir das, was in die Blende exportiert wird, als Datei verwenden.

88
00:05:21,060 --> 00:05:24,180
Und was wir dort exportieren, ist eine normale JavaScript-Funktion.

89
00:05:24,840 --> 00:05:29,060
Nun, das ist eines der wichtigsten Konzepte für Reaktionskomponenten.