React Native: Learn & Practice

Aprende React Native con explicaciones breves, ejemplos prácticos de código y pequeños retos. Explora 148 lecciones en 10 módulos, abre un ejemplo en el entorno de programación y modifícalo para comprender cómo funciona la interfaz.

Un camino claro desde lo básico hasta la práctica

Comienza con texto, vistas, variables, componentes, imágenes y estilos. Continúa con diseños Flexbox, formularios, entrada de texto, botones, interacciones táctiles, desplazamiento y listas. Los módulos posteriores introducen hooks, componentes reutilizables, gestión de estado, conceptos de rendimiento, diseños responsivos y proyectos prácticos.

Lee la idea antes de editar

Cada lección incluye un objetivo, una descripción general en lenguaje sencillo, ideas clave, código, consejos prácticos, un pequeño reto y preguntas para la autoevaluación. Consulta el ejemplo junto con su explicación y luego abre la versión editable cuando estés listo para experimentar. Las etiquetas de principiante, intermedio y práctica te ayudan a comprender la ubicación de cada tema en el curso.

Prueba tus propios cambios

Usa el editor de JavaScript y JSX integrado para ajustar texto, valores, estilos y el comportamiento de los componentes. El resaltado de sintaxis y la numeración de líneas facilitan la comprensión de los ejemplos. Las funciones Deshacer y Rehacer te ayudan a explorar los cambios, mientras que Restablecer código restaura el ejemplo inicial. Toca Ejecutar app para abrir la vista previa integrada y luego regresa a la edición para intentarlo de nuevo.

Explora patrones útiles

Estudia entradas controladas, validación de formularios, visibilidad de contraseñas, contadores de caracteres, filtrado de listas, elementos seleccionables y estados vacíos. Practica con contadores, temporizadores, un reloj en tiempo real, un conversor de temperatura, una calculadora de propinas, tarjetas, un acordeón, pestañas simples y una mini lista de tareas. Estos son ejemplos de aprendizaje que te permiten examinar cómo se integran las distintas partes de una interfaz.

Encuentra la lección que necesitas

Busca títulos de lecciones o filtra la biblioteca por módulo. Cambia entre todas las lecciones, las lecciones en curso, las favoritas guardadas y las lecciones completadas. Usa los controles Anterior y Siguiente o desliza el dedo para cambiar de lección. Cuando abres una lección de una biblioteca filtrada, la navegación sigue esa selección para que puedas mantenerte en los temas que elegiste.

Haz un seguimiento de tu aprendizaje

Marca las lecciones como favoritas para revisarlas y márcalas como completadas cuando estés listo. La pantalla de inicio muestra el progreso del curso, el número de lecciones completadas y guardadas, y una racha de estudio. Retoma la última lección o continúa con el siguiente tema pendiente. El progreso y los marcadores se guardan localmente en tu dispositivo.

Regresa a tus experimentos

Al ejecutar un ejemplo, su código se guarda como un borrador local para esa lección. Vuelve a abrir el entorno de pruebas para restaurar el borrador o reinícialo para regresar al código original. Esto facilita retomar una idea después de un descanso sin tener que reemplazar el material inicial.

Elige una apariencia cómoda

Selecciona el modo claro, el modo oscuro o el tema del sistema para la interfaz de aprendizaje. Lee un concepto, inspecciona su código, realiza un cambio específico y usa el desafío para practicar su aplicación.

Diseñada para estudiantes, principiantes con interés en la programación y desarrolladores que revisan conceptos de interfaces móviles. Los ejemplos se ejecutan en una vista previa web; las API y el comportamiento específicos de la plataforma pueden diferir de una aplicación nativa. La aplicación contiene publicidad. Aplicación educativa independiente; no está afiliada ni respaldada por el proyecto React Native.