1
00:00:02,250 --> 00:00:09,030
Pour que cette pièce jointe trouve un projet de départ, ce projet de départ a été créé avec l'application Create

2
00:00:09,150 --> 00:00:11,820
React, un outil créé par l'équipe React.

3
00:00:11,880 --> 00:00:18,510
En fin de compte, ce qui facilite la création de nouveaux projets React et nous donne une structure de projet comme celle-ci.

4
00:00:18,630 --> 00:00:22,980
Je l'ai ajusté un peu, mais en général c'est exactement la même chose que vous obtiendriez avec cet outil.

5
00:00:23,460 --> 00:00:25,550
Maintenant, pourquoi avons-nous besoin d'un tel outil?

6
00:00:25,560 --> 00:00:28,020
Pourquoi ne pas simplement importer un script dans notre H.

7
00:00:28,020 --> 00:00:29,580
Fichier HTML et commencer?

8
00:00:30,120 --> 00:00:33,660
Parce que React est un peu plus complexe que le JavaScript vanille.

9
00:00:33,840 --> 00:00:39,660
En fin de compte, nous expédions du code JavaScript vanille, mais la façon dont nous écrivons dans le code est un peu plus pratique pour nous

10
00:00:39,690 --> 00:00:40,770
en tant que développeur.

11
00:00:41,070 --> 00:00:46,620
Nous pouvons utiliser certaines fonctionnalités qui ne fonctionneraient pas dans le navigateur et, par conséquent, cette configuration de projet

12
00:00:46,620 --> 00:00:52,680
comprend quelques outils inclus qui prennent le code que nous écrivons en tant que développeur et le convertissent réellement en code

13
00:00:52,680 --> 00:00:54,480
qui s'exécute dans un navigateur.

14
00:00:54,570 --> 00:00:57,960
Avons-nous donc Neuroma, le code qui est exécuté dans le navigateur?

15
00:00:58,320 --> 00:01:01,710
Mais nous avons plus de facilité à écrire ce code en tant que développeur.

16
00:01:02,220 --> 00:01:07,800
De plus, nous obtenons un serveur de développement, qui est un simple serveur qui sert notre application frontale, donc qui

17
00:01:07,860 --> 00:01:13,020
n'a pas d'arrière-plan et ne sert que cette application frontale et qui recharge ou injecte automatiquement les modifications

18
00:01:13,020 --> 00:01:18,060
chaque fois que nous changeons et enregistrons quelque chose dans l'une de nos sources. fichiers de code.

19
00:01:18,780 --> 00:01:23,950
De plus, ici avec REACT, nous construisons une application d'une seule page.

20
00:01:24,060 --> 00:01:29,040
Ce n'est pas un must, mais c'est un choix courant dans une application d'une seule page.

21
00:01:29,370 --> 00:01:34,710
Vous n'avez qu'un seul fichier H Timal, qui à la fin est renvoyé par le serveur desservant cette application.

22
00:01:34,890 --> 00:01:39,360
Dans ce cas, ce fichier Timmo d'âge, qui lui-même est relativement vide.

23
00:01:39,930 --> 00:01:44,490
Mais ce fichier comprendra ensuite les importations de script.

24
00:01:44,620 --> 00:01:50,370
Ils seront ajoutés automatiquement par ces outils que j'ai mentionnés plus tôt, qui à la fin hébergent et

25
00:01:50,430 --> 00:01:56,280
exécutent notre application React, que nous avons à notre tour ici dans le dossier source avec nos fichiers que

26
00:01:57,000 --> 00:02:03,420
nous avons obtenus afin que nous ayons finalement une application Web de Front End, qui se compose d'un fichier h html

27
00:02:03,420 --> 00:02:09,450
où Denn JavaScript est utilisé pour rendre quelque chose à l'écran et restituer ce quelque chose à l'écran lorsque cela

28
00:02:09,750 --> 00:02:10,740
est nécessaire.

29
00:02:11,250 --> 00:02:17,910
Et cela nous permet de construire des interfaces utilisateur modernes très réactives où tout se passe instantanément car JavaScript

30
00:02:18,030 --> 00:02:21,480
s'exécute sur le navigateur, les choses se produisent instantanément.

31
00:02:21,570 --> 00:02:25,530
Nous n'avons pas besoin d'attendre qu'un nouveau fichier en L soit téléchargé depuis un serveur.

32
00:02:25,950 --> 00:02:27,510
C'est que tout est déjà là.

33
00:02:27,570 --> 00:02:33,270
Ainsi, lorsqu'un utilisateur clique sur un bouton et que nous voulons afficher une boîte à l'écran en réponse à ce boom des clics,

34
00:02:33,540 --> 00:02:35,730
cela se produit instantanément en raison de JavaScript.

35
00:02:36,090 --> 00:02:37,530
C'est le sentiment que nous voulons donner.

36
00:02:37,900 --> 00:02:40,110
Nous pouvons le faire en réagissant maintenant.

37
00:02:40,200 --> 00:02:41,700
Assez parlé de la théorie.

38
00:02:42,030 --> 00:02:42,990
Écrivons du code.

39
00:02:43,350 --> 00:02:47,940
Comme je l'ai mentionné, nous le faisons ici dans le dossier source où nous trouvons un indexé sur son fichier

40
00:02:47,940 --> 00:02:50,370
dans le fichier Chase de l'application, deux fichiers très simples.

41
00:02:50,970 --> 00:02:53,100
Voyons maintenant le téléphone indexé.

42
00:02:53,340 --> 00:02:56,010
Voilà, nous avons quelques importations en haut.

43
00:02:56,310 --> 00:02:59,610
C'est d'ailleurs la façon dont vous importez du code sur le front-end.

44
00:03:00,150 --> 00:03:05,550
Importez quelque chose, puis Śiva un chemin relatif vers votre propre fichier.

45
00:03:05,700 --> 00:03:08,820
Ou s'il s'agit d'un package tiers, juste un nom de package.

46
00:03:09,780 --> 00:03:13,080
Et puis ici, nous avons des importations à partir de nos propres fichiers avec un chemin d'accès relatif.

47
00:03:13,170 --> 00:03:16,800
Comme je l'ai mentionné alors ici, nous exécutons une commande à la fin.

48
00:03:16,980 --> 00:03:18,660
React Dom render.

49
00:03:19,740 --> 00:03:24,990
Maintenant, cela vient de l'objet React Dom ici à la fin, que nous importons

50
00:03:24,990 --> 00:03:31,110
de la bibliothèque React Arm, et cela rend cette chose étrange, qui n'est pas du JavaScript normal.

51
00:03:31,490 --> 00:03:31,760
C'est toi.

52
00:03:31,800 --> 00:03:33,900
Cela joue sur notre H. M. page.

53
00:03:34,290 --> 00:03:35,900
Il s'agit de JavaScript standard.

54
00:03:35,910 --> 00:03:39,110
Et ici, nous sélectionnons l'élément avec une idée de racine.

55
00:03:39,510 --> 00:03:42,990
Si nous jetons un œil à notre fichier HGL unique, c'est ce Dave ici.

56
00:03:43,110 --> 00:03:48,270
Donc, les données sont à la fin où notre application de page unique réagira sera hébergée à deux.

57
00:03:48,600 --> 00:03:52,710
Et ils sont prêts à réagir, prendront le relais et rendront tout à cet endroit.

58
00:03:53,940 --> 00:03:55,230
Voilà donc ce que nous faisons ici.

59
00:03:55,260 --> 00:03:58,290
Mais quelle est cette chose étrange pour papa?

60
00:03:58,310 --> 00:04:01,500
Nous devons comprendre quels sont les composants et comment fonctionne React.