1
00:00:02,250 --> 00:00:09,030
Para que este adjunto encuentre un proyecto inicial, este proyecto inicial se creó con la aplicación Create React,

2
00:00:09,150 --> 00:00:11,820
una herramienta creada por el equipo React.

3
00:00:11,880 --> 00:00:18,510
Al final, lo que facilita la puesta en marcha de nuevos proyectos de reacción y nos da una estructura de proyecto como esta.

4
00:00:18,630 --> 00:00:22,980
Lo ajusté un poco, pero en general es exactamente lo mismo que obtendría con esta herramienta.

5
00:00:23,460 --> 00:00:25,550
Ahora, ¿por qué necesitamos una herramienta así?

6
00:00:25,560 --> 00:00:28,020
¿Por qué no solo importamos un script en nuestro H.

7
00:00:28,020 --> 00:00:29,580
Archivo HTML y empezar?

8
00:00:30,120 --> 00:00:33,660
Porque React es un poco más complejo que JavaScript de vainilla.

9
00:00:33,840 --> 00:00:39,660
Al final, enviamos código JavaScript vainilla, pero la forma en que escribimos en el código es un poco más conveniente para

10
00:00:39,690 --> 00:00:40,770
nosotros como desarrolladores.

11
00:00:41,070 --> 00:00:46,620
Podemos usar ciertas características que no se ejecutarían en el navegador y, por lo tanto, la configuración de este

12
00:00:46,620 --> 00:00:52,680
proyecto aquí tiene un par de herramientas incluidas que toman el código que escribimos como desarrollador y lo convierten en un código

13
00:00:52,680 --> 00:00:54,480
que se ejecuta en un navegador.

14
00:00:54,570 --> 00:00:57,960
Entonces, ¿teníamos Neuroma, el código que se ejecuta en el navegador?

15
00:00:58,320 --> 00:01:01,710
Pero nos resulta más fácil escribir ese código como desarrollador.

16
00:01:02,220 --> 00:01:07,800
Además, obtenemos un servidor de desarrollo, que es un servidor simple que sirve a nuestra aplicación front-end, por lo

17
00:01:07,860 --> 00:01:13,020
que no tiene respaldo y solo sirve esa aplicación front-end y que automáticamente recarga o inyecta cambios

18
00:01:13,020 --> 00:01:18,060
cada vez que cambiamos y guardamos algo en una de nuestras fuentes archivos de código

19
00:01:18,780 --> 00:01:23,950
Además, aquí con REACT, estamos creando una aplicación de página única.

20
00:01:24,060 --> 00:01:29,040
Eso no es obligatorio, pero es una opción común en una aplicación de una sola página.

21
00:01:29,370 --> 00:01:34,710
Solo tiene un archivo H Timal, que al final es devuelto por el servidor que sirve esa aplicación.

22
00:01:34,890 --> 00:01:39,360
En este caso, este archivo de Timmo de edad, que está relativamente vacío.

23
00:01:39,930 --> 00:01:44,490
Pero este archivo luego incluirá importaciones de scripts.

24
00:01:44,620 --> 00:01:50,370
Se agregarán automáticamente mediante estas herramientas que mencioné anteriormente, que al final alojan y ejecutan nuestra aplicación

25
00:01:50,430 --> 00:01:56,280
de reacción, que a su vez estamos aquí en la carpeta de origen con nuestros archivos, así que

26
00:01:57,000 --> 00:02:03,420
al final tenemos una aplicación web de Front End, que consiste en un archivo h html donde Denn JavaScript

27
00:02:03,420 --> 00:02:09,450
se usa para representar algo en la pantalla y volver a representar ese elemento en la pantalla cuando

28
00:02:09,750 --> 00:02:10,740
sea necesario.

29
00:02:11,250 --> 00:02:17,910
Y eso nos permite construir interfaces de usuario modernas altamente reactivas donde todo sucede instantáneamente porque JavaScript se

30
00:02:18,030 --> 00:02:21,480
ejecuta en el navegador, las cosas suceden instantáneamente.

31
00:02:21,570 --> 00:02:25,530
No necesitamos esperar a que un nuevo archivo L se descargue de un servidor.

32
00:02:25,950 --> 00:02:27,510
Es que todo ya está ahí.

33
00:02:27,570 --> 00:02:33,270
Entonces, cuando un usuario hace clic en un botón y queremos mostrar un cuadro en la pantalla en respuesta a ese

34
00:02:33,540 --> 00:02:35,730
auge de clics, ocurre instantáneamente debido a JavaScript.

35
00:02:36,090 --> 00:02:37,530
Ese es el sentimiento que queremos brindar.

36
00:02:37,900 --> 00:02:40,110
Podemos hacer eso con reaccionar ahora.

37
00:02:40,200 --> 00:02:41,700
Basta de hablar de la teoría.

38
00:02:42,030 --> 00:02:42,990
Escribamos un código.

39
00:02:43,350 --> 00:02:47,940
Como mencioné, lo hacemos aquí en la carpeta de origen donde encontramos un índice de su archivo en el

40
00:02:47,940 --> 00:02:50,370
archivo Chase de la aplicación, ambos archivos muy simples.

41
00:02:50,970 --> 00:02:53,100
Ahora echemos un vistazo al teléfono de probabilidad indexada.

42
00:02:53,340 --> 00:02:56,010
Ahí ves, tenemos un par de importaciones en la parte superior.

43
00:02:56,310 --> 00:02:59,610
Así es, por cierto, cómo se importa el código en el front-end.

44
00:03:00,150 --> 00:03:05,550
Importa algo desde y luego Śiva una ruta relativa a tu propio archivo.

45
00:03:05,700 --> 00:03:08,820
O si es un paquete de terceros, solo un nombre de paquete.

46
00:03:09,780 --> 00:03:13,080
Y luego aquí tenemos importaciones de nuestros propios archivos con una ruta relativa.

47
00:03:13,170 --> 00:03:16,800
Como mencioné, aquí estamos ejecutando un comando al final.

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

49
00:03:19,740 --> 00:03:24,990
Ahora, esto proviene del objeto React Dom aquí al final, que estamos importando

50
00:03:24,990 --> 00:03:31,110
de la biblioteca React Arm, y eso hace que esto sea extraño, que no es JavaScript normal.

51
00:03:31,490 --> 00:03:31,760
Eres tu.

52
00:03:31,800 --> 00:03:33,900
Esto juega en nuestro H. METRO. página.

53
00:03:34,290 --> 00:03:35,900
Este es JavaScript normal.

54
00:03:35,910 --> 00:03:39,110
Y aquí estamos seleccionando el elemento con una idea de raíz.

55
00:03:39,510 --> 00:03:42,990
Si echamos un vistazo a nuestro único archivo HGL, este es Dave aquí.

56
00:03:43,110 --> 00:03:48,270
Entonces, los datos están al final donde nuestra aplicación Reaccionar página única se alojará en dos.

57
00:03:48,600 --> 00:03:52,710
Y están listos para reaccionar, se harán cargo y renderizarán todo en ese lugar.

58
00:03:53,940 --> 00:03:55,230
Entonces eso es lo que estamos haciendo aquí.

59
00:03:55,260 --> 00:03:58,290
Pero, ¿qué es esto extraño para papá?

60
00:03:58,310 --> 00:04:01,500
Necesitamos entender qué son los componentes y cómo funciona la reacción.