Imagen del curso gratis React JS

Curso en línea gratuitoReact JS

Duración del curso en línea: 4 horas y 2 minutos

4.43

estrellaestrellaestrellaestrellamedia estrella

(7)

Domina React para crear apps web modernas: componentes, rutas, formularios y hooks. Curso online gratis con práctica real y enfoque profesional.

En este curso gratuito, aprenda sobre

  • Qué es React y su enfoque para construir interfaces basadas en componentes
  • Herramientas clave: React DevTools, documentación oficial y flujo de trabajo recomendado
  • Crear apps SPA con Create React App y estructura base del proyecto
  • Renderizado con ReactDOM y archivo de entrada para mostrar contenido en el navegador
  • JSX: sintaxis para componer UI y su uso recomendado junto a React
  • Componentes: creación, separación por archivos y estilos CSS con buen rendimiento
  • Props y State: personalización de componentes, constructor y gestión de estado
  • Ciclo de vida: fase de montaje y dónde ejecutar llamadas/efectos en componentes
  • Componentes funcionales: la forma más simple de escribir componentes en React
  • React Router: routing en SPA, rutas dinámicas y organización de páginas
  • Eventos y formularios controlados: onChange, manejo de inputs y lifting state up
  • Consumo de APIs: GET/POST, config de requests y actualización de estado tras POST
  • Hooks: useState, useEffect, custom hooks y convención de nombres 'use...'
  • Build y deploy: configuración, Firebase Hosting y comando para generar producción

Descripción del curso

Aprende a desarrollar interfaces modernas con React y da el salto al desarrollo web profesional construyendo una aplicación paso a paso. Este curso online gratuito está pensado para quienes quieren entender React desde la base y aplicar buenas prácticas desde el primer día, sin perderse en teoría innecesaria. A lo largo del recorrido, avanzarás desde la puesta en marcha del entorno y la lectura correcta de la documentación oficial hasta la creación de una app tipo Single Page Application con navegación, componentes reutilizables y un flujo de datos claro.

Trabajarás con la forma de pensar de React: dividir la interfaz en componentes, estructurar tu proyecto de manera mantenible y aprender a comunicar datos entre piezas usando props y estado. También abordarás cómo escribir componentes de forma eficiente, aplicar estilos de manera ordenada, manejar eventos y formularios con un enfoque controlado, y tomar decisiones que mejoran el rendimiento y la experiencia de usuario. El objetivo es que termines con criterios para construir interfaces escalables, no solo con recetas.

En la parte de navegación aprenderás a implementar rutas en una SPA y a resolver escenarios habituales como el enrutado dinámico, lo que te permite crear pantallas y detalles de manera fluida sin recargar el navegador. Además, se refuerzan patrones importantes como elevar el estado cuando varias partes de la interfaz necesitan sincronizarse, ayudándote a evitar duplicación de lógica y estados inconsistentes.

El curso también te guía en la conexión de tu frontend con servicios externos: cómo solicitar datos a un API, cómo enviar información mediante peticiones POST y cómo reaccionar correctamente a los cambios en el estado después de una operación. Estas habilidades son esenciales en proyectos reales donde el cliente debe leer, crear y actualizar información de forma segura y ordenada.

Finalmente, modernizarás tu forma de trabajar con React utilizando hooks, incluyendo el manejo de estado, efectos y la creación de hooks personalizados para reutilizar lógica. Como cierre, aprenderás a preparar tu proyecto para producción y publicarlo, incorporando un flujo de despliegue que te acerca a un entorno profesional y te deja listo para compartir tu trabajo en la web.

Contenido del curso

  • Lección en vídeo: 01 - Curso de ReactJS, Introducción 04m
  • Ejercicio: _¿Qué es React según su definición oficial?
  • Lección en vídeo: 02 - Curso de ReactJS, Herramientas 03m
  • Ejercicio: ¿Cuál es la herramienta recomendada en el curso para la inspección de código React?
  • Lección en vídeo: 03 - Curso de ReactJS, La Documentación Oficial 02m
  • Ejercicio: ¿Cuál es el principal beneficio de seguir la documentación oficial de una tecnología como React?
  • Lección en vídeo: 04 - Curso de ReactJS, CreateReactApp 07m
  • Ejercicio: ¿Cuál es la herramienta recomendada para crear una nueva aplicación de React de una sola página?
  • Lección en vídeo: 05 - Curso de ReactJS, ReactDOM 09m
  • Ejercicio: _¿Qué archivo es el que se utiliza en React para mostrar contenido en el navegador?
  • Lección en vídeo: 06 - Curso de ReactJS, JSX 10m
  • Ejercicio: ¿Qué es JSX y con qué se recomienda utilizarlo?
  • Lección en vídeo: 07 - Curso de ReactJS, Repositorio del Proyecto 03m
  • Ejercicio: ¿Cuál es el propósito del comando 'npm install' tras clonar un proyecto de GitHub?
  • Lección en vídeo: 08 - Curso de ReactJS, ¿Qué es un componente? 04m
  • Ejercicio: ¿Cuál es una característica principal de un componente en React según el video?
  • Lección en vídeo: 09 - Curso de ReactJS, Mi primer componente 10m
  • Ejercicio: _¿Cuál es la buena práctica en React para que los componentes vivan en su propio archivo?
  • Lección en vídeo: 10 - Curso de ReactJS, Agregando CSS a componentes 07m
  • Ejercicio: ¿Cuál es la forma recomendada de aplicar estilos en componentes React para un mejor rendimiento?
  • Lección en vídeo: 11 - Curso de ReactJS, Las Props 10m
  • Ejercicio: _¿Qué elementos del componente Cart se pueden personalizar mediante propiedades en React JS?
  • Lección en vídeo: 12 - Curso de ReactJS, El State 06m
  • Ejercicio: ¿Cuál es la función del constructor en un componente de clase en React?
  • Lección en vídeo: 13 - Curso de ReactJS, Ciclo de vida 05m
  • Ejercicio: _¿Cuál es la primera funcionalidad que se ejecuta en la fase de montaje de un componente en React?
  • Lección en vídeo: 14 - Curso de ReactJS, Componentes Funcionales 06m
  • Ejercicio: ¿Cuál es la forma más sencilla de escribir un componente en React según el video?
  • Lección en vídeo: 15 - Curso de ReactJS, Primer Página 03m
  • Ejercicio: _¿Cuál es la convención para nombrar las páginas en React?
  • Lección en vídeo: 16 - Curso de ReactJS, Listando Componentes 09m
  • Ejercicio: ¿Cómo se organiza la visualización de ejercicios en la aplicación descrita?
  • Lección en vídeo: 17 - Curso de ReactJS, ReactRouter 03m
  • Ejercicio: _¿Qué es React Router y cómo beneficia a las Single Page Apps?
  • Lección en vídeo: 18 - Curso de ReactJS, Enrutado Dinamico de Componentes 12m
  • Ejercicio: ¿Cuál es el propósito principal de usar React Router en un proyecto React?
  • Lección en vídeo: 19 - Curso de ReactJS, ES7 07m
  • Ejercicio: _¿Qué es Babel y para qué se utiliza en React?
  • Lección en vídeo: 20 - Curso de ReactJS, Events 05m
  • Ejercicio: ¿Cuál es un pilar clave para manejar eventos en React?
  • Lección en vídeo: 21 - Curso de ReactJS, Componentes Controlados 11m
  • Ejercicio: _¿Qué evento se utiliza para revisar los cambios que se realizan en cada campo de texto del formulario en React JS?
  • Lección en vídeo: 22 - Curso de ReactJS, Lifting State Up 11m
  • Lección en vídeo: 23 - Curso de ReactJS, FitnessAPI 02m
  • Ejercicio: _¿Qué comando debemos ejecutar para instalar las dependencias necesarias del proyecto?
  • Lección en vídeo: 24 - Curso de ReactJS, Express 04m
  • Lección en vídeo: 25 - Curso de ReactJS, Solicitando datos al API 05m
  • Ejercicio: _¿Cuál es la función que se recomienda utilizar para realizar llamados dentro del ciclo de vida de un componente en React?
  • Lección en vídeo: 26 - Curso de ReactJS, Mejorando la UX 08m
  • Lección en vídeo: 27 - Curso de ReactJS, Enviando datos al API 06m
  • Ejercicio: _¿Qué atributos debe tener el objeto de configuración para realizar una petición POST?
  • Lección en vídeo: 28 - Curso de ReactJS, Estado después de POST 04m
  • Lección en vídeo: 29 - Curso de ReactJS, Fragments 02m
  • Ejercicio: _¿Cuál es la solución propuesta por React para retornar múltiples elementos sin crear un nuevo elemento dentro del DOM?
  • Lección en vídeo: 30 - Curso de ReactJS, Presentational 10m
  • Lección en vídeo: 31 - Curso de ReactJS, Hooks 08m
  • Ejercicio: _¿Qué son los hooks en React?
  • Lección en vídeo: 32 - Curso de ReactJS, State Hook 04m
  • Lección en vídeo: 33 - Curso de ReactJS, Effect Hook 04m
  • Ejercicio: _¿Qué es un hook en React JS y cómo se nombra por convención?
  • Lección en vídeo: 34 - Curso de ReactJS, Custom Hook 06m
  • Lección en vídeo: 35 - Curso de ReactJS, Ultimos Ajustes 05m
  • Ejercicio: _¿Cuál es el objetivo de centralizar la ruta de las peticiones HTTP en un solo lugar mediante la creación de un archivo de configuración llamado "config"?
  • Lección en vídeo: 36 - Curso de ReactJS, Firebase Hosting 05m
  • Lección en vídeo: 37 - Curso de ReactJS, Deploy 04m
  • Ejercicio: _¿Qué comando se utiliza para generar la versión de producción en React JS?
  • Lección en vídeo: 38 - Curso de ReactJS, Despedida 01m

Este curso gratuito incluye:

4 horas y 2 minutos de curso de vídeo online

Certificado digital de finalización del curso (Gratis)

Ejercicios para entrenar tus conocimientos

100% gratis, desde el contenido hasta el certificado

¿Listo para empezar?Descarga la app y empieza hoy mismo.

Instale la aplicación

ahora para acceder al curso
Icono que representa cursos de tecnología y negocios

Más de 5000 cursos gratuitos

¡Programación, inglés, marketing digital y mucho más! Aprende lo que quieras, gratis

Icono de calendario con una diana que representa la planificación de estudios

Plan de estudios con IA

La Inteligencia Artificial de nuestra app puede crear un horario de estudio para el curso que elijas

Icono profesional que representa carrera y negocios

De cero al éxito profesional

Mejora tu currículum con nuestro certificado gratuito y luego usa nuestra Inteligencia Artificial para encontrar el trabajo de tus sueños

También puedes utilizar el código QR o los enlaces que aparecen a continuación.

Código QR - Descargar Cursa - Cursos Online

Comentarios del curso: React JS

IC

IVAN CARLOS GONZALEZ CUETO

estrellaestrellaestrellaestrella

Me gustaría tener los contenidos del curso en PDF para estudiarlos después y practicarlos.

Más cursos gratuitos en Desarrollo web

¡Libro electrónico y audiolibros gratis! ¡Aprende escuchando o leyendo!

¡Descarga la App ahora para tener acceso a + 5000 cursos, ejercicios, certificados y mucho contenido gratis sin pagar nada!

  • Cursos online 100% gratuitos de principio a fin

    Miles de cursos online en vídeo, ebooks y audiolibros.

  • Más de 60 mil ejercicios gratuitos

    Para poner a prueba tus conocimientos durante los cursos en línea

  • Certificado Digital gratuito válido con Código QR

    Generado directamente desde la galería de fotos de tu celular y enviado a tu correo electrónico

Aplicación Cursa en la pantalla del libro electrónico, la pantalla del curso en video y la pantalla de ejercicios del curso, además del certificado de finalización del curso.