Ruta de Conviértete en un Desarrollador de React - Aprendizaje en Línea con Certificado

Conviértete en un Desarrollador de React

Intermediate

4.3

114 reviews

5.7k+ Learners

Domina el arte de crear interfaces de usuario dinámicas e interactivas para aplicaciones web como desarrollador experto de React. Si entiendes bien Ja…

142

Chapters

Learning hours

Assignments

AI Assistant

Shareable Certificate

Resultados

Track content

Related courses and projects

Testimonios

Características

Precios

Resultados

Track content

Related courses and projects

Testimonios

Características

Precios

Lo que aprenderás

Building reusable UI components with React

Navigating apps using React Router

Setting up and deploying Next.js projects

Styling React apps with CSS and inline styles

Handling state with Redux Toolkit

Fetching and displaying data in Next.js

Managing state with React Hooks and Context

Developing apps with Next.js framework

Implementing authentication in Next.js

Learning track content

Adquiera una comprensión de los principios fundamentales de React. Aprenderá sobre JSX (JavaScript XML), la construcción de componentes de UI reutilizables y el renderizado de elementos. Además, explorará la importancia de la recopilación de datos y el renderizado condicional en aplicaciones React. Al finalizar esta sección, contará con una base sólida de los conceptos esenciales de React, preparándolo para abordar con éxito los temas más avanzados de las siguientes secciones.

¿Qué Es React y Por Qué Usarlo?

Comparación Entre SPA y MPA en el Desarrollo Web

Cómo Funciona React con el DOM Virtual

Introducción a JSX para Escribir HTML en JavaScript

Construcción de Interfaces de Usuario Complejas con JSX

Renderizado de Elementos en React

Desafío: Renderizar un Elemento en React

Comprensión de los Componentes de React

Pasar Datos con Props en React

Desafío: Crear Componentes Funcionales

Renderizado Condicional en React

Desafío: Implementar Renderizado Condicional – Notificación de Chat

Desafío: Implementar Renderizado Condicional – Alerta Bancaria

Renderizado de Colecciones de Datos en React

Desafío: Mostrar Colecciones de Datos en React

Resumen de Fundamentos de React

Explora los diversos métodos para agregar estilos a las aplicaciones React. Aprenderás a aplicar estilos a componentes individuales, utilizar estilos dinámicos y mantener un enfoque de estilizado escalable y mantenible en tus proyectos.

Introducción al Estilizado en React

Uso de Estilos en Línea en React

Aplicación Práctica de Estilos en Línea

Desafío: Uso de Estilos en Línea en un Componente de React

Estilizado de Componentes React con CSS Externo

Aplicación Práctica de CSS Externo

Desafío: Aplicar CSS Externo a una Aplicación React

Uso de Módulos CSS para Estilos con Alcance en React

Organización de Archivos y Estructuras de Carpetas para Estilos

Desafío: Uso de Módulos CSS en React

Resumen de Técnicas de Estilizado en React

Funciones avanzadas en el desarrollo moderno con React. Los hooks revolucionan la forma en que escribimos componentes funcionales, proporcionando una manera concisa e intuitiva de gestionar el estado y manejar efectos secundarios. Por otro lado, el Contexto nos permite compartir datos a través del árbol de componentes sin necesidad de prop drilling. La combinación de hooks y Contexto posibilita una gestión eficiente del estado y una compartición de datos simplificada en aplicaciones React.

Introducción a React Hooks y Context

Gestión de Estado con el Hook useState

Desafío: Alternar Visibilidad con useState

Trabajando con Referencias Usando el Hook useRef

Desafío: Crear un Componente de Formulario Controlado

Gestión de Efectos Secundarios con el Hook useEffect

Desafío: Obtener y Mostrar Datos con useEffect

Optimización del Rendimiento con el Hook useMemo

Desafío: Implementar un Filtro de Lista de Autos con useMemo

Compartir Estado Entre Componentes con Context

Uso de Context en un Escenario del Mundo Real

Desafío: Crea una Aplicación de Astronomía Mundial con Context

Resumen de React Hooks y Context

Guía paso a paso sobre cómo iniciar un proyecto React del mundo real. Desde la configuración del entorno de desarrollo hasta la comprensión de la organización del proyecto y las herramientas críticas, obtendrá el conocimiento y la confianza necesarios para comenzar su trayectoria en React.

Configuración de Su Entorno de Desarrollo React

Elección de un Editor de Código para el Desarrollo con React

Organización de la Estructura de Carpetas del Proyecto

Trabajar con la Terminal en el Desarrollo con React

Iniciar y Ejecutar un Proyecto React con Vite

Resumen de la Configuración del Proyecto React

Aprenda los fundamentos teóricos de conceptos como URL, dominio, protocolo, parámetros de consulta y más. Comprenda la importancia del enrutamiento en aplicaciones web y la razón por la que se necesita la biblioteca React Router.

Introducción al Enrutamiento en Aplicaciones Web

¿Qué es React Router?

Comprensión de la Estructura de URL

Explorando URLs en la Práctica

Cuestionario: Conceptos Fundamentales de React Router y URLs

Descubra cómo crear una aplicación React completa desde cero, con la capacidad de mostrar contenido que se adapta según la URL utilizando la funcionalidad de React Router.

Visión General del Sitio Web Multipágina

Instalación de React Router

Habilitación de Enrutamiento en una Aplicación React

Definición de Rutas para la Navegación

Recapitulación: Primeros Pasos en React Router

Optimizando las Importaciones con Carga Diferida

Implementación de un Componente de Reserva

Recapitulación: Segundos Pasos en React Router

Creación y Gestión de la Navegación

Explorando la Lógica Completa de React Router

Resumen de los Fundamentos de React Router

Explora el uso de cadenas de consulta para compartir y gestionar el estado de la aplicación a través de URLs, trabaja con diferentes tipos de datos en los parámetros de consulta y aprovecha React Router para la navegación y los efectos basados en cambios de URL.

Visión General

Comprensión de las Cadenas de Consulta en URLs

Configuración de un Componente React

Inspección de Cambios Recientes

Trabajando con Parámetros de Consulta

Integración del Hook useSearchParams

Aplicación Final

Resumen del Curso de React Router

Explora los conceptos fundamentales de la gestión de estado y aprende a aprovechar el poder de Redux Toolkit. Te guiaremos a través del proceso de instalación y te ayudaremos a crear tu primer proyecto de React con Redux Toolkit. Además, enfrenta un desafío para poner a prueba tu comprensión y habilidades.

Lo Que Aprenderá en Este Curso

Introducción a la Gestión de Estado

Comprendiendo Redux Toolkit

Instalación de Redux Toolkit

Creación de Tu Primer Proyecto React Redux Toolkit

Desafío: Instalar Redux Toolkit

Software Adicional

Exploración de la integración de Redux con aplicaciones React, abarcando conceptos fundamentales: acciones, reductores y el almacén de Redux. Incluye ejemplos prácticos y explicaciones de código para configurar un almacén, crear reductores y conectar componentes de React mediante hooks como useSelector y useDispatch.

Qué Te Espera

Comprensión del Código del Proyecto y la Estructura de Archivos

Creación de la Tienda Redux

Integración del Store de Redux en la Aplicación React

Inspección del Store en la Aplicación React

Comprensión de las Acciones y los Creadores de Acciones

Comprensión del Papel de los Reducers

Inspección de Acciones y Reductores en Redux

Conexión de Redux con Componentes de React

Completando la Aplicación

Potencie sus habilidades en la gestión de estado. En este taller práctico, enfrentará desafíos del mundo real y adquirirá experiencia práctica utilizando Redux Toolkit para un desarrollo de aplicaciones sin inconvenientes.

Visión General del Desafío

Directrices y Reglas del Desafío

Desafío: Configurar la Tienda de Redux

Desafío: Crear Acciones de Redux

Desafío: Implementar el Reducer

Desafío: Conectar Redux con React

Resumen de Redux Toolkit

Analizaremos los conocimientos previos necesarios antes de comenzar con el framework Next.js, lo que puede esperar de este curso y los proyectos que desarrollará.

Bienvenido al Curso

Visión General del Proyecto

Prerrequisitos del Curso

Cómo Está Estructurado Este Curso

Configuraremos el proyecto, examinaremos formas de agregar estilos a nuestra aplicación y abordaremos aspectos visuales como imágenes, fuentes, páginas y diseños.

Configuración del Proyecto Next.js

Comprensión de la Estructura de Archivos y Carpetas del Proyecto

Enfoques de Estilos en Next.js

Agregar el Archivo CSS Global

Uso de Tailwind CSS para el Diseño

Trabajando con Módulos CSS

Aplicación Condicional de Estilos

Agregar Fuentes Personalizadas de Google

Desafío: Implementar una Fuente Personalizada de Google

Gestión de Imágenes en Next.js

Aprenda a crear y gestionar fácilmente una nueva vista para su aplicación y a navegar por todas las páginas de manera fluida con un sistema de enrutamiento incorporado.

Cómo Funciona el Enrutamiento en Next.js

Desafío: Crear una Nueva Página

Creación de un Componente de Diseño Común

Optimizando la Navegación en Next.js

Creación y Gestión de Enlaces Activos

Despliegue de la aplicación Next.js utilizando cuentas de GitHub y Vercel. Además, establecimiento de una base de datos para proporcionar los datos necesarios a la aplicación.

Configuración de Cuentas de GitHub y Vercel

Despliegue de la Aplicación Next.js en Vercel

Configuración de una Base de Datos para el Proyecto

Poblar la Base de Datos con Datos Iniciales

Considere cómo obtener y mostrar datos al usuario de manera clara y eficiente.

Cómo Obtener Datos en Next.js

Trabajando con la Página del Panel

Desafío: Recuperar y Mostrar Datos

Renderizado Dinámico vs. Estático en Next.js

Comprensión de los Loaders

Implementación de Cargadores de Partes Específicas

Desafío: Crear un Cargador Esqueleto

Optimizando Cargadores con Agrupación de Componentes

Descubra cómo implementar características web modernas como paginación, operaciones CRUD, búsqueda global, validación de formularios y más.

Creación de la Página de Facturas

Desarrollo de la Funcionalidad de Búsqueda

Agregando Paginación a una Aplicación Next.js

Uso de Acciones del Servidor en Next.js

Creación de un Nuevo Elemento en la Base de Datos

Actualización de un Elemento en la Base de Datos

Eliminación de un Elemento en la Base de Datos

Desafío: Implementar Validación de Formularios

Implementación de autenticación en Next.js.

Comprensión de la Autenticación

Configuración de la Ruta de Inicio de Sesión

Uso de NextAuth.js para Autenticación

Configuración de la Autenticación y Protección de Rutas

Hashing de Contraseñas y Gestión de Credenciales

Implementación de la Funcionalidad de Inicio de Sesión

Conexión de la Interfaz de Usuario con la Lógica de Autenticación

Implementación de la Funcionalidad de Cierre de Sesión

Reflexiones Finales y Próximos Pasos

¡Impulsa tus habilidades tecnológicas!

con hasta un 55% de descuento

Features:

*Tracks not included in Pro plan

500+ cursos mejor calificadosCopiloto de IA de vanguardia

Rutas de estudio personalizadas40+ proyectos prácticos del mundo real

Sin cancelación, antes de que finalice el plan seleccionado con descuento, acepto que Codefinity cobrará automáticamente $104 cada 3 meses hasta que cancele. Obtén más información sobre la política de cancelación y reembolso en Términos de Suscripción.

Recommended Courses and Projects

MUI Essentials for React Applications

Build modern, responsive, and visually polished React applications using Material UI. Learn to structure interfaces with core components, design flexible layouts, manage forms, and apply responsive behavior. Customize themes, refine visual styles, and develop practical features through focused, real-world mini projects. Gain the confidence to create clean, accessible, production-ready UIs with MUI.

Animations in React with Framer Motion

Master UI animation techniques in React using Framer Motion. Build animated components, control motion through state and variants, implement interactive gestures, and optimize animations for performance and accessibility. Apply animation patterns that scale across real application interfaces and navigation flows.

State Management in React with Zustand

Manage application state in React using Zustand. Create and update stores, derive and organize state, handle asynchronous logic, and apply middleware for extended behavior. Structure Zustand stores effectively and evaluate when Zustand is an appropriate state management solution.

Building UI Systems in React with Storybook

Develop, document, and test React UI components using Storybook. Create structured stories, configure addons for documentation and testing, and scale component libraries for team workflows. Integrate Storybook into collaborative development and automated delivery pipelines.

Data Visualization in React with Recharts

Build powerful, interactive data visualizations in React using Recharts. Learn how to integrate Recharts into React projects, render essential chart types, customize design and behavior, work with dynamic real-world data, and apply best practices for performance, accessibility, and scalability.

End to End Testing React Apps with Playwright

Test React applications end to end using Playwright. Write reliable browser tests, interact with UI elements, handle asynchronous behavior, and validate navigation and network behavior. Apply advanced testing strategies to build scalable, maintainable test suites for production React applications.

Mapbox Vector Maps in React Apps

Integrate Mapbox vector maps into React applications. Render interactive maps, customize styles and layers, and implement advanced interactivity such as events and geolocation.

React Data Visualization with Chart.js

Learn how to build modern, interactive, and visually engaging data visualizations in React using Chart.js. Explore integrating Chart.js with React, creating popular chart types, handling dynamic data, customizing chart appearance, and building real-world dashboards.

Three.js 3D Graphics in React Apps

Build 3D graphics in React applications using Three.js. Create and render 3D scenes, add objects, lighting, and cameras, and implement interactive and animated behaviors. Optimize rendering performance and structure scalable 3D applications for production use.

Auth0 Authentication and Authorization in React Apps

Implement secure authentication and authorization in React applications using Auth0. Configure login flows, protect routes, manage user sessions, and customize authentication experiences. Apply advanced Auth0 features such as roles, permissions, and secure API access in production React apps.

Axios for React Applications

Learn how to integrate Axios into React applications for reliable data fetching and API communication. Practice performing HTTP requests, handling responses and errors, configuring Axios globally, and managing requests efficiently. Gain practical experience structuring API logic for scalable and maintainable React projects.

Clerk Authentication in React Apps

Implement user authentication in React applications using Clerk. Integrate Clerk into React, manage user sessions and profile data, customize authentication flows, and control authentication state. Apply secure authentication practices and troubleshoot common authentication issues.

Discover more Learning Tracks

pista

Desarrollo Web con C#

Principiante

SQL de Cero a Héroe

Principiante

C++ para Principiantes

Principiante

Desarrollo de Juegos con Unity

Principiante

Esenciales de Java

Principiante

Desarrollo Web Full Stack

Principiante

Fundamentos del Desarrollo Frontend

Principiante

Análisis y Visualización de Datos con Python

Intermedio

Dominio del Aprendizaje Automático

Intermedio

Dominio de C++

Avanzado

Java Web

Avanzado

Por qué la gente elige Codefinity

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

Entorno de codificación interactivo

Sumérgete en nuestro entorno interactivo: escribe y ejecuta tu código con retroalimentación en tiempo real y métricas de éxito—aprende haciendo en cada paso.

Soporte potenciado por IA

Aprovecha el asistente de IA integrado para explicar errores, sugerir soluciones o responder cualquier pregunta sobre tu código—para que te mantengas productivo y nunca te quedes atascado.

Check your progress

Concluye cada módulo con un cuestionario rápido que ofrece retroalimentación instantánea, rastrea tu progreso y asegura que hayas dominado los conceptos clave.

Promote your expertise

Obtén tu certificado reconocido por la industria al completar y compártelo en LinkedIn con un clic—deja que tu red vea lo que puedes hacer.

Confiado por empleados de empresas líderes
y estudiantes de universidades de élite

Acceso completo al catálogo

Una suscripción abre este curso y todo nuestro catálogo de proyectos y habilidades.

Features:

500+ cursos mejor calificadosCopiloto de IA de vanguardia

Rutas de estudio personalizadas40+ proyectos prácticos del mundo real

Prueba Codefinity con confianza – garantía de devolución de dinero de 30 días incluida

Para darte la bienvenida a Codefinity, estamos ofreciendo hasta 64% de descuento en nuestros cursos. Además, tenemos una garantía de devolución de dinero de 30 días, para que puedas probarnos sin riesgo.Esperamos sinceramente darte la bienvenida a nuestra plataforma y estamos comprometidos a hacer que tu experiencia de aprendizaje sea fácil, interactiva y divertida.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
to kickstart your career

500+ Top-Rated courses

Completion certificates

Early access to new courses

40+ hands-on Real-world projects

Personalized study tracks

Unlimited workspaces

Accede instantáneamente a 500+ cursos

Aprendizaje ilimitado, acceso instantáneoObtén acceso completo a todos los cursos y rutas, incluyendo contenido en video, cuestionarios y materiales detallados—comienza a aprender en cualquier momento.

Certificados reconocidos por la industriaObtén certificados que validen tu experiencia y potencien tu carrera en tecnología, IA, datos, marketing y más allá.

Aprendizaje asistido por IAObtén pistas personalizadas, retroalimentación en tiempo real y explicaciones potenciadas por IA para acelerar tu progreso.

En constante expansión: Nuevos cursos y rutas profesionalesMantente a la vanguardia con cursos constantemente actualizados, hojas de ruta profesionales, desafíos y pruebas prácticas.

Desarrolla habilidades que importanDomina habilidades demandadas con cursos en IA, ciencia de datos, programación, marketing, automatización, desarrollo web y más.

Aprendizaje interactivo y fluidoParticipa en proyectos prácticos, ejercicios del mundo real y una experiencia de aprendizaje intuitiva — no se necesitan herramientas adicionales.

Lo que aprenderás

Desarrollo Web con C#

SQL de Cero a Héroe

C++ para Principiantes

Desarrollo de Juegos con Unity

Esenciales de Java

Desarrollo Web Full Stack

Fundamentos del Desarrollo Frontend

Análisis y Visualización de Datos con Python

Dominio del Aprendizaje Automático

Dominio de C++

Java Web

Por qué la gente elige Codefinity

Confiado por empleados de empresas líderes y estudiantes de universidades de élite

Acceso completo al catálogo

Prueba Codefinity con confianza – garantía de devolución de dinero de 30 días incluida

Accede instantáneamente a 500+ cursos

Confiado por empleados de empresas líderes
y estudiantes de universidades de élite