streakode

React Native 0.87

Ejercicios de React Native para practicar cada día

React Native se parece a React hasta que llega el layout, los estilos y las diferencias entre plataformas. Los ejercicios cubren justo esas diferencias, con fragmentos que puedes leer desde el móvil.

Prueba cuatro ejercicios sin cuentaCrear cuenta gratis

Así son los ejercicios de React Native

Estos son 5 del nivel 1. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.

  1. Ejemplo 1 · Componentes base

    ¿Qué pasa si pones texto directamente dentro de un <View>, sin <Text>?

    <View>Hola</View>
    • AError: el texto tiene que ir dentro de un <Text>
    • BSe muestra con el estilo por defecto
    • CSe ignora sin avisar
    • DSe convierte en un <Text> automáticamente
    Ver la respuesta

    Respuesta: A. En React Native todo texto debe estar dentro de un componente <Text>. Si no, la app lanza un error en tiempo de ejecución.

  2. Ejemplo 2 · Estilos

    En un estilo de React Native, ¿qué significa padding: 16?

    const styles = StyleSheet.create({ card: { padding: 16 } });
    • A16 puntos independientes de la densidad de pantalla
    • B16 píxeles físicos
    • C16 rem
    • DNada: falta la unidad y da error
    Ver la respuesta

    Respuesta: A. Los números de los estilos no llevan unidad: son puntos independientes de la densidad, así que ocupan lo mismo en una pantalla normal que en una de alta resolución. También se aceptan porcentajes como texto, "50%".

  3. Ejemplo 3 · Layout

    ¿Qué consigue flex: 1 en el View raíz de una pantalla?

    <View style={{ flex: 1 }}>{children}</View>
    • AQue ocupe todo el espacio disponible
    • BQue coloque los hijos en fila
    • CQue centre el contenido
    • DNada: flex solo acepta row o column
    Ver la respuesta

    Respuesta: A. flex con un número positivo hace que el elemento crezca para llenar el espacio libre de su padre. Sin él, un View solo mide lo que su contenido.

  4. Ejemplo 4 · Formularios

    ¿Qué recibe setName cada vez que el usuario escribe?

    <TextInput value={name} onChangeText={setName} />
    • AEl texto completo del campo, como string
    • BUn evento con e.target.value
    • CSolo el último carácter pulsado
    • DNada: hay que usar onChange
    Ver la respuesta

    Respuesta: A. onChangeText llama a la función con el texto nuevo, así que se puede pasar el setter del estado directamente. onChange también existe, pero recibe un evento nativo.

  5. Ejemplo 5 · Estado

    Nada más abrir la pantalla, ¿qué muestra este componente?

    function Mood() {
  const [mood, setMood] = useState("feliz");
  return <Text>Estoy {mood}</Text>;
}
    • AEstoy feliz
    • BEstoy {mood}
    • CEstoy
    • DEstoy undefined
    Ver la respuesta

    Respuesta: A. useState("feliz") da a mood su valor inicial, y las llaves insertan ese valor en el texto.

Qué vas a practicar

La ruta de React Native tiene 60 ejercicios repartidos en 20 temas, con cuatro formatos: predecir la salida, completar un hueco, encontrar el fallo y ordenar líneas. Componentes base, estilos, layout, interacción, listas, formularios y Expo Router.

  • Componentes base
  • Estilos
  • Interacción
  • Layout
  • Imágenes
  • Formularios
  • Listas
  • Expo Router
  • Animaciones
  • Multiplataforma
  • Teclado
  • Almacenamiento
  • Arquitectura
  • Diseño adaptable
  • Efectos
  • Estado
  • Integración
  • Props
  • Rendimiento
  • Tema

Un minuto al día, sin perder la racha

Cada día haces una sesión de cinco ejercicios. Lo que fallas vuelve justo cuando estás a punto de olvidarlo, cada acierto suma XP en la ruta y puedes compararte con tus amigos en las ligas semanales. Funciona en el navegador, también en el móvil, y es gratis.

Empezar con React Native

Otras rutas