1
00:00:02,380 --> 00:00:08,210
Así que ya echamos un vistazo a un conjunto sólido de conceptos básicos que necesita para construir aplicaciones React Native, para trabajar

2
00:00:08,210 --> 00:00:10,050
con estos bloques de construcción centrales, aunque

3
00:00:10,190 --> 00:00:13,460
por supuesto muchas de las cosas aún no están claras, realmente no

4
00:00:13,460 --> 00:00:17,660
hemos tenido una mirada más cercana a estilo y diseño, etc., pero una cosa que

5
00:00:17,780 --> 00:00:22,820
definitivamente deberíamos hacer ahora también es explorar cómo puedes construir tus propios componentes porque hasta ahora, siempre hemos

6
00:00:23,030 --> 00:00:25,780
trabajado en la aplicación. js y ciertamente no

7
00:00:26,000 --> 00:00:28,820
creará aplicaciones más grandes en un solo archivo, ese

8
00:00:28,820 --> 00:00:31,360
archivo se volvería súper grande después de

9
00:00:31,430 --> 00:00:37,190
todo y si tiene un componente personalizado que planea repetir, en este momento tendríamos que copiar y

10
00:00:37,190 --> 00:00:38,420
pegar nuestro código.

11
00:00:38,660 --> 00:00:44,060
Así que creemos nuevos componentes y, por lo tanto, aquí en el proyecto, agregaré una nueva carpeta llamada componentes, el

12
00:00:44,060 --> 00:00:49,020
nombre depende de usted, pero como planeo almacenar algunos componentes allí, el nombre tiene sentido para mí

13
00:00:49,710 --> 00:00:55,250
y allí, yo desea crear un componente para el elemento de la lista y también uno para nuestra área de entrada.

14
00:00:55,340 --> 00:01:00,320
Así que creemos dos archivos nuevos allí y tendré una convención de nomenclatura

15
00:01:00,320 --> 00:01:09,440
para los archivos donde empiezo con mayúsculas y tendré mi GoalItem. js, es un archivo Javascript, por supuesto,

16
00:01:09,440 --> 00:01:16,100
y mi GoalInput. archivo js. Ahora ambos mantendrán el componente React normal, así

17
00:01:16,100 --> 00:01:21,830
que comencemos con el elemento objetivo y, por lo tanto, importe React desde React, tal como debe hacerlo en un proyecto React for web.

18
00:01:21,830 --> 00:01:29,570
Luego, aquí, crearé mi componente funcional, elemento de objetivo que obtiene accesorios y que luego

19
00:01:29,570 --> 00:01:36,000
debe devolver algunos jsx aquí, y exportaré esto como predeterminado, así.

20
00:01:36,090 --> 00:01:42,030
Ahora el jsx que quiero renderizar tiene que usar componentes React Native u otros componentes personalizados que luego a su

21
00:01:42,060 --> 00:01:44,570
vez usan componentes React Native y aquí iré

22
00:01:44,730 --> 00:01:51,790
con este contenido que tenía aquí. Así que lo cortaré de la aplicación. js y devuélvelo aquí.

23
00:01:52,450 --> 00:01:57,100
Ahora para usar esto aquí, tenemos que importar la vista y el texto, por

24
00:01:57,100 --> 00:01:59,970
lo que estos dos componentes, desde React Native.

25
00:01:59,980 --> 00:02:05,760
Así que importaremos la vista y el texto de React-Native aquí.

26
00:02:05,790 --> 00:02:10,410
Además, estoy configurando algunos estilos y quiero usar la hoja de estilos,

27
00:02:10,410 --> 00:02:20,110
así que también importaré esto aquí y luego configuraré mis estilos constantes, que podrías nombrar de manera diferente, por supuesto, con la creación de la

28
00:02:20,380 --> 00:02:26,990
hoja de estilos y volveré a la aplicación. js y toma el estilo de mi elemento de lista aquí, córtalo desde allí y ve al elemento

29
00:02:26,990 --> 00:02:32,960
de objetivo y agrégalo aquí a este objeto que paso a la hoja de estilo. crear.

30
00:02:33,020 --> 00:02:39,140
Ahora, esto debería funcionar, pero, por supuesto, lo que estoy mostrando aquí ya no estará en los datos del elemento, en lugar de

31
00:02:39,500 --> 00:02:46,550
eso, esperemos que simplemente obtengamos esto como accesorios, por lo que cualquiera de los accesorios apoya a los niños para que se pueda pasar entre la etiqueta

32
00:02:46,550 --> 00:02:53,210
de apertura y cierre de nuestro componente personalizado o quizás accesorios. título, lo que quieras, un nombre de

33
00:02:53,210 --> 00:02:59,770
utilería de tu elección entonces. Ahora podemos usar nuestro componente personalizado,

34
00:02:59,770 --> 00:03:06,580
el elemento objetivo volviendo a la aplicación. js y aquí agregaré importar al elemento objetivo con una G mayúscula,

35
00:03:06,580 --> 00:03:15,370
para que React reconozca esto como un componente personalizado de. / components / GoalItem, puede omitir el. js y ahora podemos usar el elemento

36
00:03:15,370 --> 00:03:24,550
de objetivo aquí abajo en el elemento de representación como un componente personalizado, en este caso un componente de cierre automático porque como estoy

37
00:03:24,610 --> 00:03:30,220
usando el título de accesorios y no los accesorios, no espero nada entre la

38
00:03:30,220 --> 00:03:37,660
apertura y el cierre Etiquetas de mi componente personalizado. Sin embargo, espero un accesorio de título, así que configuremos esto aquí

39
00:03:37,660 --> 00:03:43,360
con título y luego aquí, podemos apuntar a los datos del elemento, luego obtener acceso al elemento que es

40
00:03:44,480 --> 00:03:53,210
un objeto donde tenemos una clave de valor y con eso, aún deberíamos ver lo mismo que antes si ingresamos algunos objetivos aquí, aprenda todo sobre rn, sí,

41
00:03:54,870 --> 00:04:01,230
eso se ve bien, ahora con nuestro componente personalizado. Ahora, esta es una buena práctica para que también coloque la entrada

42
00:04:01,260 --> 00:04:07,320
de texto y el botón o esta vista completa aquí realmente en nuestro componente de entrada de objetivos y, por supuesto, para

43
00:04:07,320 --> 00:04:12,810
eso, también deberá conectar la comunicación entre la aplicación. El archivo js y el componente de entrada del objetivo

44
00:04:13,170 --> 00:04:18,930
se informarán cuando los usuarios presionen este botón en el componente de entrada del objetivo y luego agreguen datos aquí en la

45
00:04:18,930 --> 00:04:19,730
aplicación. archivo js.

46
00:04:20,280 --> 00:04:25,260
Es también cómo lo haría en un proyecto React for web, por lo que si tiene experiencia con eso,

47
00:04:25,260 --> 00:04:30,860
no debería ser un problema, de lo contrario lo haremos juntos en la próxima conferencia, pero si sabe cómo hacerlo, definitivamente intente

48
00:04:30,860 --> 00:04:32,250
primero por tu cuenta ahora.