1
00:00:02,620 --> 00:00:08,140
Para ver y editar nuestro código, necesitamos un editor y recomiendo usar Visual Studio Code, que es un IDE muy

2
00:00:08,140 --> 00:00:13,480
potente y gratuito que es excelente para el desarrollo de Javascript, que es lo que estamos haciendo aquí

3
00:00:13,480 --> 00:00:14,210
al final.

4
00:00:14,290 --> 00:00:16,680
Puedes obtenerlo del código. estudio visual. com allí

5
00:00:16,720 --> 00:00:21,490
encontrará versiones para Mac, Windows y Linux, simplemente descargue la de su sistema

6
00:00:21,790 --> 00:00:28,070
operativo y recorra el instalador que le brinda. Una vez que lo instaló, abra Visual

7
00:00:28,070 --> 00:00:34,390
Studio Code y allí, abra su proyecto yendo a abrir archivo y luego simplemente elija

8
00:00:34,390 --> 00:00:40,200
su proyecto, en mi caso, rn-first-app. Haga clic en abrir aquí y

9
00:00:40,220 --> 00:00:47,080
esto abrirá el proyecto aquí en Visual Studio Code. Ahora mi Código de Visual Studio se ve como se ve aquí porque tengo

10
00:00:47,380 --> 00:00:51,950
habilitado un tema especial que puede cambiar en preferencias, tema de color y allí estoy usando el tema dark plus.

11
00:00:51,970 --> 00:00:54,420
Entonces, si desea tener el mismo

12
00:00:54,670 --> 00:01:00,680
aspecto, puede usar eso y también instalé una extensión especial que puede hacer bajo ver extensiones,

13
00:01:00,760 --> 00:01:08,230
allí instalé el tema del icono de material, este aquí, que es totalmente opcional, pero puede instalarlo desde allí también

14
00:01:08,230 --> 00:01:09,550
y luego regrese

15
00:01:09,580 --> 00:01:13,480
a ver el explorador para ver sus archivos nuevamente para que

16
00:01:13,510 --> 00:01:16,060
obtenga los mismos íconos de archivos que

17
00:01:16,060 --> 00:01:24,290
yo tengo aquí, nuevamente es totalmente opcional y con eso fuera del camino, esta es nuestra aplicación React Native administrada por expo.

18
00:01:24,300 --> 00:01:28,920
Ahora déjame guiarte rápidamente por lo que tenemos aquí y luego mostrarte lo que puedes cambiar en

19
00:01:29,190 --> 00:01:31,470
el código para cambiar algo en tu aplicación.

20
00:01:31,470 --> 00:01:34,350
Ahora tenemos un par de carpetas y

21
00:01:34,380 --> 00:01:37,570
archivos aquí, el. La carpeta expo solo

22
00:01:37,590 --> 00:01:43,500
tiene alguna configuración para expo, no necesita tocar esto. La carpeta de activos, que contiene algunas imágenes en este caso, como

23
00:01:43,500 --> 00:01:49,470
el ícono de su aplicación y la imagen de la pantalla de presentación, profundizaremos en cómo puede personalizar esto hacia el final del curso y usaremos otros

24
00:01:49,470 --> 00:01:55,470
activos como imágenes en general a lo largo de este curso, por supuesto. La carpeta de módulos de nodo contiene todas las

25
00:01:55,470 --> 00:02:01,120
dependencias de este proyecto, es decir, React y React Native, pero también las dependencias de dependencias y

26
00:02:01,120 --> 00:02:05,740
esta carpeta se administra automáticamente para usted, por lo que no necesita tocar

27
00:02:05,790 --> 00:02:11,460
esto y no debe tocarlo realmente . gitignore es un archivo que nos ayuda con git,

28
00:02:11,460 --> 00:02:16,920
que es un sistema de administración de código fuente o una herramienta de administración de código fuente y

29
00:02:16,920 --> 00:02:22,860
no necesita usar git; si lo hace, probablemente sepa qué hace gitignore y si no sabe qué git es,

30
00:02:22,860 --> 00:02:29,100
después de esta conferencia, encontrarás una breve introducción o algunos recursos que te ayudarán a comenzar con ella, pero no

31
00:02:29,130 --> 00:02:34,530
necesitas usar git para trabajar con React Native. Watchmenconfig, eso es algo que puedes ignorar ya que ves que está vacío aquí, es

32
00:02:34,530 --> 00:02:39,750
una herramienta utilizada detrás de escena por expo al final y la aplicación. js luego el archivo que

33
00:02:39,750 --> 00:02:45,930
contiene el código responsable de representar lo que vemos aquí en la pantalla.

34
00:02:46,590 --> 00:02:52,350
Nos sumergiremos en esto en un segundo, aplicación. json tiene alguna configuración para nuestra aplicación React Native impulsada por

35
00:02:52,350 --> 00:02:59,140
expo y también profundizaremos en esto a lo largo de este curso por ahora, ignorémoslo. La configuración de Babel configura cómo se

36
00:02:59,140 --> 00:03:04,950
optimiza y compila el código Javascript, también puede dejar el valor predeterminado

37
00:03:04,950 --> 00:03:10,380
aquí y el paquete. El archivo json administra sus dependencias y allí

38
00:03:10,700 --> 00:03:17,970
verá que está usando expo pero también React, también React DOM porque expo en realidad también admite la creación de aplicaciones React para web, pero

39
00:03:17,970 --> 00:03:23,910
también React Native aquí y React Native web porque nuevamente, expo le da la opción de construir aplicaciones web con

40
00:03:23,910 --> 00:03:28,710
la ayuda de React Native, no es algo en lo que nos centraremos en este curso.

41
00:03:28,710 --> 00:03:30,600
Así que esa es la configuración que tenemos

42
00:03:30,600 --> 00:03:35,520
aquí, el archivo importante para nosotros en este momento es la aplicación. js porque es el responsable final de

43
00:03:35,790 --> 00:03:37,800
llevar algo a la pantalla.

44
00:03:37,800 --> 00:03:43,350
Ahora el contenido exacto del archivo que está viendo aquí en su aplicación. Sin embargo, el archivo js podría cambiar

45
00:03:43,410 --> 00:03:48,390
con el tiempo, este proyecto inicial que se genera automáticamente simplemente a veces cambia.

46
00:03:48,570 --> 00:03:53,520
Eso, por supuesto, no afecta lo que explico aquí o este curso, no significa que algo esté

47
00:03:53,520 --> 00:03:55,300
desactualizado o algo así, es

48
00:03:55,350 --> 00:03:57,580
solo un proyecto de inicio diferente y

49
00:03:57,720 --> 00:04:03,130
si quieres seguir exactamente el mismo que obtuve, tú ' Lo encontrará adjunto, por lo que también puede usarlo,

50
00:04:03,150 --> 00:04:07,320
pero por supuesto, también podría continuar con los espectadores si se ve un poco

51
00:04:07,320 --> 00:04:09,870
diferente porque, como mencioné, es solo un proyecto

52
00:04:09,870 --> 00:04:14,250
inicial que tiene, React Native, por supuesto, todavía funciona igual que Lo expliqué aquí y,

53
00:04:14,250 --> 00:04:19,770
por lo tanto, puedes seguirlo y agregar tu aplicación. archivo js tal como lo agregué y

54
00:04:19,770 --> 00:04:24,290
allí vemos que importamos React tal como lo haríamos en una aplicación web React.

55
00:04:24,420 --> 00:04:30,630
Necesitamos importar React porque aquí, también puedes ver que estamos usando jsx, que es esta sintaxis especial

56
00:04:30,630 --> 00:04:32,640
de Javascript que se parece

57
00:04:32,790 --> 00:04:35,390
a HTML pero al final es solo

58
00:04:35,460 --> 00:04:42,120
Javascript y en caso de que nunca lo hayas visto, definitivamente sumérgete en una aplicación React o React tutorial

59
00:04:42,270 --> 00:04:45,720
primero, espero que sepa cómo funciona React en general.

60
00:04:45,720 --> 00:04:51,270
Siempre tenemos otra importación aquí y esa es la importación React Native donde importamos hoja de estilo,

61
00:04:51,360 --> 00:04:53,220
texto y vista desde allí.

62
00:04:53,220 --> 00:04:59,640
Ahora, estos son estos componentes y características especiales de los que hablaba anteriormente, el texto y la vista son

63
00:04:59,640 --> 00:05:06,720
componentes proporcionados por React Native que se compilan en widgets de plataforma nativa y la hoja de estilo es una característica adicional

64
00:05:06,720 --> 00:05:10,290
proporcionada por React Native que lo ayuda con el estilo.

65
00:05:10,290 --> 00:05:15,820
Ahora, aquí, tenemos un componente React normal, ya que también lo construiríamos en una aplicación React for web.

66
00:05:16,120 --> 00:05:21,960
Tenemos un componente funcional aquí y, con la ayuda de React hooks, podemos trabajar con componentes funcionales

67
00:05:21,960 --> 00:05:28,110
solo como probablemente sepa y este componente funcional devuelve un código jsx que se muestra en la pantalla y

68
00:05:28,200 --> 00:05:29,270
aquí estamos

69
00:05:29,400 --> 00:05:35,550
usando el widget de vista o el componente de vista proporcionado por React Native y el componente de

70
00:05:36,270 --> 00:05:38,790
texto y el componente de vista es como

71
00:05:38,790 --> 00:05:45,720
un div, es un buen contenedor, también bueno para aplicar algunos estilos para algunos contenedores y detecta que luego se usa

72
00:05:45,870 --> 00:05:50,030
para generar texto que coloca entre su apertura y Etiquetas de cierre.

73
00:05:50,270 --> 00:05:57,090
Y aquí abajo, tenemos algunos estilos definidos, React Native no usa CSS, pero usa una sintaxis de

74
00:05:57,090 --> 00:06:04,890
estilo que se basa en CSS o sigue convenciones de nomenclatura similares, pero profundizaremos en cómo diseñar sus aplicaciones React

75
00:06:04,890 --> 00:06:08,550
Native a lo largo de este curso. por supuesto.

76
00:06:08,550 --> 00:06:14,490
Con eso, cambiemos lo que vemos en la pantalla y agreguemos un botón aquí.

77
00:06:14,490 --> 00:06:20,730
Ahora lo bueno es que podemos importar un botón de React Native, ese es otro componente central proporcionado por React Native, por lo que podemos

78
00:06:20,730 --> 00:06:26,140
agregar esta importación y luego usar un botón allí abajo. Sin embargo, no lo usamos con una etiqueta de

79
00:06:26,140 --> 00:06:27,280
apertura y cierre,

80
00:06:27,280 --> 00:06:33,190
sino como un elemento de cierre automático y luego podemos agregar un accesorio de título aquí para establecer el

81
00:06:33,460 --> 00:06:36,620
texto que vemos en un botón, por ejemplo, cambiar texto.

82
00:06:36,850 --> 00:06:41,010
Ahora, cuando tocamos este botón, es posible que queramos cambiar este texto aquí y para

83
00:06:41,200 --> 00:06:45,970
esto, necesitamos administrar algún estado aquí porque quiero cambiar algunos datos que deberían conducir a que este

84
00:06:46,180 --> 00:06:49,680
componente se vuelva a representar y para esto, necesita un estado .

85
00:06:49,900 --> 00:06:56,110
Ahora antes de Reaccionar 16. 8 que se admite aquí, sin embargo, tendría que convertir esto a un componente basado

86
00:06:56,110 --> 00:07:00,270
en la clase para usar State, desde React 16. 8, podemos usar los ganchos

87
00:07:00,310 --> 00:07:03,710
React y en caso de que no sepas qué son

88
00:07:03,820 --> 00:07:08,620
los ganchos, definitivamente deberías sumergirte en los conceptos básicos de los ganchos, adjunto encontrarás

89
00:07:08,620 --> 00:07:14,800
recursos que te ayudarán a comenzar con eso. Los ganchos se importan de React y aquí, necesitamos el gancho useState que

90
00:07:14,800 --> 00:07:17,290
nos permite administrar el estado en un componente funcional.

91
00:07:17,290 --> 00:07:26,230
Con eso, podemos usar ese gancho llamando a useState aquí y dándole un valor predeterminado que podría ser este texto aquí, vamos a cortarlo desde allí y

92
00:07:26,230 --> 00:07:27,910
agregarlo aquí como una cadena

93
00:07:27,910 --> 00:07:34,420
y luego aquí podemos usar la desestructuración de la matriz para obtener nuestra salida texto y obtenga una función para

94
00:07:34,420 --> 00:07:41,040
cambiar o restablecer o anular este texto de salida y así es como funciona el gancho useState, le brinda una

95
00:07:41,110 --> 00:07:43,800
matriz con exactamente dos elementos, donde el primer

96
00:07:43,840 --> 00:07:49,620
elemento es su instantánea de estado actual, por lo tanto, nuestro estado inicial o posteriormente para los ciclos

97
00:07:49,660 --> 00:07:55,510
de representación posteriores, sea lo que sea que establezcamos nuestro estado y la segunda es una función que

98
00:07:55,510 --> 00:07:56,120
le

99
00:07:56,220 --> 00:08:01,300
permite establecer su estado en un nuevo valor y al llamar a esa función se

100
00:08:01,530 --> 00:08:07,150
volverá a representar todo el componente y el texto de salida se referirá al último Nuevo estado.

101
00:08:07,180 --> 00:08:13,670
Entonces, entre texto, quiero generar texto de salida y, al presionar este botón,

102
00:08:13,680 --> 00:08:15,400
quiero cambiar esto.

103
00:08:15,400 --> 00:08:21,250
Entonces, en el botón, podemos registrar onPress, que es básicamente el equivalente a onClick que

104
00:08:21,310 --> 00:08:22,640
tendríamos en la

105
00:08:22,660 --> 00:08:29,020
web, aquí está onPress y luego debemos vincular esto a una función, por ejemplo a una

106
00:08:29,020 --> 00:08:36,740
función en línea anónima aquí con esta sintaxis donde llamamos establecer texto de salida y establecemos esto al texto cambiado.

107
00:08:36,820 --> 00:08:42,340
Entonces, esto llamará a esta función aquí, anulará nuestro estado, por lo tanto, volverá a generar este

108
00:08:42,340 --> 00:08:48,100
componente, se actualizará en el próximo ciclo de representación y, por lo tanto, dado que enviamos texto de

109
00:08:48,100 --> 00:08:51,520
salida allí, esto cambiará. Si ahora guardamos

110
00:08:51,520 --> 00:08:58,840
todo eso, lo bueno es que su aplicación que aún debería haber abierto en su teléfono

111
00:08:58,850 --> 00:09:00,830
debería haberse recargado automáticamente,

112
00:09:00,920 --> 00:09:08,090
no necesita reiniciarla, no necesita escanear este código aquí nuevamente, solo Al cambiar el código

113
00:09:08,150 --> 00:09:15,320
y guardar este archivo, debería recargarse automáticamente aquí. Y ahora, si tocamos cambiar texto aquí, verá que el texto ha cambiado

114
00:09:15,320 --> 00:09:19,020
y esa es su primera aplicación React Native que hace su trabajo impulsada por

115
00:09:19,040 --> 00:09:24,590
expo, pero nuevamente puede compilar y publicar esto como una aplicación independiente y lo haremos al final de el curso y,

116
00:09:24,740 --> 00:09:30,110
por lo tanto, esta es una forma increíble de comenzar y el desarrollo de React Native puede ser tan fácil

117
00:09:30,110 --> 00:09:30,850
como eso.

118
00:09:31,150 --> 00:09:36,510
Ahora con eso, terminemos este primer módulo antes de sumergirnos más profundamente en React Native y escribir

119
00:09:36,590 --> 00:09:40,130
código React Native desde el segundo módulo del curso en adelante.