<ALVESC /> ACADEMY
Introducción al Desarrollo Móvil
Volver a clases
Desarrollo Móvil●Principiante

Introducción al Desarrollo Móvil

120 min

Ecosistema móvil, comparación de tecnologías y primeros conceptos de React Native.

¿Por qué Desarrollo Móvil?

  • Más del 60% del tráfico web es desde dispositivos móviles
  • Apps nativas vs híbridas vs multiplataforma
  • React Native: Código una vez, deploy en iOS y Android

Comparación de Tecnologías

TecnologíaProsContras
Nativo (Swift/Kotlin)Máximo rendimiento, acceso totalDos codebases separados
React NativeUn codebase, hot reload, comunidadSlightly menor rendimiento
FlutterAlto rendimiento, widgetsLenguaje Dart menos común
IonicWeb tech, fácilRendimiento limitado

¿Qué es React Native?

javascript
1import { View, Text, Button } from "react-native";
2
3function App() {
4  return (
5    <View>
6      <Text>¡Hola Mundo!</Text>
7      <Button title="Presionar" onPress={() => alert("¡Funciona!")} />
8    </View>
9  );
10}

React vs React Native

javascript
1// React (Web)
2<div>
3  <h1>Título</h1>
4  <button onClick={handleClick}>Click</button>
5</div>
6
7// React Native (Móvil)
8<View>
9  <Text style={{ fontSize: 24 }}>Título</Text>
10  <Button title="Click" onPress={handleClick} />
11</View>

Diferencias clave:

  • No hay DOM, sino componentes nativos
  • Estilos con JavaScript (no CSS files)
  • Sin HTML tags (<div> → <View>, <p> → <Text>)
  • Eventos táctiles en lugar de clicks del mouse

Recursos

2 recursos disponibles

Documentación Oficial

DocumentaciónPrincipiante30 min

Documentación inicial

Reto de Lectura

Reto de LecturaPrincipiante30 min🔴 Sin IA

Reto de Lectura — ¿Web o móvil? El componente contrabandeado

Este 'componente de React Native' lo escribió alguien (o algo) pensando en la web. Encuentra todo lo que NO existe en RN y di con qué se reemplaza.

Cuando le pides React Native a una IA entrenada con océanos de código web, se le escapan hábitos del navegador. Encuentra al menos 6 cosas de este componente que no existen o no funcionan en React Native, y di con qué se reemplaza cada una.

jsx
1import "./estilos.css";
2
3function TarjetaProducto({ producto }) {
4  return (
5    <div className="tarjeta" onClick={() => alert("clic")}>
6      <img src={producto.foto} width="200px" />
7      <h2>{producto.nombre}</h2>
8      <span style={{ fontSize: "14px", color: "gray" }}>
9        {producto.descripcion}
10      </span>
11      <a href={producto.url}>Ver más</a>
12    </div>
13  );
14}

Pregunta de fondo: ¿por qué React Native no usa las etiquetas HTML si también es React? ¿Qué hay "debajo" de un <View> en Android y en iOS?

Clase 1 de 31 en la ruta Desarrollo movil

Siguiente clase

Instalación y Configuración del Entorno