Certificado de Frontend con React

El desarrollo web ha experimentado una evolución constante, y en el ámbito del frontend, React se ha consolidado como una herramienta esencial para crear interfaces de usuario interactivas y eficientes. 

Este curso de Desarrollo frontend con React te guiará a través de los conceptos fundamentales y avanzados para que puedas construir aplicaciones web modernas y escalables.

Introducción y entorno

Introducción a React y su ecosistema

React es una biblioteca de JavaScript desarrollada por Facebook que permite construir interfaces de usuario de forma declarativa y eficiente. Su enfoque basado en componentes y su rendimiento optimizado han hecho que se convierta en una de las herramientas más populares para el desarrollo frontend.

¿Qué es React?
React es una biblioteca orientada a la construcción de interfaces de usuario reutilizables mediante componentes. Facilita la creación de aplicaciones web dinámicas y mejora la experiencia del desarrollador.

El ecosistema de React
Alrededor de React existe un amplio ecosistema de herramientas y bibliotecas complementarias, como Redux para la gestión del estado global, React Router para el enrutamiento, y muchas otras que enriquecen y facilitan el desarrollo.

Diferencia de React con Angular y Vue
Mientras que Angular es un framework completo y Vue se posiciona entre biblioteca y framework, React se centra exclusivamente en la capa de vista, proporcionando mayor flexibilidad al desarrollador para elegir otras herramientas según sus necesidades.

Comparativa de usar React vs JavaScript vanilla
Aunque es posible crear aplicaciones con JavaScript puro, React simplifica el proceso al gestionar de manera eficiente el DOM y ofrecer una estructura clara mediante componentes.

Instalar React y crear nuevo proyecto

Para empezar a desarrollar con React, es fundamental configurar correctamente el entorno de desarrollo y familiarizarse con las herramientas básicas.

Instalación de Node.js y npm
Node.js es un entorno de ejecución para JavaScript que permite utilizar npm (Node Package Manager) para gestionar dependencias y paquetes necesarios para React.

Introducción a Vite
Vite es una herramienta moderna de bundling que ofrece un entorno de desarrollo rápido y eficiente para aplicaciones React, mejorando los tiempos de arranque y recarga en caliente.

Creación de proyecto hola mundo en React con Vite
Inicia un nuevo proyecto ejecutando npm init vite@latest y seleccionando la plantilla de React. Esto generará una estructura básica para empezar a desarrollar.

Estructura de un proyecto React 18
Comprende la organización de archivos y carpetas, como src, donde se encuentra el código fuente, y componentes clave como App.jsx.

Componentes

Los componentes son la esencia de React. Permiten dividir la interfaz en piezas independientes y reutilizables, facilitando el mantenimiento y escalabilidad de las aplicaciones.

Introducción a JSX

JSX es una extensión de la sintaxis de JavaScript que permite escribir código similar a HTML dentro de JavaScript, simplificando la creación de componentes.

Definición de JSX y propósito, diferencias con HTML
Aunque JSX se parece a HTML, en realidad es una sintaxis propia de React que se transforma en llamadas a funciones de JavaScript durante la compilación.

Elementos y atributos en JSX
Aprende a utilizar elementos y atributos en JSX, teniendo en cuenta diferencias como className en lugar de class, y el uso de camelCase para los nombres de atributos.

Interpolación en JSX
JSX permite insertar expresiones de JavaScript dentro del marcado utilizando llaves {}, lo que facilita la inclusión de variables y funciones.

Vista general de todo lo que puede hacer JSX
Descubre cómo JSX soporta estructuras de control, llamadas a funciones y otros mecanismos para crear interfaces dinámicas.

Introducción a Componentes

¿Qué es un componente en React?
Un componente es una función o clase que puede renderizar elementos de React y manejar su propio estado y propiedades.

Diferencia entre componentes funcionales y componentes de clase
Los componentes funcionales son funciones de JavaScript que retornan JSX, mientras que los componentes de clase son más complejos y están siendo reemplazados por los funcionales gracias a los Hooks.

Crear y renderizar un componente básico en la aplicación
Aprende a definir un componente y cómo incluirlo en el árbol de componentes para que se muestre en la interfaz.

Modularidad y reutilización de componentes
Diseña componentes que puedan ser utilizados en diferentes partes de la aplicación, promoviendo la reutilización y mantenibilidad del código.

Componentes funcionales

Sintaxis de componentes funcionales
Comprende la estructura básica de un componente funcional y cómo retorna elementos JSX.

Ejemplo de componente de texto estático
Crea un componente simple que muestra un mensaje predeterminado en la pantalla.

Ejemplo de componente que muestra la fecha actual
Utiliza funciones de JavaScript para mostrar información dinámica dentro del componente.

Ejemplo de componente que usa una variable
Aprende a pasar datos al componente mediante variables y cómo renderizarlos.

Ejemplo de componente con una estructura HTML completa
Construye componentes más elaborados que incluyan múltiples elementos y estilos.

Eventos en React

Los eventos permiten a los componentes responder a las interacciones del usuario, como clics o entradas de texto.

¿Qué son los eventos en React?
Son manejadores que permiten capturar y responder a acciones del usuario dentro de la interfaz.

Eventos de clic y eventos de formulario
Aprende a implementar eventos comunes como onClick y onSubmit, y cómo manejar la información asociada.

Argumentos en eventos y prevenir comportamiento predeterminado
Descubre cómo pasar argumentos a los manejadores de eventos y evitar acciones por defecto como el recargo de la página.

Propagación de eventos
Entiende cómo los eventos se propagan a través del DOM y cómo controlarlo mediante stopPropagation.

Contexto this en eventos
Aunque menos común en componentes funcionales, es importante conocer el contexto en el que se ejecutan los eventos.

Props y manejo de datos entre componentes

Qué son las props en React
Las props (propiedades) son datos que se pasan de un componente padre a uno hijo, permitiendo la comunicación y reutilización de componentes.

Uso y renderizado de props como parámetro
Aprende a recibir y utilizar las props dentro de un componente para personalizar su contenido.

Uso de múltiples props
Descubre cómo pasar y manejar múltiples propiedades para controlar diferentes aspectos del componente.

Props por defecto
Establece valores predeterminados para las props en caso de que no se proporcionen desde el componente padre.

Propagación de props
Utiliza el operador spread ... para pasar todas las props a un componente hijo de forma eficiente.

Props para componentes reutilizables
Diseña componentes genéricos que puedan ser reutilizados en diferentes contextos ajustando sus props.

Renderizado condicional

¿Qué es el renderizado condicional en React?
Es la técnica que permite mostrar u ocultar elementos en la interfaz en función de ciertas condiciones.

Renderizado condicional con operador ternario
Utiliza expresiones ternarias para renderizar componentes de manera concisa.

Renderizado condicional con operador lógico &&
Muestra componentes solo si una condición es verdadera, simplificando el código.

Renderizado condicional de múltiples condiciones con if, else if y else
Maneja situaciones más complejas utilizando estructuras de control tradicionales.

Buenas prácticas de renderizado condicional
Mantén un código limpio y legible evitando anidaciones profundas y redundancias.

Renderizado iterativo con bucles

¿Qué es el renderizado iterativo en React?
Permite generar listas de elementos de forma dinámica a partir de datos almacenados en arrays.

Uso del método map()
Itera sobre arrays y retorna elementos JSX para cada uno de sus elementos.

Importancia de las keys
Las keys ayudan a React a identificar qué elementos han cambiado, mejorando el rendimiento y evitando errores.

Renderizado iterativo combinado con renderizado condicional
Filtra y muestra elementos en función de condiciones específicas.

Renderizado iterativo de componentes personalizados
Crea listas de componentes propios, pasando props para personalizar cada instancia.

Manejo de clases y estilos

Sintaxis de estilos en línea y estilos en línea dinámicos
Aplica estilos directamente en los componentes, incluyendo estilos que cambian en función del estado.

Uso de clases CSS y aplicación condicional de clases
Controla las clases CSS aplicadas a un elemento para modificar su apariencia según ciertas condiciones.

Introducción a CSS Modules
Aprende a utilizar CSS Modules para evitar conflictos de nombres y mantener estilos encapsulados.

Hooks de React

Los Hooks introducen una forma más sencilla y potente de manejar el estado y otros aspectos de React sin necesidad de componentes de clase.

Introducción a los Hooks

¿Qué son los hooks?
Son funciones que permiten "enganchar" funcionalidades de React como el estado y el ciclo de vida en componentes funcionales.

Reglas de los hooks
Sigue pautas como solo llamar hooks en el nivel superior y solo en funciones de React para evitar comportamientos inesperados.

Estado y ciclo de vida de los componentes

¿Qué es el ciclo de vida en componentes de React?
Son las diferentes fases por las que pasa un componente, desde su montaje hasta su desmontaje.

Ciclo de vida en componentes de clase
Métodos como componentDidMount y componentWillUnmount manejan acciones antes y después de la renderización.

Ciclo de vida en componentes funcionales
Con useEffect, puedes replicar el comportamiento de los métodos de ciclo de vida en componentes funcionales.

Hooks para manejo de estado y efectos secundarios

Manejo de estado local con useState
Permite añadir un estado local a un componente funcional y actualizarlo.

Manejo de efectos secundarios con useEffect
Ejecuta código después de que React haya actualizado el DOM, ideal para operaciones como solicitudes de datos.

Ejemplo combinado de useState y useEffect
Implementa un contador que actualiza el título de la página según el valor del estado.

Hooks para gestión de estado complejo y contexto

useContext para compartir estado global
Evita pasar props a través de múltiples niveles y accede al contexto directamente.

useReducer para manejo de estado complejo
Gestiona estados que requieren lógica de actualización más elaborada, similar a Redux.

useRef para acceso a referencias y persistencia de valores
Accede a elementos del DOM y mantén valores entre renderizados sin causar re-renderizados adicionales.

Buenas prácticas de useContext, useReducer, useRef
Utiliza estos hooks adecuadamente para mantener un código organizado y eficiente.

Hooks para optimización y actualizaciones concurrentes

Introducción a la memoización y conceptos de optimización
Mejora el rendimiento de tu aplicación evitando renderizados y cálculos innecesarios.

useMemo para cálculos pesados
Memoriza valores calculados para evitar recomputarlos en cada renderizado.

useCallback para memoización de funciones
Evita la recreación de funciones en cada renderizado, útil al pasar funciones a componentes hijos.

useTransition y useDeferredValue para actualizaciones concurrentes
Gestiona actualizaciones de estado de manera más fluida, mejorando la experiencia del usuario.

useId para generación de identificadores únicos
Genera IDs únicos para elementos, fundamental en listas y formularios.

useOptimistic para UI optimista
Mejora la percepción de rendimiento mostrando cambios antes de recibir confirmación del servidor.

Navegación y enrutamiento

El enrutamiento es esencial para aplicaciones con múltiples vistas. React Router es la solución estándar para manejar rutas en React.

Introducción a React Router

¿Qué es React Router?
Es una colección de componentes que permite gestionar la navegación y rutas de una aplicación React.

Instalación y configuración de React Router
Añade React Router a tu proyecto e inicializa la configuración básica.

Rutas simples para diferentes componentes
Define rutas en tu aplicación y asocia cada una a componentes específicos.

Link y NavLink
Implementa navegación mediante enlaces que interactúan con el historial del navegador.

Definición y manejo de rutas

Explicación de <Routes> y <Route>
Organiza tus rutas utilizando estos componentes esenciales.

Manejo de parámetros dinámicos en rutas y useParams
Accede y utiliza parámetros en la URL para renderizar contenido dinámico.

Rutas no coincidentes y <Navigate>
Redirige a los usuarios o muestra páginas de error cuando una ruta no existe.

Rutas anidadas y rutas dinámicas

Definición y uso de rutas anidadas
Crea estructuras de navegación más complejas con rutas dentro de rutas.

Navegación programática y redireccionamiento

Navegación programática con useNavigate
Controla la navegación desde el código, útil para redirigir después de eventos como un envío de formulario.

Redirecciones condicionales
Implementa lógica para redirigir a los usuarios según su estado, como si están autenticados.

createBrowserRouter
Aprende a utilizar este nuevo método para configurar el enrutamiento de tu aplicación.

Diferencias entre BrowserRouter y createBrowserRouter
Comprende las ventajas y casos de uso de cada enfoque para elegir el más adecuado.