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ón04m
Ejercicio: _¿Qué es React según su definición oficial?
Lección en vídeo: 02 - Curso de ReactJS, Herramientas03m
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 Oficial02m
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, CreateReactApp07m
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, ReactDOM09m
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, JSX10m
Ejercicio: ¿Qué es JSX y con qué se recomienda utilizarlo?
Lección en vídeo: 07 - Curso de ReactJS, Repositorio del Proyecto03m
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 componente10m
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 componentes07m
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 Props10m
Ejercicio: _¿Qué elementos del componente Cart se pueden personalizar mediante propiedades en React JS?
Lección en vídeo: 12 - Curso de ReactJS, El State06m
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 vida05m
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 Funcionales06m
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ágina03m
Ejercicio: _¿Cuál es la convención para nombrar las páginas en React?
Lección en vídeo: 16 - Curso de ReactJS, Listando Componentes09m
Ejercicio: ¿Cómo se organiza la visualización de ejercicios en la aplicación descrita?
Lección en vídeo: 17 - Curso de ReactJS, ReactRouter03m
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 Componentes12m
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, ES707m
Ejercicio: _¿Qué es Babel y para qué se utiliza en React?
Lección en vídeo: 20 - Curso de ReactJS, Events05m
Ejercicio: ¿Cuál es un pilar clave para manejar eventos en React?
Lección en vídeo: 21 - Curso de ReactJS, Componentes Controlados11m
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 Up11m
Lección en vídeo: 23 - Curso de ReactJS, FitnessAPI02m
Ejercicio: _¿Qué comando debemos ejecutar para instalar las dependencias necesarias del proyecto?
Lección en vídeo: 24 - Curso de ReactJS, Express04m
Lección en vídeo: 25 - Curso de ReactJS, Solicitando datos al API05m
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 UX08m
Lección en vídeo: 27 - Curso de ReactJS, Enviando datos al API06m
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 POST04m
Lección en vídeo: 29 - Curso de ReactJS, Fragments02m
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, Presentational10m
Lección en vídeo: 31 - Curso de ReactJS, Hooks08m
Ejercicio: _¿Qué son los hooks en React?
Lección en vídeo: 32 - Curso de ReactJS, State Hook04m
Lección en vídeo: 33 - Curso de ReactJS, Effect Hook04m
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 Hook06m
Lección en vídeo: 35 - Curso de ReactJS, Ultimos Ajustes05m
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 Hosting05m
Lección en vídeo: 37 - Curso de ReactJS, Deploy04m
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, Despedida01m
Comentarios del curso: React JS
IVAN CARLOS GONZALEZ CUETO
Me gustaría tener los contenidos del curso en PDF para estudiarlos después y practicarlos.