Hola mundo con React Native

  • Autor de la entrada:
  • Categoría de la entrada:React Native

Comenzamos

El primer paso es instalar Node desde su pagina principal https://nodejs.org/es/ 

Node es un entorno de ejecución de JavaScript orientado a eventos asíncronos, es de código abierto, luego de instalado Node, vamos a abrir la consola de comandos y escribimos lo siguiente. 

npm install expo-cli –global

Esto nos instala el cliente de Expo el cual nos va a facilitar mucho el desarrollo y el despliegue de la aplicaciones

Una vez completada la instalación vamos a crear una carpeta donde vamos a alojar los proyectos y en la consola usamos el comando CD que es para saltar a esa ubicación y ahora para crear el proyecto usamos el comando expo init HolaMundo, siendo HolaMundo el nombre de tu proyecto y sin espacios.

Seleccionamos proyecto en blanco y esperamos a que finalice  

Ahora saltamos a la carpeta del proyecto mediante cd HolaMundo

Para ejecutar el proyecto usamos el comando expo start, esto nos abre una ventana con un código QR, también  podemos ejecutar la aplicación en nuestro dispositivo si lo tenemos directamente conectado. 

React Native se basa en componentes, todo es un componente, esto lo puedes ver como si fuera un juego de Lego, donde vas colocando bloques de código para armar tu aplicación de una forma mas fácil y cómoda. 

Yo usare Visual Studio Code, igualmente puedes usar el editor de código que mas te guste y ahora veamos que nos trae el proyecto. 

La carpeta llamada assets es donde guardamos los recursos como imágenes, audios, el icono de la aplicación y el splash, luego vemos la carpeta llamada node_modules que es donde esta los módulos que nosotros instalamos, esta carpeta nunca se sube al git, ya que cuando descargamos un proyecto desde GitHub basta con ejecutar el comando npm install, esto nos instala todos los paquetes especificados en el archivo llamado package.json, luego tenemos el archivo mas importante que es el App.js, que es nuestro archivo principal, nunca debes borrarlo, si vemos bien su código, podemos ver que usa la la palabra import para traer los componentes que va a usar, luegos la instrucción  export default function App() nos indica que vamos a exportar una función llamada App, dentro de esta necesitamos retornar un componente, entonces debe existir un componente padre que aloje a todos los demas componentes, en este caso usamos el componente llamado View el cual es el padre y el componente hijo es el Text, por fuera de este componente tenemos una constante que llamamos styles el cual posee el estilo css por asi decirlo, mira la sintaxis es muy similar al css tradicional, si miras bien la etiqueta View hace un llamado a este estilo mediante style={styles.container}