Construir aplicaciones web con React que cumplan con estándares de calidad y buenas prácticas en el desarrollo de software. Desarrollar aplicaciones de cierta complejidad y estar listo para emprender proyectos más avanzados de manera independiente. Incorporar React a tu conjunto de habilidades de programación, mejorando tu perfil profesional y tus oportunidades en el mercado laboral.

Introducción a React

¿Qué es React y por qué es importante?

Ventajas de usar React

Instalación y configuración del entorno de desarrollo

Instalación de Node.js y npm

Selección de un editor de código Visual Studio Code REACT

Mi primera aplicación React

¿Qué es Vite?

Creando nuestra primera aplicación React con Vite

Estructura del proyecto en Vite

Resumen

Fundamentos de React

Componentes

Exportar e importar componentes

JSX

Reglas JSX

Props

Características

Ciclo de vida de los componentes

Montaje de componentes

Actualización de componentes

Desmontaje de componentes

Resumen

Gestión de estado en React

UseState

UseEffect

UseContext

UseReducer

Resumen

Enrutamiento en React

Instalar y configurar React Router

Componente Router

Opciones componente Route

path

exact

strict

sensitive

element

children

Navigate

Creación de rutas anidadas

Paso de parámetros y consultas

Parámetros de Ruta

Parámetros de Consulta (Query Params)

Resumen

Trabajo con formularios

Formularios controlados vs. no controlados

Formularios controlados

Formulario no controlado

Inputs de formularios

Input de texto

Área de texto (Textarea)

Checkbox

Input radio

Select

Validación de formularios

Validación de formulario Avanzado

Formik

Instalación de Formik

Inicialización de un formulario con Formik

Hooks personalizados con useFormik

Resumen

Gestión de datos

Integración de APIs externas

Tipos de métodos HTTP POST, GET, PUT/PATCH y DELETE

Transformación y manipulación de datos

Entendiendo la integración de APIs en React

Transformación de Datos

Manipulación de Datos

Uso de async/await

Control de errores

Axios paso a paso

Instalación de axios

Realizar una solicitud GET

Enviar una solicitud POST

Manejo de errores

Uso de async-await con Axios

Gestión de datos en desarrollo con LocalStorage

Ejemplo de almacenamiento y recuperación de datos

Eliminación de datos

Resumen

Estilización y diseño

Aplicar CSS

Librería de estilos Styled Components

¿Qué es?

Ejemplo básico

Reutilización basada en props

Temas y variables globales

Refinando componentes existentes

Resumen

Despliegue y hospedaje

Vite

Configuración de Vite para Producción

Tree Shaking y Eliminación de Código Muerto

Optimización de Recursos Externos

Uso de Variables de Entorno

Pruebas de Rendimiento y Análisis de Bundle

Automatización del Proceso de Construcción y Despliegue

Empaquetado y estructura de carpetas al hacer un build con vite

Contenidos del directorio de distribución

Ejemplo de configuración de Vite para el empaquetado

Simular servidor de producción

Instalación de serve

Uso de serve para simular el servidor

Personalización del puerto

Resumen

Optimización y rendimiento

React Memo

Características de React Memo

Uso de React Memo

PureComponent

Ejemplo de uso de PureComponent

Uso eficiente de Hooks

UseState y rendimiento

UseEffect y la limpieza de side effects

UseContext y componentes altamente reutilizables

UseReducer para estados complejos

UseMemo para optimizar rendimiento

Lazy loading y Suspense

Manejo de Errores con Suspense

Resumen

Gestión de estado avanzada y depuración

Redux y su ecosistema

Redux toolkit

Uso de React DevTools

Inspección de componentes

Detección de cambios de estado y props

Profiling de rendimiento

Rastreo de actualizaciones

Examinar el árbol de componentes

Resumen