Para ver y editar nuestro código, necesitamos un editor y recomiendo usar Visual Studio Code, que es un IDE muy
potente y gratuito que es excelente para el desarrollo de Javascript, que es lo que estamos haciendo aquí
al final.
Puedes obtenerlo del código. estudio visual. com allí
encontrará versiones para Mac, Windows y Linux, simplemente descargue la de su sistema
operativo y recorra el instalador que le brinda. Una vez que lo instaló, abra Visual
Studio Code y allí, abra su proyecto yendo a abrir archivo y luego simplemente elija
su proyecto, en mi caso, rn-first-app. Haga clic en abrir aquí y
esto abrirá el proyecto aquí en Visual Studio Code. Ahora mi Código de Visual Studio se ve como se ve aquí porque tengo
habilitado un tema especial que puede cambiar en preferencias, tema de color y allí estoy usando el tema dark plus.
Entonces, si desea tener el mismo
aspecto, puede usar eso y también instalé una extensión especial que puede hacer bajo ver extensiones,
allí instalé el tema del icono de material, este aquí, que es totalmente opcional, pero puede instalarlo desde allí también
y luego regrese
a ver el explorador para ver sus archivos nuevamente para que
obtenga los mismos íconos de archivos que
yo tengo aquí, nuevamente es totalmente opcional y con eso fuera del camino, esta es nuestra aplicación React Native administrada por expo.
Ahora déjame guiarte rápidamente por lo que tenemos aquí y luego mostrarte lo que puedes cambiar en
el código para cambiar algo en tu aplicación.
Ahora tenemos un par de carpetas y
archivos aquí, el. La carpeta expo solo
tiene alguna configuración para expo, no necesita tocar esto. La carpeta de activos, que contiene algunas imágenes en este caso, como
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
activos como imágenes en general a lo largo de este curso, por supuesto. La carpeta de módulos de nodo contiene todas las
dependencias de este proyecto, es decir, React y React Native, pero también las dependencias de dependencias y
esta carpeta se administra automáticamente para usted, por lo que no necesita tocar
esto y no debe tocarlo realmente . gitignore es un archivo que nos ayuda con git,
que es un sistema de administración de código fuente o una herramienta de administración de código fuente y
no necesita usar git; si lo hace, probablemente sepa qué hace gitignore y si no sabe qué git es,
después de esta conferencia, encontrarás una breve introducción o algunos recursos que te ayudarán a comenzar con ella, pero no
necesitas usar git para trabajar con React Native. Watchmenconfig, eso es algo que puedes ignorar ya que ves que está vacío aquí, es
una herramienta utilizada detrás de escena por expo al final y la aplicación. js luego el archivo que
contiene el código responsable de representar lo que vemos aquí en la pantalla.
Nos sumergiremos en esto en un segundo, aplicación. json tiene alguna configuración para nuestra aplicación React Native impulsada por
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
optimiza y compila el código Javascript, también puede dejar el valor predeterminado
aquí y el paquete. El archivo json administra sus dependencias y allí
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
también React Native aquí y React Native web porque nuevamente, expo le da la opción de construir aplicaciones web con
la ayuda de React Native, no es algo en lo que nos centraremos en este curso.
Así que esa es la configuración que tenemos
aquí, el archivo importante para nosotros en este momento es la aplicación. js porque es el responsable final de
llevar algo a la pantalla.
Ahora el contenido exacto del archivo que está viendo aquí en su aplicación. Sin embargo, el archivo js podría cambiar
con el tiempo, este proyecto inicial que se genera automáticamente simplemente a veces cambia.
Eso, por supuesto, no afecta lo que explico aquí o este curso, no significa que algo esté
desactualizado o algo así, es
solo un proyecto de inicio diferente y
si quieres seguir exactamente el mismo que obtuve, tú ' Lo encontrará adjunto, por lo que también puede usarlo,
pero por supuesto, también podría continuar con los espectadores si se ve un poco
diferente porque, como mencioné, es solo un proyecto
inicial que tiene, React Native, por supuesto, todavía funciona igual que Lo expliqué aquí y,
por lo tanto, puedes seguirlo y agregar tu aplicación. archivo js tal como lo agregué y
allí vemos que importamos React tal como lo haríamos en una aplicación web React.
Necesitamos importar React porque aquí, también puedes ver que estamos usando jsx, que es esta sintaxis especial
de Javascript que se parece
a HTML pero al final es solo
Javascript y en caso de que nunca lo hayas visto, definitivamente sumérgete en una aplicación React o React tutorial
primero, espero que sepa cómo funciona React en general.
Siempre tenemos otra importación aquí y esa es la importación React Native donde importamos hoja de estilo,
texto y vista desde allí.
Ahora, estos son estos componentes y características especiales de los que hablaba anteriormente, el texto y la vista son
componentes proporcionados por React Native que se compilan en widgets de plataforma nativa y la hoja de estilo es una característica adicional
proporcionada por React Native que lo ayuda con el estilo.
Ahora, aquí, tenemos un componente React normal, ya que también lo construiríamos en una aplicación React for web.
Tenemos un componente funcional aquí y, con la ayuda de React hooks, podemos trabajar con componentes funcionales
solo como probablemente sepa y este componente funcional devuelve un código jsx que se muestra en la pantalla y
aquí estamos
usando el widget de vista o el componente de vista proporcionado por React Native y el componente de
texto y el componente de vista es como
un div, es un buen contenedor, también bueno para aplicar algunos estilos para algunos contenedores y detecta que luego se usa
para generar texto que coloca entre su apertura y Etiquetas de cierre.
Y aquí abajo, tenemos algunos estilos definidos, React Native no usa CSS, pero usa una sintaxis de
estilo que se basa en CSS o sigue convenciones de nomenclatura similares, pero profundizaremos en cómo diseñar sus aplicaciones React
Native a lo largo de este curso. por supuesto.
Con eso, cambiemos lo que vemos en la pantalla y agreguemos un botón aquí.
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
agregar esta importación y luego usar un botón allí abajo. Sin embargo, no lo usamos con una etiqueta de
apertura y cierre,
sino como un elemento de cierre automático y luego podemos agregar un accesorio de título aquí para establecer el
texto que vemos en un botón, por ejemplo, cambiar texto.
Ahora, cuando tocamos este botón, es posible que queramos cambiar este texto aquí y para
esto, necesitamos administrar algún estado aquí porque quiero cambiar algunos datos que deberían conducir a que este
componente se vuelva a representar y para esto, necesita un estado .
Ahora antes de Reaccionar 16. 8 que se admite aquí, sin embargo, tendría que convertir esto a un componente basado
en la clase para usar State, desde React 16. 8, podemos usar los ganchos
React y en caso de que no sepas qué son
los ganchos, definitivamente deberías sumergirte en los conceptos básicos de los ganchos, adjunto encontrarás
recursos que te ayudarán a comenzar con eso. Los ganchos se importan de React y aquí, necesitamos el gancho useState que
nos permite administrar el estado en un componente funcional.
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
agregarlo aquí como una cadena
y luego aquí podemos usar la desestructuración de la matriz para obtener nuestra salida texto y obtenga una función para
cambiar o restablecer o anular este texto de salida y así es como funciona el gancho useState, le brinda una
matriz con exactamente dos elementos, donde el primer
elemento es su instantánea de estado actual, por lo tanto, nuestro estado inicial o posteriormente para los ciclos
de representación posteriores, sea lo que sea que establezcamos nuestro estado y la segunda es una función que
le
permite establecer su estado en un nuevo valor y al llamar a esa función se
volverá a representar todo el componente y el texto de salida se referirá al último Nuevo estado.
Entonces, entre texto, quiero generar texto de salida y, al presionar este botón,
quiero cambiar esto.
Entonces, en el botón, podemos registrar onPress, que es básicamente el equivalente a onClick que
tendríamos en la
web, aquí está onPress y luego debemos vincular esto a una función, por ejemplo a una
función en línea anónima aquí con esta sintaxis donde llamamos establecer texto de salida y establecemos esto al texto cambiado.
Entonces, esto llamará a esta función aquí, anulará nuestro estado, por lo tanto, volverá a generar este
componente, se actualizará en el próximo ciclo de representación y, por lo tanto, dado que enviamos texto de
salida allí, esto cambiará. Si ahora guardamos
todo eso, lo bueno es que su aplicación que aún debería haber abierto en su teléfono
debería haberse recargado automáticamente,
no necesita reiniciarla, no necesita escanear este código aquí nuevamente, solo Al cambiar el código
y guardar este archivo, debería recargarse automáticamente aquí. Y ahora, si tocamos cambiar texto aquí, verá que el texto ha cambiado
y esa es su primera aplicación React Native que hace su trabajo impulsada por
expo, pero nuevamente puede compilar y publicar esto como una aplicación independiente y lo haremos al final de el curso y,
por lo tanto, esta es una forma increíble de comenzar y el desarrollo de React Native puede ser tan fácil
como eso.
Ahora con eso, terminemos este primer módulo antes de sumergirnos más profundamente en React Native y escribir
código React Native desde el segundo módulo del curso en adelante.