Bienvenido a Design Patterns React o Patrones de diseño en React.js. Esta guía cubre los patrones más efectivos y prácticos en React.js para ayudarte a escribir código más limpio y mantenible.
- Patrones de diseño tradicionales VS patrones de diseño en React.js
- Introducción a los Patrones de Diseño React JS
- Custom Hook
- HOC (Higher Order Component)
- Estilos Extensibles
- Componentes Compuestos
- Render Props
- Control Props
- Props Getters
- Inicializador de Estado
- Descargar el Ebook Completo
Los patrones de diseño son soluciones generales y reutilizables a problemas comunes que se presentan en el desarrollo de software.
Hicieron su debut en el libro "Design Patterns: Elements of Reusable Object-Oriented Software" de Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides, también conocido como "Gang of Four".
Originalmente, los patrones de diseño se aplicaban a la programación orientada a objetos, pero con el tiempo se han adaptado a otros paradigmas de programación, incluido el desarrollo web.
Sin embargo, los patrones que veremos a continuación son creados en base a los principios SOLID (principalmente Open - Close principle) y en las características especiales de React.js, como el uso de estados, composición, etc.
Por lo tanto, estos patrones no son aplicables a otras bibliotecas o frameworks como Vue.js o Angular.
Aprende los conceptos básicos y la importancia de los patrones de diseño en React JS.
Si prefieres el formato en vídeo, entonces te recomiendo que veas el curso completo en YouTube.
Leer el Blog | Ver el Curso Completo)
Un custom hook es una función que empieza por "use" para que React.js lo pueda reconocer como un hook, y sirve para que puedas crear tus propios hooks.
Considera:
- Un custom hook puede utilizar los hooks nativos de React.js y otros custom hooks
- Sigue las mismas reglas de uso de un hook (por ejemplo: no puedes inicializar un hook fuera de un componente).
Ejemplo de un custom hook:
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initialValue
} catch (error) {
console.log(error)
return initialValue
}
})
const setValue = (value) => {
try {
setStoredValue(value)
window.localStorage.setItem(key, JSON.stringify(value))
} catch (error) {
console.log(error)
}
}
return [storedValue, setValue]
}Leer el Blog | Ver Custom Hook en Video
Un HOC, o Higher Order Component, es esencialmente una función que recibe un componente y devuelve otro componente, pero con funcionalidades adicionales o modificadas. Piensa en los HOC como una forma de envolver un componente existente con nueva lógica, sin alterar el componente original.
Ejemplo de un HOC:
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
function withAuthentication(WrappedComponent) {
return function AuthenticatedComponent(props) {
const history = useHistory();
useEffect(() => {
if (!props.isAuthenticated) {
history.push('/login');
}
}, [props.isAuthenticated, history]);
return <WrappedComponent {...props} />;
};
}
const AuthenticatedComponent = withAuthentication(MyComponent);Leer el Blog | Ver HOC en Video
El patrón de Estilos Extensibles se refiere a la capacidad de crear componentes que acepten estilos personalizados y se combinen o extiendan de los estilos base del componente, permitiendo así personalizaciones más allá de las definiciones de estilo predeterminadas.
Ejemplo de estilos extendibles:
- Define un conjunto base de estilos para tu componente.
const baseStyle = {
color: 'blue',
padding: '10px',
margin: '5px',
}- Permite que se pasen estilos personalizados como props y combínalos con tus estilos base.
function CustomButton({ customStyle }) {
return <button style={{ ...baseStyle, ...customStyle }}>Click me!</button>
}- Ahora, cuando utilices tu componente, puedes pasar estilos personalizados
<CustomButton customStyle={{ backgroundColor: 'red', fontSize: '20px' }} />Leer el Blog | Ver Estilos Extensibles en Video
El Patrón de Componentes Compuestos en React es un patrón de diseño que, al ser combinado con Contexto de React, permite compartir estado entre componentes relacionados de manera implícita, sin tener que pasar props explícitamente a través de cada nivel del árbol de componentes.
Ejemplo de componente compuesto con Context:
- Crea tu Contexto:
const ArticleContext = React.createContext()- Crea Componentes que Consuman el Contexto: Estos componentes accederán al estado y funciones compartidos a través del contexto.
function Title() {
const { title } = React.useContext(ArticleContext)
return <h1>{title}</h1>
}
function Content() {
const { content } = React.useContext(ArticleContext)
return <p>{content}</p>
}- Combina los Componentes en un Componente Padre con Proveedor de Contexto: Este componente actuará como el componente compuesto, proporcionando el estado y funciones a sus hijos.
function Article(props) {
return (
<ArticleContext.Provider value={props}>
<div>
<Title />
<Content />
</div>
</ArticleContext.Provider>
)
}- Usa tu Componente Compuesto con Contexto:
<Article title="Título del Artículo" content="Contenido del artículo..." />El patrón Render Props en React se refiere a una técnica donde un componente recibe una función a través de sus props que devuelve un elemento React. Esta función se utiliza para determinar qué renderizar, permitiendo así una gran flexibilidad y reutilización de lógica entre componentes.
Ejemplo de Render Props:
import React, { useState } from 'react'
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 })
const handleMouseMove = (event) => {
setPosition({
x: event.clientX,
y: event.clientY,
})
}
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(position)}
</div>
)
}
const App = () => {
return (
<MouseTracker
render={({ x, y }) => (
<h1>
La posición del mouse es: (x: {x}, y: {y})
</h1>
)}
/>
)
}
export default AppLos Control Props se refieren a props que un componente acepta para controlar su estado interno.
Si alguna vez has utilizado un componente input controlado en React, imagina que puedes replicar lo mismo pero en cualquier componente.
La idea es que podamos tener la opción de que en lugar de que el componente gestione su propio estado, este recibe su estado a través de props y notifica cualquier cambio a través de callbacks.
Ejemplo de control props:
```jsx
import React, { useState } from 'react'
const Toggle = ({ value, setValue, defaultIsOn = false }) => {
const [isOn, setIsOn] = useState(defaultIsOn)
const isControlled = value !== undefined && setValue !== undefined
const currentState = isControlled ? value : isOn
const handleToggle = () => {
if (isControlled) {
setValue(!currentState)
} else {
setIsOn(!currentState)
}
}
return <button onClick={handleToggle}>{currentState ? 'ON' : 'OFF'}</button>
}
export default ToggleEl Props Getters pattern en React es una técnica avanzada que nos permite abstraer y distribuir propiedades a componentes hijos de una manera más eficiente y controlada.
Se utiliza comúnmente en componentes de bibliotecas para proporcionar un mayor control sobre cómo se aplican las props a los componentes hijos, sin sacrificar la personalización.
Ejemplo de Props Getters:
function Dropdown({ children }) {
const [isOpen, setIsOpen] = useState(false)
const getButtonProps = ({ onClick, ...props } = {}) => ({
onClick: (...args) => {
setIsOpen(!isOpen)
if (onClick) {
onClick(...args)
}
},
...props,
})
return (
<>
<button {...getButtonProps()}>Toggle Dropdown</button>
{isOpen && children}
</>
)
}El patrón State Initializer permite inicializar el estado de un componente en función de las props recibidas. Aunque esto puede lograrse directamente en el constructor de un componente de clase o en un Hook useState en un componente funcional, el patrón de State Initializer lleva esto un paso más allá, ofreciendo una mayor flexibilidad y control sobre el estado inicial.
Ejemplo de Inicializador de Estado:
function Counter({ initialCount }) {
const [count, setCount] = React.useState(initialCount)
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Incrementar</button>
</div>
)
}
// Uso:
;<Counter initialCount={5} />Leer el Blog | Ver el Video
¿Quieres profundizar más en estos patrones con ejemplos detallados, ventajas, desventajas y más? Descarga el ebook completo "9 Patrones Avanzados en React.js" gratis.
Aquí tienes un llamado a la acción en neutral español:
¿Te ha sido útil esta guía? No olvides darle una estrella a este repositorio ⭐ para que más desarrolladores puedan encontrarlo. Además, sigue nuestras redes para estar al tanto de más contenido sobre React.js y desarrollo frontend.
- Suscríbete a nuestro canal de YouTube para más tutoriales en video.
- Únete a nuestra lista de correos para recibir actualizaciones y recursos exclusivos.
- Síguenos en LinkedIn para consejos de carrera y noticias de la comunidad.
¡Gracias por ser parte de nuestra comunidad de desarrolladores!