cursos.
← Programación
Ficha 005.076YouTubeGRATIS

Aprende React Desde Cero - Curso de React Con Proyectos

por freeCodeCamp Español

Introduce React desde cero: JSX, componentes, props, eventos y estado básico, aplicados en cuatro proyectos guiados, entre ellos un contador y una calculadora.

Recomendado, valoración editorial 4 de 5

verificado 2026-09-09 — sigue siendo gratis en YouTube

Empezar en YouTube

Respuesta rápida

Curso gratis de Programación de nivel principiante en YouTube impartido por freeCodeCamp Español (8 h 10 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 9 de septiembre de 2026.

Veredicto
4/5 · Recomendado
Para quién
Personas que quieren aprender React desde cero y prefieren hacerlo construyendo proyectos.
Nivel
Principiante
Duración
8 h 10 min · 114 capítulos
Precio
Gratis en YouTube
Autor
freeCodeCamp Español
Publicado
2022
Plan sugerido
4 sem. · 5 h/sem.
Verificado
el 9 de septiembre de 2026

Nuestro veredicto

Recomendado, valoración editorial 4 de 5

Curso largo y bien estructurado que enseña los fundamentos de React construyendo proyectos. Es adecuado para principiantes con base de JavaScript. Al ser de 2022 y usar create-react-app, conviene complementarlo con material más reciente.

Puntos fuertes

  • Enfoque práctico con cuatro proyectos guiados.
  • Estructura clara en capítulos con marcas de tiempo.
  • Parte de cero y dedica un capítulo a los conocimientos previos.

A tener en cuenta

  • Publicado en 2022; puede no reflejar las prácticas más recientes de React.
  • Usa create-react-app, cuyo uso ha perdido terreno.
  • La información disponible del último proyecto es limitada.

De qué trata

Curso de unas 8 horas y 114 lecciones que enseña los fundamentos de React desde cero. Empieza con una introducción, la estructura del curso, los conocimientos previos necesarios, qué es React y la instalación de Node.js.

Después explica JSX: elementos, componentes, atributos, anidación, renderizado y cómo insertar JavaScript. A continuación se crea la estructura con create-react-app y se construyen cuatro proyectos paso a paso. Los capítulos visibles incluyen un clon de testimonios de freeCodeCamp, una aplicación con botones y contador, y una calculadora. Cada proyecto termina con retos y comentarios finales.

  • Fundamentos de React y JSX
  • Componentes, props y props.children
  • Eventos y funciones como props
  • Proyecto de contador con botones
  • Construcción de una calculadora

Para quién es este curso

  • Personas que quieren aprender React desde cero y prefieren hacerlo construyendo proyectos.
  • Quien ya conoce lo básico de HTML, CSS y JavaScript y busca dar el salto a React.

Mejor busca otro si…

  • Quien ya domina React y busca temas avanzados.
  • Quien quiera aprender con las prácticas más actuales: el curso usa create-react-app y es de 2022.

Antes de empezar

  • Conocimientos previos de HTML, CSS y JavaScript (el curso dedica un capítulo a los conocimientos previos necesarios).
  • Un ordenador donde instalar Node.js, que se explica en el curso.

Qué sabrás hacer al terminar

  • Entender qué es React y qué ventajas ofrece.
  • Escribir JSX y distinguir entre elementos y componentes.
  • Crear, importar y exportar componentes y comunicarlos mediante props.
  • Configurar un proyecto con create-react-app.
  • Gestionar eventos y pasar funciones como props en componentes.
  • Construir aplicaciones sencillas como un contador y una calculadora.

Estructura del curso

  1. 01

    Introducción y conceptos básicos

    Desde 0:00. Presentación, proyectos, estructura del curso, conocimientos previos, qué es React, conceptos básicos, instalación de Node.js y documentación oficial.

  2. 02

    Introducción a JSX

    Desde 29:35. Qué es JSX, elementos y componentes, react-dom, atributos, anidación, renderizado, etiquetas autocerradas e inserción de JavaScript.

  3. 03

    Estructura inicial y Proyecto 1

    Desde 56:59. Creación de la estructura con create-react-app y clon de testimonios de freeCodeCamp: componentes, importación, exportación, estilos CSS y props.

  4. 04

    Proyecto con botones y contador

    Desde 2:49:19. Creación de la aplicación, estilos, botones con props, desestructuración, clases condicionales, event listeners, funciones como props y contador. Termina con retos.

  5. 05

    Proyecto de calculadora

    Desde 3:52:03. Contenedor, componentes, props.children, botones, pantalla, botón clear, eventos, cálculo del resultado y manejo de entrada vacía.

  6. 06

    Proyecto final

    Desde 5:26:43 comienza otro proyecto. Los capítulos proporcionados no detallan su contenido.

Capítulos del vídeo

  1. 0:00Introducción
  2. 0:36Proyectos
  3. 2:20Estructura del curso
  4. 4:05Conocimiento previo necesario para el curso
  5. 4:45¿Qué es React? Ventajas de React
  6. 7:49Conceptos Básicos para React
  7. 23:52Descargar e Instalar Node.js
  8. 28:58Documentación Oficial de React
  9. 29:35¿Qué es JSX?
  10. 34:18Elemento en React
  11. 34:51Diferencias entre elemento y componente
  12. 36:19Introducción a react-dom y DOM
Ver los 102 restantes
  1. 38:09Elementos HTML que se pueden usar
  2. 39:05Cómo reconocer elementos y componentes
  3. 40:09Atributos
  4. 47:45Estructura JSX con elementos anidados
  5. 49:01Cómo renderizar componentes y elementos
  6. 52:47Self-closing tags
  7. 53:59Insertar JavaScript en JSX
  8. 56:59Crear la Estructura Básica con create-react-app.
  9. 1:26:22Inicio del Proyecto
  10. 1:26:55Crear la Estructura Inicial
  11. 1:29:27Identificar los Componentes
  12. 1:32:04Crear un Componente
  13. 1:42:28Preparar el Proyecto
  14. 1:50:17Mostrar un Componente
  15. 1:53:14Importar un Componente
  16. 1:54:40Exportar un Componente
  17. 1:58:28Herramientas de React
  18. 1:59:16Exportación Nombrada
  19. 2:01:26Asignar Estilos con CSS
  20. 2:21:01Recibir props en un Componente
  21. 2:25:59Pasar props a un Componente
  22. 2:29:32Personalizar la Imagen
  23. 2:36:56Texto en Negrita
  24. 2:42:07Revisión Final y Herramientas de React
  25. 2:49:19Inicio del Proyecto
  26. 2:50:56Crear la aplicación
  27. 2:53:32Prepara el proyecto
  28. 2:55:58Importar imágenes
  29. 3:00:06Asignar Estilos con CSS
  30. 3:05:07Crear el Botón
  31. 3:06:45props del Botón
  32. 3:07:21Sintaxis de Desestructuración
  33. 3:08:31Clase Basada en Condición
  34. 3:11:46Asignar Event Listener
  35. 3:14:50Crear los Botones
  36. 3:17:39Definir función en un componente
  37. 3:20:15Pasar función como prop
  38. 3:24:36Probar las funciones
  39. 3:25:28Estilos para los botones
  40. 3:31:04Componente contador
  41. 3:33:40Agregar el contador
  42. 3:39:05Herramientas de React
  43. 3:39:37Actualizar el contador
  44. 3:49:29Retos y Comentarios Finales
  45. 3:52:03Inicio
  46. 3:53:32Crear la aplicación
  47. 3:55:30Adaptar el proyecto
  48. 3:58:25Comenzar el proyecto
  49. 4:05:23Contenedor principal
  50. 4:08:16Estructura de la calculadora
  51. 4:09:43Crear los componentes
  52. 4:11:27props.children
  53. 4:15:20Atributos de Botón
  54. 4:19:15Definir una Función
  55. 4:21:06Probar el Botón
  56. 4:24:11Estilo para el Botón
  57. 4:29:03Crear los Botones
  58. 4:33:37Componente Pantalla
  59. 4:38:37Estilo para la pantalla
  60. 4:43:06Botón clear
  61. 4:46:56Estilo para el botón clear
  62. 4:51:08Mostrar input en la pantalla
  63. 4:55:31Asignar event listener
  64. 5:02:44Event Listener para el botón clear
  65. 5:06:38Calcular el resultado
  66. 5:13:52Manejar input vacío
  67. 5:17:48Retos y comentarios finales
  68. 5:26:43Inicio del Proyecto
  69. 5:28:22Crear la aplicación
  70. 5:30:44Adaptar el proyecto
  71. 5:33:22Logo y color de fondo
  72. 5:37:02Estilo inicial
  73. 5:41:38Lista de tareas
  74. 5:45:09Confirmar familia tipográfica
  75. 5:46:10Componente tarea
  76. 5:50:00Estilo para tarea
  77. 5:55:59react-icons
  78. 6:03:18props completada
  79. 6:05:23Estilo para tarea completada
  80. 6:07:09Componente formulario
  81. 6:10:30Estilo para el formulario
  82. 6:14:12Agregar un formulario
  83. 6:15:42Componente lista de tareas
  84. 6:17:07Fragmentos
  85. 6:19:11Estilo para lista de tareas
  86. 6:21:51Estado de lista de tareas
  87. 6:23:30Mostrar la lista de tareas
  88. 6:26:28Nuevos props para tarea
  89. 6:30:32Agregar tarea
  90. 6:34:22Manejar cambio
  91. 6:39:59Manejar envío
  92. 6:43:29Generar ids para las tareas
  93. 6:52:39Key para cada tarea
  94. 6:54:47Colores para las tareas
  95. 6:56:27Actualización Automática
  96. 6:57:29Eliminar tarea
  97. 7:00:37Tarea Completada
  98. 7:04:56Retos y comentarios finales
  99. 7:11:58Introducción a los componentes de clase
  100. 7:29:25Proyecto testimonios freeCodeCamp con componentes de clase
  101. 7:42:34Proyecto contador de clics con componentes de clase
  102. 8:10:16Final de curso

Plan de estudio sugerido

4 semanas · unas 5 h por semana

  1. 1.Semana 1: minutos 0:00 a 1:26:22. Instala Node.js y practica JSX con ejemplos propios.
  2. 2.Semana 2: 1:26:22 a 2:49:19. Reproduce el Proyecto 1 y practica props.
  3. 3.Semana 3: 2:49:19 a 3:52:03. Construye el contador y practica eventos.
  4. 4.Semana 4: 3:52:03 al final. Haz la calculadora y los retos propuestos.

El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.

Consejos para seguirlo

  • Antes de empezar, revisa el capítulo de conocimientos previos (4:05) para comprobar si te falta base.
  • Escribe el código tú mismo en lugar de solo mirarlo, sobre todo en props y eventos.
  • Intenta los retos al final de cada proyecto antes de seguir.
  • Los capítulos «Herramientas de React» son buenos puntos para pausar y repasar.

Antes y después de este curso

Cómo lo presenta freeCodeCamp Español

Aprende los fundamentos de React en este curso desde cero. Crearás cuatro proyectos paso a paso y aprenderás los fundamentos para comenzar a crear aplicaciones web interactivas con React.

✏️ Curso creado por: Estefania Cassingena Navone. Síguela en Twitter

💻 Código en GitHub: 🔗 Proyecto 1: 🔗 Proyecto 2: 🔗 Proyecto 3: 🔗 Proyecto 4: 🔗 Proyecto 1 Componentes de Clase : 🔗 Proyecto 2…

Extracto de la descripción original en YouTube.

Preguntas frecuentes

+¿Necesito saber JavaScript?

Sí, el curso incluye un capítulo de conocimientos previos necesarios. Conviene conocer lo básico de HTML, CSS y JavaScript antes de empezar.

+¿Cuánto dura?

Unas 8 horas y 10 minutos en 114 lecciones. Con práctica, puede llevarte unas 4 semanas a 5 horas semanales.

+¿Qué proyectos se construyen?

El curso anuncia cuatro proyectos. Los capítulos muestran un clon de testimonios de freeCodeCamp, una aplicación con contador y una calculadora.

+¿Está actualizado?

Se publicó en 2022, así que algunas prácticas pueden haber cambiado. Los fundamentos de React siguen siendo útiles.

Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en YouTube, y revisado según nuestro método. El contenido del curso es obra de freeCodeCamp Español; si ves algún error, avísanos.

Guías para sacarle partido

Más cursos de Programación

Ficha 005.006YouTubeGRATIS

Agentic AI – Complete Course for Beginners

Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.036UdemyGRATIS

Aprende Accesibilidad Web paso a paso

Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.

Muy recomendado, valoración editorial 5 de 5Sergio Luján Mora, Ester Serna Berná, Olga Carreras, Armando Suárez Cueto, Antonio Ferrández Rodríguez, Cátedra Telefónica Universidad de Alicanteverificado 2026-10-01
Ficha 005.043YouTubeGRATIS

Aprende Godot - Curso completo desde cero

Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.

Muy recomendado, valoración editorial 5 de 5verificado 2026-10-05
Ficha 005.050YouTubeGRATIS

Aprende JavaScript Ahora! curso completo desde cero para principiantes

Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.

Muy recomendado, valoración editorial 5 de 5HolaMundoverificado 2026-09-09