Construir aplicaciones móviles utilizando React Native y Expo es sencillo y organizado si entiendes cómo se estructura un proyecto base. Al iniciar tu proyecto, tendrás diversas carpetas y archivos predefinidos que debes conocer para optimizar su uso y evitar problemas técnicos.
¿Cuáles son las carpetas iniciales en una aplicación Expo?
Al crear tu proyecto React Native utilizando Expo, encuentras varias carpetas fundamentales. A continuación, se detalla la utilidad que tiene cada una:
Carpetas invisibles generadas por Expo: Estas carpetas no requieren de tu atención, ya que Expo las maneja automáticamente para la configuración del proyecto.
Assets: Aquí se almacenan imágenes, iconos, logos y splash screens que utilizarás en tu aplicación.
Node Modules: Contiene todas las dependencias y paquetes necesarios para ejecutar tu proyecto. No debes modificar esta carpeta directamente, Expo se encargará de gestionarla automáticamente cuando instales nuevas librerías.
¿Qué archivos clave existen en el proyecto y para qué sirven?
¿Para qué sirve el archivo package.json?
Es esencial conocer el contenido del package.json para manejar correctamente tu proyecto:
Main: Indica el fichero inicial que ejecutará Expo, que no debes modificar manualmente.
Scripts: Son comandos específicos que utilizarás durante el desarrollo, como yarn start, yarn android o yarn ios.
Dependencias: Aquí verás todas las librerías instaladas, con sus versiones correspondientes. Expo actualiza esta sección automáticamente al instalar nuevas dependencias.
¿Qué otras configuraciones importantes necesitas controlar?
app.json: Es crucial, ya que allí configuras características específicas para Android y iOS. Puedes personalizar el nombre, versión, iconos, colores o modo de visualización de tus aplicaciones.
babel.config.js: Aunque es importante conocerlo, en general no necesitarás modificarlo manualmente si trabajas con opciones básicas ofrecidas por Expo.
¿Cómo funciona el archivo app.js en React Native?
El fichero app.js es la entrada principal de la aplicación React Native:
Siempre inicia ejecutando este archivo.
Necesitas importar React y componentes específicos desde React Native y Expo.
Usa componentes específicos, por ejemplo, el componente Text para renderizar correctamente texto en los dispositivos móviles y evitar errores.
Toda pantalla requiere un componente de vista (View o ScrollView) como base para contener los elementos, estableciendo así la estructura estándar del proyecto.
¿Cómo instalar y manejar dependencias adicionales?
Para optimizar la construcción de tu aplicación, puedes agregar más librerías externas mediante el comando de consola:
yarnadd nombre-de-la-dependencia
Expo gestionará automáticamente estas nuevas dependencias, mostrándolas claramente en tu archivo package.json y en la carpeta node_modules, manteniendo todo ordenado y eficiente.
Te invito a compartir tus dudas o experiencias en los comentarios para seguir enriqueciendo el aprendizaje en el desarrollo de aplicaciones multiplataforma con React Native y Expo.
La explicacion esta bien, sin embargo se supone que primero aprendemos Rect y luego React Native, por lo tanto creo que el resto de estudiantes saben el uso minimo del package.json y del node_modules.
Pero tal vez no sepan que es expo ni su diferencia con React Native CLI, seria bueno añadir una clase para resaltar eso.
Si quieren utilizar Typescript en el proyecto deben añadir un archivo tsconfig.json en la raíz y luego correr el proyecto. Expo les va a decir que detectó Typescript y les preguntará si quieren instalar las dependencias para utilizarlo. Le dan que sí(Y) y listo.
Hola, muy bueno tus videos, soy nuevo en react native, mas quiero preguntar si es posible migrar por ejemplo un proyecto ya creado con Gradle a Expo? mas que todo quiero entender diferencias entre uno y otro.
Sería buena idea para un curso avanzado, TypeScript mejora mucho la experiencia de desarrollo. Aunque quizás para abordar React Native en un curso introductorio no va nada mal JS. De cualquier manera debajo de TypeScript sigue corriendo JS.
Creo que podrías mandar tu propuesta al team@platzi.com, siempre toman el feedback necesario para crear más cursos :).
Al usar React Native CLI tienes que realizar unas configuraciones en tu maquina, usar los IDE de cada plataforma como: "Android studio" y "xcode" ha eso agregale los emuladores que debes descargar.
Con "Expo" solo necesitas un editor de codigo como "visual studio code" ya que se puede compilar mediante la web y no necesitas una maquina con tantos recursos.
Ahora no quiere decir que uno sea mejor que el otro, usa el que se adapte a tus necesidades. Puede pasar que algun modulo de tercero funcione bien en Expo pero no en RN CLI.
Expo es un framework que facilita el desarrollo de apps para Android e iOS. Expo ofrece enrutamiento basado en archivos, una biblioteca estándar de módulos nativos y mucho más. Expo es de código abierto y cuenta con una comunidad activa en GitHub y Discord
Para poder usar Typescript en sus proyectos ya hechos, pueden hacer lo siguiente.
Ejecutan la siguiente línea en la terminal (estando en su proyecto) { "extends": "@tsconfig/react-native/tsconfig.json"}
yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
```2. Agregan en el directorio raíz el archivo **'tsconfig.json'** y luego ponen lo siguiente```js
{"extends":"@tsconfig/react-native/tsconfig.json"}
En los componentes, el primer elemento que tiene que renderizar es un View o ScrollView. No puede haber una pantalla sin una vista. Pueden existir componentes sin vistas siempre y cuando se rendericen dentro de alguna vista.
Estoy de acuerdo que se recomiende 1ro hacer el curso de React (xq no todos los estudiantes toman lo cursos en orden, tal vez xq no conocen las rutas). Sin embargo, una clase en este mismo curso explicando conceptos compartidos quedaría muy bien para que el estudiante no quede con una laguna, y que porsupuesto, en dicha clase se invite primero a realizar el curso de React.
