1
00:00:02,230 --> 00:00:06,820
Y para esto, tiene sentido comenzar aquí en la aplicación. archivo js.

2
00:00:06,820 --> 00:00:10,370
Ahora deje esa terminal abierta aquí y ese proceso en ejecución,

3
00:00:10,390 --> 00:00:15,280
por supuesto, para que los cambios en su código se reflejen automáticamente en los emuladores

4
00:00:15,340 --> 00:00:18,420
y ahora veamos cómo podemos comenzar con eso.

5
00:00:18,460 --> 00:00:23,590
Ya mencioné en el primer módulo del curso que React Native se trata de estos componentes

6
00:00:23,590 --> 00:00:28,870
básicos incorporados, como el texto y la vista. Una vista sería su div del desarrollo web en

7
00:00:28,870 --> 00:00:32,920
caso de que sea un desarrollador web, lo que probablemente sea si conoce React.

8
00:00:32,920 --> 00:00:34,790
Por lo tanto, es un

9
00:00:34,810 --> 00:00:40,050
gran componente de contenedor, puede diseñarlo como lo ve aquí y puede envolver otro contenido con él.

10
00:00:40,240 --> 00:00:44,930
Ahora, un texto, por otro lado, es un componente central para la salida

11
00:00:44,930 --> 00:00:49,870
de texto, ese es su objetivo, no para generar una imagen, sino para generar texto.

12
00:00:49,870 --> 00:00:55,540
Ahora, lo que no puede hacer en React Native y eso es lo primero importante, por ejemplo, no puede

13
00:00:55,540 --> 00:00:57,810
generar texto entre una vista como esta.

14
00:00:57,910 --> 00:01:04,120
Si intentamos guardar esto sin ese contenedor de texto, verá que tenemos un error. Por cierto, una pantalla que verá

15
00:01:04,120 --> 00:01:09,880
de vez en cuando al trabajar con React Native, le da un

16
00:01:09,880 --> 00:01:15,910
error, explica qué salió mal. Aquí, por ejemplo, hay un mensaje de error bastante claro que nos dice que las

17
00:01:15,910 --> 00:01:17,800
cadenas de texto deben representarse dentro del componente de texto

18
00:01:17,950 --> 00:01:19,330
y ¿por qué es tan importante?

19
00:01:19,330 --> 00:01:21,100
¿Por qué estoy enfatizando esto?

20
00:01:21,220 --> 00:01:24,590
Debido a que esa es una diferencia importante para el desarrollo web, allí

21
00:01:24,610 --> 00:01:27,850
puede colocar texto en cualquier lugar. En el desarrollo web,

22
00:01:27,970 --> 00:01:35,800
podría tener un div y entre las etiquetas de apertura y cierre de div, podría tener cualquier texto y esto no funcionará en React

23
00:01:35,800 --> 00:01:41,500
Native, no solo porque estamos usando un div que no es compatible allí sino, por supuesto, porque

24
00:01:41,650 --> 00:01:49,810
en React Native, realmente solo puede generar texto entre etiquetas de texto, por lo que debe usar ese componente de texto proporcionado por React Native

25
00:01:49,810 --> 00:01:56,530
para generar texto y esa es una diferencia crucial para la web donde puede lanzar su texto en cualquier lugar y

26
00:01:56,530 --> 00:02:02,560
en React Native, es la forma Es más importante que utilice el componente integrado adecuado para el trabajo

27
00:02:02,560 --> 00:02:09,070
que desea realizar y para el estilo, para configurar un contenedor donde estructurar contenido diferente, que sería una vista, para

28
00:02:09,070 --> 00:02:15,070
la salida de texto, que podría ser un texto. Para generar una imagen, por ejemplo,

29
00:02:15,070 --> 00:02:20,460
tendrá un componente de imagen. Así es como funciona React Native y

30
00:02:20,860 --> 00:02:28,180
hablando de estilo, de diseño, la vista tiene esto como un trabajo principal, está principalmente allí para aplicar estilos y

31
00:02:28,450 --> 00:02:31,070
diseñar el contenido que tiene allí

32
00:02:31,180 --> 00:02:34,050
y, hablando de eso, comencemos con el diseño.

33
00:02:34,360 --> 00:02:39,580
Digamos que en nuestra aplicación, queremos tener dos áreas principales aquí en esa pantalla. En la parte superior, quiero permitir que el usuario

34
00:02:39,580 --> 00:02:45,850
ingrese un texto y a la derecha de eso, quiero tener un botón para confirmar esta opción y debajo de eso, así

35
00:02:45,850 --> 00:02:46,720
que esa

36
00:02:46,720 --> 00:02:47,640
es la primera

37
00:02:47,650 --> 00:02:53,110
parte, el área de entrada y debajo de eso, tenemos el segunda parte y esa es la lista de

38
00:02:53,110 --> 00:02:54,530
objetivos que ingresó el usuario.

39
00:02:54,550 --> 00:03:00,640
Por lo tanto, aquí en la aplicación. js, podemos comenzar teniendo una vista de ajuste

40
00:03:00,640 --> 00:03:06,280
porque, al igual que en React normal, necesita tener un componente principal y que normalmente será una

41
00:03:06,280 --> 00:03:10,590
vista en React Native porque eso le brinda la mayoría de las opciones

42
00:03:10,780 --> 00:03:17,910
de diseño y estilo y dentro de esa vista, podríamos tener otra vista para el área de entrada donde luego agregamos nuestra

43
00:03:17,970 --> 00:03:23,860
entrada y debajo de eso, otra vista más para tener nuestra lista de objetivos y eliminaré ese texto

44
00:03:23,860 --> 00:03:31,350
y es bastante normal en React Native que tengas bastante de vistas anidadas entre sí, para que pueda crear el diseño que desee.

45
00:03:31,380 --> 00:03:38,150
Ahora, por cierto, eliminemos este contenedor y también de esta asignación de estilo y comencemos con

46
00:03:38,150 --> 00:03:40,230
todo eso desde cero.

47
00:03:40,250 --> 00:03:46,100
Una conclusión importante en este momento es que cada componente provisto por React Native tiene su propio trabajo,

48
00:03:46,100 --> 00:03:51,560
no hay tantos componentes, pero los que están allí tienen roles claramente definidos y luego construyes

49
00:03:51,560 --> 00:03:56,510
tu interfaz de usuario al anidar estos componentes entre sí dependiendo de qué desea lograr,

50
00:03:56,510 --> 00:04:01,550
por ejemplo, si desea crear un diseño, comienza anidando un par de vistas y luego,

51
00:04:01,910 --> 00:04:07,040
una vez que está en la parte en la que desea generar contenido, comenzará a

52
00:04:07,250 --> 00:04:14,960
agregar textos, etc. Haré todo eso en las próximas conferencias. También puede ir siempre a los documentos oficiales de React Native y allí, si hace clic

53
00:04:14,960 --> 00:04:21,740
en Guías, Componentes y API, obtendrá una visión general sobre estos componentes básicos. Encontrará la vista aquí, el texto, la imagen, la entrada de

54
00:04:21,740 --> 00:04:27,320
texto que mencioné anteriormente y un par de otros componentes principales y verá casi todos esos o la

55
00:04:27,350 --> 00:04:32,720
mayoría de ellos a lo largo de este curso y este es un Es un gran lugar

56
00:04:32,720 --> 00:04:37,370
para profundizar y aprender más sobre ellos y, como ya puede ver, si dejará de

57
00:04:37,370 --> 00:04:44,360
lado los específicos de la plataforma que están más centrados en el nicho, entonces no hay tantos componentes principales, solo alrededor de 10

58
00:04:44,390 --> 00:04:51,110
componentes principales y así es como funciona React Native. No obstante, podrá crear cualquier aplicación

59
00:04:51,110 --> 00:04:53,690
que desee como verá.