Y para esto, tiene sentido comenzar aquí en la aplicación. archivo js.
Ahora deje esa terminal abierta aquí y ese proceso en ejecución,
por supuesto, para que los cambios en su código se reflejen automáticamente en los emuladores
y ahora veamos cómo podemos comenzar con eso.
Ya mencioné en el primer módulo del curso que React Native se trata de estos componentes
básicos incorporados, como el texto y la vista. Una vista sería su div del desarrollo web en
caso de que sea un desarrollador web, lo que probablemente sea si conoce React.
Por lo tanto, es un
gran componente de contenedor, puede diseñarlo como lo ve aquí y puede envolver otro contenido con él.
Ahora, un texto, por otro lado, es un componente central para la salida
de texto, ese es su objetivo, no para generar una imagen, sino para generar texto.
Ahora, lo que no puede hacer en React Native y eso es lo primero importante, por ejemplo, no puede
generar texto entre una vista como esta.
Si intentamos guardar esto sin ese contenedor de texto, verá que tenemos un error. Por cierto, una pantalla que verá
de vez en cuando al trabajar con React Native, le da un
error, explica qué salió mal. Aquí, por ejemplo, hay un mensaje de error bastante claro que nos dice que las
cadenas de texto deben representarse dentro del componente de texto
y ¿por qué es tan importante?
¿Por qué estoy enfatizando esto?
Debido a que esa es una diferencia importante para el desarrollo web, allí
puede colocar texto en cualquier lugar. En el desarrollo web,
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
Native, no solo porque estamos usando un div que no es compatible allí sino, por supuesto, porque
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
para generar texto y esa es una diferencia crucial para la web donde puede lanzar su texto en cualquier lugar y
en React Native, es la forma Es más importante que utilice el componente integrado adecuado para el trabajo
que desea realizar y para el estilo, para configurar un contenedor donde estructurar contenido diferente, que sería una vista, para
la salida de texto, que podría ser un texto. Para generar una imagen, por ejemplo,
tendrá un componente de imagen. Así es como funciona React Native y
hablando de estilo, de diseño, la vista tiene esto como un trabajo principal, está principalmente allí para aplicar estilos y
diseñar el contenido que tiene allí
y, hablando de eso, comencemos con el diseño.
Digamos que en nuestra aplicación, queremos tener dos áreas principales aquí en esa pantalla. En la parte superior, quiero permitir que el usuario
ingrese un texto y a la derecha de eso, quiero tener un botón para confirmar esta opción y debajo de eso, así
que esa
es la primera
parte, el área de entrada y debajo de eso, tenemos el segunda parte y esa es la lista de
objetivos que ingresó el usuario.
Por lo tanto, aquí en la aplicación. js, podemos comenzar teniendo una vista de ajuste
porque, al igual que en React normal, necesita tener un componente principal y que normalmente será una
vista en React Native porque eso le brinda la mayoría de las opciones
de diseño y estilo y dentro de esa vista, podríamos tener otra vista para el área de entrada donde luego agregamos nuestra
entrada y debajo de eso, otra vista más para tener nuestra lista de objetivos y eliminaré ese texto
y es bastante normal en React Native que tengas bastante de vistas anidadas entre sí, para que pueda crear el diseño que desee.
Ahora, por cierto, eliminemos este contenedor y también de esta asignación de estilo y comencemos con
todo eso desde cero.
Una conclusión importante en este momento es que cada componente provisto por React Native tiene su propio trabajo,
no hay tantos componentes, pero los que están allí tienen roles claramente definidos y luego construyes
tu interfaz de usuario al anidar estos componentes entre sí dependiendo de qué desea lograr,
por ejemplo, si desea crear un diseño, comienza anidando un par de vistas y luego,
una vez que está en la parte en la que desea generar contenido, comenzará a
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
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
texto que mencioné anteriormente y un par de otros componentes principales y verá casi todos esos o la
mayoría de ellos a lo largo de este curso y este es un Es un gran lugar
para profundizar y aprender más sobre ellos y, como ya puede ver, si dejará de
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
componentes principales y así es como funciona React Native. No obstante, podrá crear cualquier aplicación
que desee como verá.