1
00:00:02,380 --> 00:00:07,720
Nous avons donc appris que nous devons indiquer Transvaal et je peux vous dire que ce fichier comprend à la fin

2
00:00:07,720 --> 00:00:09,280
Decode, qui s'exécute en premier.

3
00:00:09,310 --> 00:00:16,300
Lorsque nous démarrons notre application et que cela rend cette chose étrange à la place de cette d'Hiv ici.

4
00:00:16,780 --> 00:00:19,480
Maintenant, quelle est cette étrange application ici.

5
00:00:20,170 --> 00:00:24,920
Réimportation de l'application à partir de ce fichier d'application Indienne à partir du fichier d'application Shreyas.

6
00:00:24,970 --> 00:00:27,640
Parce que les extensions sont ajoutées automatiquement sur les importations.

7
00:00:28,410 --> 00:00:31,360
Cher, ce que nous avons est finalement une fonction JavaScript.

8
00:00:31,510 --> 00:00:35,200
Il s'agit d'une fonction régulière, d'une fonction flèche stockée et constante.

9
00:00:35,620 --> 00:00:40,330
Et puis nous exportons cette constante et donc c'est une fonction assez simple.

10
00:00:40,540 --> 00:00:43,120
Mais la chose à l'intérieur de la fonction n'est pas simple.

11
00:00:43,530 --> 00:00:50,770
Ce que nous retournons ici ressemble à l'âge, Timal, tout comme cela ressemble à l'âge html, mais il est dans un fichier

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

13
00:00:51,250 --> 00:00:52,480
Il ne peut pas être h html.

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

15
00:00:52,780 --> 00:00:55,330
Vous ne pouvez pas ajouter h html dans un fichier JavaScript.

16
00:00:56,230 --> 00:00:59,330
C'est une syntaxe spéciale inventée par l'équipe React.

17
00:00:59,350 --> 00:01:01,090
Ça s'appelle J comme X ..

18
00:01:01,480 --> 00:01:08,530
Et cela nous permet à H d'envoyer un e-mail à la recherche de code dans des fichiers JavaScript sous le capot.

19
00:01:08,560 --> 00:01:14,350
Cela sera traduit en instructions réagissent en détail.

20
00:01:14,380 --> 00:01:24,160
Cette année est similaire à react create element, une méthode fournie sur cet objet react ici et là.

21
00:01:25,480 --> 00:01:26,320
Un an.

22
00:01:27,100 --> 00:01:27,970
Et puis ici.

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

24
00:01:31,130 --> 00:01:32,390
Ou un objet vide.

25
00:01:32,750 --> 00:01:36,860
Et puis il y a un troisième argument, votre texte ici, par exemple.

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

27
00:01:38,510 --> 00:01:40,020
C'est réagir.

28
00:01:42,050 --> 00:01:45,650
Texte différent qu'auparavant, mais il rendra quelque chose de similaire à l'écran.

29
00:01:46,220 --> 00:01:49,040
Cela donnera le même résultat et je peux vous le prouver.

30
00:01:49,400 --> 00:01:55,430
Si nous démarrons simplement notre serveur de développement et essayons de voir cette application et l'action pour le démarrer et le package pour

31
00:01:55,430 --> 00:01:59,480
chasser le fichier, nous trouvons un script pour démarrer le script, qui existe déjà là-bas.

32
00:01:59,870 --> 00:02:02,000
Et cela, à la fin, utilisera cet outillage.

33
00:02:02,030 --> 00:02:07,310
Je l'ai mentionné plus tôt pour ensuite transformer notre code et démarrer un serveur de développement qui recharge

34
00:02:07,310 --> 00:02:10,640
ou injecte automatiquement les modifications lorsque nous changeons quelque chose.

35
00:02:11,210 --> 00:02:15,710
Nous pouvons donc ouvrir ici un nouveau terminal intégré à cette idée.

36
00:02:17,040 --> 00:02:20,110
Et ils sont sur NPM commencent à faire apparaître ce serveur de développement.

37
00:02:20,500 --> 00:02:25,510
Et vous devez garder ce serveur opérationnel tant que vous travaillez sur votre code, car lorsque vous

38
00:02:25,510 --> 00:02:29,050
le fermez, vous ne pouvez plus prévisualiser votre page, votre application.

39
00:02:29,980 --> 00:02:34,750
Maintenant, lorsque vous démarrez ce serveur, lorsque vous exécutez npm start, il devrait automatiquement ouvrir un nouvel

40
00:02:34,750 --> 00:02:36,910
onglet dans le navigateur sur localhost 3000.

41
00:02:37,150 --> 00:02:41,320
S'il ne le fait pas tout seul et qu'il est visité et cher, vous devriez voir se cacher.

42
00:02:41,350 --> 00:02:44,560
C'est réagir, qui est clairement le texte que j'ai entré ici.

43
00:02:45,430 --> 00:02:51,970
Donc à la fin de cette année est React Syntex et nous pourrions écrire notre application entière avec cette syntaxe.

44
00:02:52,180 --> 00:02:57,760
Mais cela devient très lourd, surtout si nous commençons à imbriquer des éléments les uns dans les autres.

45
00:02:58,270 --> 00:03:05,170
C'est pourquoi React nous propose cette alternative J. S. Syntaxe X, qui à la fin est simplement traduite pour

46
00:03:05,170 --> 00:03:07,930
réagir, créer un élément et ensuite ce que je viens de vous montrer.

47
00:03:08,380 --> 00:03:13,420
C'est également la raison pour laquelle nous devons importer react ici, même s'il semble que nous n'utilisons cet objet

48
00:03:13,450 --> 00:03:15,070
react nulle part dans ce fichier.

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

50
00:03:15,430 --> 00:03:18,280
Nous devons réagir ici, mais c'est quelque chose de différent.

51
00:03:18,610 --> 00:03:20,470
Nous ne l'utilisons donc nulle part dans ce fichier.

52
00:03:20,710 --> 00:03:24,820
Eh bien, il est utilisé implicitement parce que ce n'est que du sucre syntaxique.

53
00:03:24,940 --> 00:03:28,090
En fin de compte, il est traduit dans cette syntaxe évidente.

54
00:03:28,180 --> 00:03:28,780
Je t'ai montré.

55
00:03:29,230 --> 00:03:31,060
Et c'est à cela que sert le réacteur.

56
00:03:31,450 --> 00:03:34,090
Nous disons réagir quels éléments il doit rendre.

57
00:03:34,420 --> 00:03:40,300
Et sous le capot, nous traduirons cela en commandes que le DOM comprend, que le navigateur

58
00:03:40,300 --> 00:03:43,270
comprend pour restituer de vrais éléments DOM.

59
00:03:43,900 --> 00:03:49,840
Maintenant, par exemple, si j'ajoute le titre ici, ce qui nous donne essentiellement cette info-bulle intégrée au

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

61
00:03:51,580 --> 00:03:54,130
Cela fonctionne et je l'enregistre.

62
00:03:54,550 --> 00:03:55,540
Il se recharge automatiquement.

63
00:03:55,570 --> 00:03:58,360
Vous n'avez pas besoin de le faire vous-même et vous devriez maintenant passer la souris dessus.

64
00:03:58,570 --> 00:03:59,590
Vous voyez cette info-bulle.

65
00:03:59,740 --> 00:04:04,000
Cela fonctionne très peu ici, mais vous pouvez le voir si vous testez cela sur votre propre système.

66
00:04:04,940 --> 00:04:11,600
Maintenant, cela fonctionne parce que papa, à la fin, est traduit pour réagir, créer un élément.

67
00:04:13,650 --> 00:04:17,750
L'âge un, puis fait l'objet, que nous proscrivons laissé vide ici.

68
00:04:18,150 --> 00:04:24,090
Nous définissons les attributs ou les propriétés que nous voulons définir sur ce nœud DOM, qui est créé ici

69
00:04:24,090 --> 00:04:26,310
dans ce cas, titre deux, cela fonctionne.

70
00:04:26,520 --> 00:04:28,380
Et puis par la suite, nous avons le texte.

71
00:04:28,740 --> 00:04:30,270
Voilà comment cela fonctionne et réagit.

72
00:04:30,270 --> 00:04:31,510
Nous ferons tout ce qu'il faut pour faire.

73
00:04:31,530 --> 00:04:32,820
Cela créera cet élément.

74
00:04:33,210 --> 00:04:36,180
Il définira toutes ces propriétés ou attributs ici.

75
00:04:36,540 --> 00:04:38,950
Et cela rendra le dernier argument ici.

76
00:04:39,270 --> 00:04:40,890
À l'intérieur de cet élément créé.

77
00:04:41,310 --> 00:04:47,340
Et c'est aussi la partie où il est J est le code X nous aide, parce que si ici nous avons,

78
00:04:47,430 --> 00:04:49,290
disons, un autre élément H html.

79
00:04:49,620 --> 00:04:56,010
Il faudrait imbriquer plusieurs réactions, créer des appels d'éléments les uns dans les autres, ce qui devient rapidement très

80
00:04:56,340 --> 00:04:57,510
difficile à gérer.

81
00:04:57,540 --> 00:05:00,200
C'est pourquoi c'est l'indice J is X.

82
00:05:00,210 --> 00:05:02,460
Voici une excellente idée, une grande invention.

83
00:05:03,000 --> 00:05:05,980
Nous allons donc utiliser la syntaxe et nous avons également utilisé ici à Index J.

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

85
00:05:06,570 --> 00:05:10,640
La différence est que nous ne l'utilisons pas ici avec un H. normal

86
00:05:10,690 --> 00:05:11,850
Élément Timal Dom.

87
00:05:12,180 --> 00:05:20,520
Mais ici, nous utilisons une fonction personnalisée car nous utilisons ce qui est exporté dans l'ouverture en tant que fichier.

88
00:05:21,060 --> 00:05:24,180
Et ce que nous exportons, il y a une fonction JavaScript normale.

89
00:05:24,840 --> 00:05:29,060
Eh bien, c'est l'un des concepts les plus importants des composants réactifs.