Aprender React: Curso Code
Aprender React: Curso Code — Aprende a programar con React escribiendo JSX y ejecutándolo en tu teléfono
Aprender React: Curso Code es una app gratuita para empezar, disponible en iOS y Android, que enseña programación con React a principiantes con algunos conocimientos de HTML, CSS o JavaScript, y a desarrolladores que están cambiando desde otro framework. Escribe JSX en un editor de código, toca Ejecutar y mira cómo se renderiza tu componente en una vista previa en vivo dentro de la app. Sus 88 cursos y 324 lecciones te llevan desde tu primer componente hasta los hooks y la gestión del estado, pasando por Next.js, con 20 proyectos guiados.
- Precio
- Gratis, actualización a Pro
- Plataformas
- iOS y Android
- Idiomas
- 22
- Clasificación por edad
- 4+
- Versión
- 82.6.1
- Requisitos
- iOS 15.1 o posterior
- App Store
- 3.8 ★ (4)
Tu componente se renderiza en el teléfono, no en un servidor.
El runtime, ReactDOM y Babel vienen integrados en la app, por lo que el JSX que escribes se compila y se muestra en el dispositivo. Puedes tocar el botón que acabas de crear, escribir en tu formulario y ver cómo responde la interfaz, el ciclo de retroalimentación que hace que los hooks empiecen a tener sentido.
Qué es
Aprender React: Curso Code es un curso de React gratuito para empezar en iOS y Android, con 88 cursos y 324 lecciones interactivas, desde la primera línea de JSX hasta los hooks, la gestión del estado, React 19 y el App Router de Next.js. El editor integrado compila tu código en el dispositivo y renderiza el componente en una vista previa en vivo, mientras que 20 proyectos guiados comprueban cada paso antes de que avances. Es una app de aprendizaje independiente y no está afiliada a Meta ni a Vercel.
Dentro de la app
Qué aspecto tiene
El curso
Qué incluye el curso de React
88 cursos extraídos de la propia lista de la app y ordenados como suele hacerse en un primer recorrido por React.
React Kickoff, JSX y Props & Composition
Componentes, UI declarativa y cómo React actualiza el DOM; después, reglas de JSX, renderizado de listas y cómo pasar datos mediante props.
State, Events, Forms y useRef
useState y gestión de eventos, formularios controlados con validación y useRef para valores y acceso al DOM que no provocan un renderizado.
useEffect, Data Fetching y Custom Hooks
Cuándo se ejecutan los efectos, arrays de dependencias, estados de carga y error para llamadas a API y cómo extraer lógica reutilizable en tus propios hooks.
Context, Redux Toolkit y Zustand
Cómo compartir el estado sin prop drilling mediante Context y useReducer; después, Redux Toolkit con RTK Query, Zustand y Jotai para apps más grandes.
Routing, React Query y Forms at Scale
Routing del lado del cliente y patrones de React Router, estado del servidor con TanStack Query y SWR, React Hook Form y UI optimista.
Performance, Testing y TypeScript
Renderizado y memoización, división del código, listas virtualizadas, testing con React Testing Library y tipado de componentes y hooks.
React 19, Server Components y Next.js
Server Components y Actions, SSR e hidratación; después, Next.js App Router con obtención de datos, almacenamiento en caché y autenticación.
Cómo funciona
Cómo funciona una lección
Una lección presenta un concepto breve seguido inmediatamente del código que escribes y ejecutas, para que la idea y el resultado aparezcan en la misma pantalla.
Lee un concepto
Abre un curso de la ruta de aprendizaje y lee una lección breve, como cómo se actualiza el estado o por qué una lista necesita keys. El resumen del curso indica qué lecciones son gratuitas, para que puedas ver el formato antes de comprometerte.
Escribe JSX y toca Ejecutar
Escribe el componente en el editor de código y ejecútalo. La vista previa en vivo renderiza tu componente dentro de la app, para que puedas hacer clic en el botón, escribir en el campo y ver qué hace el código.
Compruébalo y sigue construyendo
Los cuestionarios, las misiones de programación y los proyectos guiados confirman que has entendido el concepto, y el mentor de IA explica un hook o un error que no logras interpretar. Bug Hunt y UI Match te permiten practicar el concepto una segunda vez.
Qué incluye
Qué incluye la app
88
Cursos, 324 lecciones
Desde JSX, props y estado hasta custom hooks, formularios, Context y Redux Toolkit, y también Server Components, SSR y el App Router de Next.js, agrupados de A1 a C1.
En vivo
Editor con vista previa en vivo
Un editor de código diseñado para JSX, con el componente renderizado dentro de la app. Los proyectos con varios archivos te permiten importar un componente en otro, tal como se crean las apps reales.
20
Proyectos guiados
Crea un botón de «Me gusta», tarjetas de perfil, una calculadora de propinas, un juego de preguntas, un carrito de compras y mucho más, paso a paso. Cada paso comprueba que el componente funciona de verdad.
Laboratorio
Hooks Lab y controles de props
Observa cada cambio de estado y cada re-renderizado mientras ocurre, y cambia una prop con un control deslizante para ver cómo se actualiza el componente. El perfilador de renderizado y la línea de tiempo del estado forman parte de Pro.
30
Misiones de programación
Misiones de nivel fácil, medio y difícil sobre hooks, renderizado, formularios, context y rendimiento, además de UI Match, Bug Hunt y Component Recall con repetición espaciada.
IA
Mentor de IA
Pide una explicación, deja que la IA revise tu código y sugiera una solución, o genera una lección personalizada sobre cualquier tema. El mentor y el examen de certificación forman parte de Pro.
Contexto
¿Qué necesitas entender realmente para escribir React y en qué orden?
React es una biblioteca de JavaScript para crear interfaces de usuario a partir de componentes pequeños y reutilizables que se vuelven a dibujar cuando cambian sus datos. La mayoría de los principiantes no se atasca con la sintaxis, sino con el modelo que hay detrás: qué es un renderizado, qué se considera estado y cuándo se ejecutan los efectos. Aprender esas ideas en orden, con algo en pantalla para poner a prueba cada una, es más rápido que leer sobre todas a la vez.
Componentes y propsla unidad reutilizable
Un componente es una función que devuelve una parte de la interfaz, y las props son las entradas que recibe de su componente padre. Como los datos fluyen hacia abajo a través de las props, puedes leer un componente y predecir qué va a dibujar.
Estadolo que cambia con el tiempo
El estado son los datos que un componente recuerda entre renderizados, como el texto de un campo o si un menú está abierto. Actualizar el estado programa un nuevo renderizado, que es el mecanismo detrás de casi todas las pantallas interactivas.
Hooks y efectosdonde los principiantes se atascan
Los hooks como useState, useRef y useReducer permiten que un componente mantenga el estado y acceda al DOM. useEffect ejecuta código después de un renderizado, y un array de dependencias incorrecto es la fuente más habitual de bucles y valores obsoletos.
Renderizado y re-renderizadopor qué la app parece lenta
Un componente se vuelve a renderizar cuando cambian su estado o sus props, y lo mismo ocurre con los componentes que contiene. Saber qué provocó un renderizado es el punto de partida para cualquier mejora de rendimiento, desde la memoización hasta la división del código.
Encaja
Para quién es y para quién no
Es una buena opción si
- Conoces un poco de HTML, CSS o JavaScript y quieres empezar con React de la forma adecuada
- Eres desarrollador de otro framework y necesitas pasarte a React rápidamente
- Aprendes mejor cuando el resultado aparece en pantalla en el momento en que se ejecuta el código
- Estás creando un portafolio de proyectos pequeños y quieres seguir pasos guiados
- Te estás preparando para una entrevista de frontend y quieres practicar con preguntas
No es la herramienta adecuada si
- Nunca has visto JavaScript, porque el curso da por hecho que tienes algunos conocimientos
- Quieres crear y desplegar un proyecto completo, algo para lo que todavía necesitas un portátil
- Esperas que todo sea gratis, aunque el primer curso es gratuito y Pro desbloquea el resto
- Quieres un curso oficial del equipo de React, pero esta es una app independiente
Preguntas
Preguntas frecuentes
¿Puedes aprender programación con React en un teléfono?
Las ideas fundamentales, los componentes, las props, el estado y los hooks se pueden aprender en un teléfono si puedes ejecutar lo que escribes. Aprender React: Curso Code incluye ReactDOM y Babel, por lo que tu JSX se renderiza en una vista previa en directo en el dispositivo. Un portátil resulta útil cuando empiezas a crear y desplegar un proyecto más grande.
¿Necesito saber JavaScript antes de aprender React?
Tener algunos conocimientos ayuda. Aprender React: Curso Code está dirigido a personas que saben algo de HTML, CSS o JavaScript, como variables, funciones y arrays. Si nunca has escrito JavaScript, apréndelo primero, porque las lecciones de React dan por hecho que puedes leerlo.
¿Cuál es la diferencia entre props y state?
Las props son datos de entrada que un componente recibe de su componente padre y no deberían cambiar, mientras que el state son datos que pertenecen al componente y que este actualiza con el tiempo. En Aprender React: Curso Code puedes verlo en Hooks Lab, que muestra cada cambio de estado y cada nuevo renderizado, y en los controles de props, que te permiten cambiar una prop con un deslizador.
¿La app enseña hooks como useEffect?
Sí. Aprender React: Curso Code cubre useState, useEffect, useRef, useReducer, custom hooks y useLayoutEffect. Hay lecciones independientes sobre cuándo se ejecutan los efectos, los arrays de dependencias y los errores habituales, además de un modo Bug Hunt para encontrar errores en componentes defectuosos.
¿React es lo mismo que React Native? ¿La app enseña ambos?
No. React es la biblioteca para crear interfaces de usuario, mientras que React Native utiliza las mismas ideas para crear apps móviles. Aprender React: Curso Code enseña primero React para la web, y un curso de fundamentos de React Native ayuda a los desarrolladores web a aplicar esas habilidades en dispositivos móviles.
¿Aprender React: Curso Code incluye Next.js y React 19?
Sí. Los cursos cubren las funciones de React 19 y Server Components, SSR e hidratación, streaming y Next.js App Router con obtención de datos, almacenamiento en caché y autenticación. También hay un curso de fundamentos de React Native para desarrolladores web.
¿Qué tipo de proyectos puedo crear?
Hay 20 proyectos guiados, creados paso a paso: un botón de «Me gusta», tarjetas de perfil, una calculadora de propinas, un juego de preguntas, un cronómetro, un formulario de registro, un carrito de compra, un carrusel de imágenes, una lista paginada y una app de tareas. Cada paso comprueba que tu componente funciona antes de continuar.
¿Aprender React: Curso Code es gratis?
La descarga es gratuita. La versión gratuita incluye el primer curso, un proyecto guiado, dos misiones de programación, el editor de código con vista previa en directo, Hooks Lab, los controles de props, Bug Hunt y tres comprobaciones de UI Match al día, y muestra anuncios. Pro desbloquea todos los cursos, proyectos y misiones, el mentor de IA, el perfilador de renderizado y el examen para obtener el certificado, además de eliminar los anuncios.
¿Hay un certificado o preparación para entrevistas?
Aprobar el examen final te permite obtener un certificado que puedes compartir, incluido en Pro. Para las entrevistas hay 50 preguntas de entrevista, un cuestionario de 50 preguntas y una hoja de referencia para practicar los conceptos fundamentales.
¿El código se ejecuta en un servidor?
No. El entorno de ejecución está incluido en la app, por lo que tu código se compila y renderiza en el dispositivo. Por eso puedes tocar el botón que has creado y ver cómo la UI responde dentro de la vista previa.
¿Qué lenguajes y plataformas admite?
Aprender React: Curso Code funciona en iOS y Android y está disponible en 22 idiomas. Tiene una clasificación por edades de 4+ y requiere iOS 15.1 o posterior en iPhone.
Empezar
Renderiza tu primer componente hoy
Empieza gratis en iOS y Android, en 22 idiomas.
Más de CoddyKit
Disponible en iOS y Android.