1
00:00:02,380 --> 00:00:07,720
Entonces aprendimos que tenemos que indicar Transvaal y puedo decirte que este archivo al final incluye Decode,

2
00:00:07,720 --> 00:00:09,280
que se ejecuta primero.

3
00:00:09,310 --> 00:00:16,300
Cuando comenzamos nuestra aplicación y eso hace que esta cosa extraña entre en el lugar de este d'Hiv aquí.

4
00:00:16,780 --> 00:00:19,480
¿Qué es esa extraña aplicación aquí?

5
00:00:20,170 --> 00:00:24,920
Reimportación de la aplicación desde este archivo de aplicación Indio desde el archivo de aplicación Shreyas.

6
00:00:24,970 --> 00:00:27,640
Porque las extensiones se agregan automáticamente en las importaciones.

7
00:00:28,410 --> 00:00:31,360
Estimado, lo que tenemos es al final una función de JavaScript.

8
00:00:31,510 --> 00:00:35,200
Esta es una función regular, una función de flecha almacenada y es constante.

9
00:00:35,620 --> 00:00:40,330
Y luego exportamos esta constante y, por lo tanto, es una función bastante sencilla.

10
00:00:40,540 --> 00:00:43,120
Pero lo que hay dentro de la función no es sencillo.

11
00:00:43,530 --> 00:00:50,770
Lo que devolvemos aquí parece edad, Timal, al igual que esto parece edad html, pero está en un archivo

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

13
00:00:51,250 --> 00:00:52,480
No puede ser h html.

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

15
00:00:52,780 --> 00:00:55,330
No puede agregar h html en un archivo JavaScript.

16
00:00:56,230 --> 00:00:59,330
Esa es una sintaxis especial inventada por el equipo React.

17
00:00:59,350 --> 00:01:01,090
Se llama J como X ..

18
00:01:01,480 --> 00:01:08,530
Y nos permite a H enviar un correo electrónico buscando código en archivos JavaScript debajo del capó.

19
00:01:08,560 --> 00:01:14,350
Esto se traducirá a instrucciones que reacciona entiende en detalle.

20
00:01:14,380 --> 00:01:24,160
Este año es similar al elemento react create, un método proporcionado en este objeto react aquí y luego aquí.

21
00:01:25,480 --> 00:01:26,320
Edad uno

22
00:01:27,100 --> 00:01:27,970
Y luego aquí.

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

24
00:01:31,130 --> 00:01:32,390
O un objeto vacío.

25
00:01:32,750 --> 00:01:36,860
Y luego hay un tercer argumento, su texto aquí, por ejemplo.

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

27
00:01:38,510 --> 00:01:40,020
Esto es reaccionar.

28
00:01:42,050 --> 00:01:45,650
Texto diferente al anterior, pero mostrará algo similar en la pantalla.

29
00:01:46,220 --> 00:01:49,040
Esto producirá el mismo resultado y puedo demostrártelo.

30
00:01:49,400 --> 00:01:55,430
Si simplemente iniciamos nuestro servidor de desarrollo e intentamos ver esta aplicación y la acción para iniciarlo y el paquete para

31
00:01:55,430 --> 00:01:59,480
perseguir el archivo, encontraremos un script para iniciar el script, que ya existe allí.

32
00:01:59,870 --> 00:02:02,000
Y esto, al final, utilizará esas herramientas.

33
00:02:02,030 --> 00:02:07,310
Mencioné anteriormente para luego transformar nuestro código y poner en marcha un servidor de desarrollo

34
00:02:07,310 --> 00:02:10,640
que automáticamente recarga o inyecta cambios cuando cambiamos algo.

35
00:02:11,210 --> 00:02:15,710
Entonces aquí podemos abrir una nueva terminal integrada en esta idea.

36
00:02:17,040 --> 00:02:20,110
Y están en NPM comienzan a abrir ese servidor de desarrollo.

37
00:02:20,500 --> 00:02:25,510
Y debe mantener ese servidor en funcionamiento mientras trabaje en su código, porque cuando lo cierra, ya

38
00:02:25,510 --> 00:02:29,050
no puede obtener una vista previa de su página, su aplicación.

39
00:02:29,980 --> 00:02:34,750
Ahora, cuando inicia este servidor, cuando ejecuta npm start, debería abrir automáticamente una nueva pestaña

40
00:02:34,750 --> 00:02:36,910
en el navegador en localhost 3000.

41
00:02:37,150 --> 00:02:41,320
Si no lo hace solo por su cuenta y visitado y querido, debería ver hide.

42
00:02:41,350 --> 00:02:44,560
Esto es reaccionar, que claramente es el texto que ingresé aquí.

43
00:02:45,430 --> 00:02:51,970
Así que al final de este año es React Syntex y podríamos escribir toda nuestra aplicación con esta sintaxis.

44
00:02:52,180 --> 00:02:57,760
Pero esto se vuelve muy engorroso, especialmente si comenzamos a anidar elementos entre sí.

45
00:02:58,270 --> 00:03:05,170
Es por eso que React nos da esta alternativa J. S. Sintaxis X, que al final solo se traduce

46
00:03:05,170 --> 00:03:07,930
para reaccionar, crear elemento y luego lo que acabo de mostrar.

47
00:03:08,380 --> 00:03:13,420
Esa es también la razón por la que necesitamos importar reaccionar aquí, a pesar de que parece que no estamos usando este objeto de

48
00:03:13,450 --> 00:03:15,070
reacción en ninguna parte de este archivo.

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

50
00:03:15,430 --> 00:03:18,280
Tenemos que reaccionar el texto aquí, pero eso es algo diferente.

51
00:03:18,610 --> 00:03:20,470
Así que no lo estamos usando en ninguna parte de este archivo.

52
00:03:20,710 --> 00:03:24,820
Bueno, se usa implícitamente porque esto es solo azúcar sintáctico.

53
00:03:24,940 --> 00:03:28,090
Al final, se traduce a esa sintaxis obvia.

54
00:03:28,180 --> 00:03:28,780
Te lo mostré

55
00:03:29,230 --> 00:03:31,060
Y de eso se trata el reactor.

56
00:03:31,450 --> 00:03:34,090
Le decimos a reaccionar qué elementos debe representar.

57
00:03:34,420 --> 00:03:40,300
Y debajo del capó, lo traduciremos a comandos que el DOM entiende, que el

58
00:03:40,300 --> 00:03:43,270
navegador entiende para representar elementos DOM reales.

59
00:03:43,900 --> 00:03:49,840
Ahora, por ejemplo, si agrego el título aquí, que nos da esta información sobre herramientas que está integrada en el navegador,

60
00:03:49,840 --> 00:03:50,320
básicamente.

61
00:03:51,580 --> 00:03:54,130
Esto funciona y lo guardo.

62
00:03:54,550 --> 00:03:55,540
Se recarga automáticamente.

63
00:03:55,570 --> 00:03:58,360
No es necesario que lo haga solo y ahora debe pasar el cursor sobre esto.

64
00:03:58,570 --> 00:03:59,590
Ves esta información sobre herramientas.

65
00:03:59,740 --> 00:04:04,000
Esto funciona muy pequeño aquí, pero puede verlo si prueba esto en su propio sistema.

66
00:04:04,940 --> 00:04:11,600
Ahora, esto funciona porque papá, al final se traduce para reaccionar, crear elemento.

67
00:04:13,650 --> 00:04:17,750
La primera edad, luego objeta, lo que consideramos vacío aquí.

68
00:04:18,150 --> 00:04:24,090
Establecemos los atributos o las propiedades que queremos establecer en ese nodo DOM, que se crea aquí en

69
00:04:24,090 --> 00:04:26,310
este caso, título dos, esto funciona.

70
00:04:26,520 --> 00:04:28,380
Y luego, tenemos el texto.

71
00:04:28,740 --> 00:04:30,270
Así es como funciona y reacciona esto.

72
00:04:30,270 --> 00:04:31,510
Haremos todo lo que tenga que hacer.

73
00:04:31,530 --> 00:04:32,820
Creará este elemento.

74
00:04:33,210 --> 00:04:36,180
Establecerá todas estas propiedades o atributos aquí.

75
00:04:36,540 --> 00:04:38,950
Y representará el último argumento aquí.

76
00:04:39,270 --> 00:04:40,890
Dentro de ese elemento creado.

77
00:04:41,310 --> 00:04:47,340
Y esa es también la parte en la que es J el código X nos ayuda, porque si aquí tenemos,

78
00:04:47,430 --> 00:04:49,290
digamos, otro elemento H html.

79
00:04:49,620 --> 00:04:56,010
Tendríamos que anidar múltiples reacciones, crear llamadas de elementos entre sí, lo que rápidamente se vuelve muy

80
00:04:56,340 --> 00:04:57,510
difícil de administrar.

81
00:04:57,540 --> 00:05:00,200
Es por eso que es J es el índice X.

82
00:05:00,210 --> 00:05:02,460
Aquí hay una gran idea, un gran invento.

83
00:05:03,000 --> 00:05:05,980
Entonces usaremos la sintaxis y también la usamos aquí en el Índice J.

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

85
00:05:06,570 --> 00:05:10,640
Sin embargo, la diferencia es que aquí no lo usamos con una H. normal

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

87
00:05:12,180 --> 00:05:20,520
Pero en su lugar aquí usamos una función personalizada porque estamos usando lo que se exporta en la apertura como archivo.

88
00:05:21,060 --> 00:05:24,180
Y lo que exportamos allí es una función JavaScript normal.

89
00:05:24,840 --> 00:05:29,060
Bueno, ese es uno de los conceptos más importantes de los componentes de reacción.