Boost Academy
FormaciónEvaluacionesPerfil
Volver
  • En directo

React Native — Iniciación

8h de clase en directo·HACK A BOSS·Español

Skills que aprenderás

  • React Native

Convocatorias

Necesitas un plan activo

Para acceder a los cursos en directo necesitas un plan activo. Estamos trabajando para que los planes estén disponibles pronto — ¡mantente atento!

No hay convocatorias abiertas ahora mismo, pero no te pierdas la oportunidad: guarda este curso y te avisamos en cuanto se abra una convocatoria.

Descripción

Objetivos

Temario

Requisitos técnicos

Conocimientos previos

Detalles de la convocatoria

Recursos

No hay recursos disponibles todavía para esta convocatoria

Este curso está dirigido a desarrolladores con conocimientos básicos de JavaScript y React web que quieren dar sus primeros pasos en el desarrollo de aplicaciones móviles multiplataforma. A lo largo de ocho horas, el participante descubrirá qué diferencia a React Native del desarrollo web, aprenderá a configurar y ejecutar un proyecto real con Expo, construirá interfaces con los componentes nativos fundamentales, gestionará el estado local de un formulario y añadirá navegación entre pantallas; todo ello culminará en una mini-aplicación funcional con dos vistas estilizadas y un flujo de datos claro entre componentes, lista para ejecutarse en un dispositivo o simulador.

  1. Reconocer los componentes primitivos de React Native y los principios del layout Flexbox en un entorno móvil, distinguiéndolos de sus contrapartes en el desarrollo web.
  2. Poner en marcha un proyecto React Native con Expo, construir componentes funcionales conectados mediante props y aplicar estilos con StyleSheet.create en una pantalla de una sola vista.
  3. Integrar el hook useState para gestionar la entrada de un formulario, configurar la navegación entre dos pantallas con Stack Navigator e interpretar mensajes de error básicos del entorno Metro, produciendo una aplicación móvil mínima completamente operativa.

Fundamentos de React Native y entorno de desarrollo. El bloque de apertura establece qué es React Native, cómo se diferencia de una aplicación web y cuál es el papel de Expo como herramienta de desarrollo. Los participantes configuran su entorno local paso a paso y ejecutan su primer proyecto en un dispositivo o simulador, comprobando el ciclo de recarga en caliente. Se revisa también la estructura de carpetas que genera Expo y el papel de Metro como bundler.

Componentes nativos, props y modelo de datos. Este bloque introduce los cinco componentes primitivos esenciales —View, Text, Image, TextInput y Button— y los contrasta con sus equivalentes HTML para que el participante asimile la diferencia conceptual entre marcado web y árbol de vistas nativo. A continuación se explora el flujo de datos unidireccional: cómo el componente padre declara y pasa props, y cómo el componente hijo las consume sin modificarlas, usando ejemplos de componentes funcionales concretos.

Estilos y layout Flexbox en React Native. Los participantes aprenden a crear hojas de estilo con StyleSheet.create para controlar tipografía, colores y espaciado. El bloque dedica atención especial al modelo Flexbox de React Native, señalando al menos dos comportamientos que difieren del Flexbox de CSS web —como el eje principal vertical por defecto— y los ilustra con ejemplos visuales. El resultado práctico es una pantalla de una sola vista completamente estilizada.

Estado local y gestión de formularios. A partir de un ejemplo base guiado, los participantes aplican el hook useState para capturar y mostrar en tiempo real el valor introducido en un TextInput. Se trabajan los patrones de actualización de estado y el binding controlado de campos de entrada, consolidando la relación entre estado, re-renderizado y la interfaz visible.

Navegación y depuración básica. El bloque final añade Stack.Navigator de React Navigation sobre una estructura de proyecto ya inicializada, permitiendo transitar entre dos pantallas y pasar parámetros sencillos. Se cierra el curso con una sesión práctica de lectura de errores: los participantes reciben mensajes reales de Metro —error de sintaxis, componente no importado, prop undefined— y aprenden a identificar su tipo y origen para resolverlos con rapidez.

  • Node.js 18 LTS o superior instalado en el equipo.
  • Expo CLI instalado globalmente (npm install -g expo-cli) o uso de npx expo.
  • Dispositivo móvil con la app Expo Go (iOS o Android) o un simulador/emulador configurado localmente (Xcode Simulator en macOS o Android Studio AVD).
  • Editor de código con soporte para JavaScript/JSX; se recomienda Visual Studio Code con las extensiones ESLint y Prettier.
  • Conexión a Internet estable para la descarga de dependencias y la sincronización con Expo Go.
  • Fundamentos de JavaScript (variables, funciones, módulos ES6, arrow functions, desestructuración).
  • Conceptos básicos de React para web: componentes funcionales, JSX, props y el hook useState.
  • Manejo básico de la terminal de comandos (navegación de directorios, ejecución de scripts npm).