Vamos a sumergirnos en el mundo del estilo en React, que es esencialmente como elegir el atuendo perfecto para tu aplicación. Al igual que en la moda, donde tienes diferentes opciones de ropa y accesorios para diferentes ocasiones, en React tienes varias formas de estilizar tus componentes para hacer que se vean atractivos y funcionen bien en el entorno de usuario. Veamos algunas de las técnicas más populares.
El CSS en línea en React es similar a vestir tu componente directamente con los estilos que necesita para una ocasión específica. Se utiliza principalmente para estilos que son dinámicos y dependen del estado del componente.
console.log( 'Code is Poetry' );function Button() {
const style = {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
};
return <button style={style}>Presiona Aquí</button>;
}
En este ejemplo, el estilo está directamente adjunto al botón. Es simple y directo, pero puede volverse difícil de manejar a medida que tus estilos se vuelven más complejos.
Los CSS Modules son como tener un armario organizado donde cada tipo de ropa (componente) tiene su propio conjunto de estilos que no se mezclan con los de otros. Esto evita problemas de nombres de clases globales y hace que el manejo de los estilos sea más modular y mantenible.
Para usar CSS Modules, crea un archivo .css que corresponda a tu componente, por ejemplo, Button.module.css:
/* Button.module.css */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Luego, importa y usa estos estilos en tu componente:
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Presiona Aquí</button>;
}
Aquí, styles.button se refiere a una clase generada automáticamente que es única para el componente, evitando cualquier conflicto de estilo.
Usar bibliotecas como styled-components es como tener un diseñador personal que crea trajes únicos y reutilizables para tus componentes. Esta biblioteca permite escribir CSS real en tus componentes de JavaScript, combinando el comportamiento con el estilo.
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
function Button() {
return <StyledButton>Presiona Aquí</StyledButton>;
}
En este ejemplo, StyledButton es un componente con estilos aplicados que puedes reutilizar en cualquier lugar de tu aplicación. Además, styled-components permite estilos dinámicos basados en props, facilitando la personalización.
Piensa en los Componentes de Orden Superior (HOC) como los asistentes personales de tus componentes React. Estos asistentes pueden ayudar a tus componentes a realizar tareas repetitivas o a compartir funcionalidades comunes, liberando a tus componentes de la carga de trabajo y permitiéndoles centrarse en lo que hacen mejor: mostrar contenido.
Los Componentes de Orden Superior (HOC) son funciones que toman un componente y devuelven otro componente mejorado. Funcionan como envolturas alrededor de tus componentes existentes, proporcionándoles nuevas habilidades o características.
Imagina que tienes una tarea que necesitas realizar en varios lugares de tu aplicación, como autenticar usuarios o registrar analíticas. En lugar de repetir la misma lógica en múltiples componentes, puedes encapsular esa lógica en un HOC y simplemente aplicarlo a los componentes relevantes.
Supongamos que tienes un HOC llamado withLogger que registra cuando un componente se monta:
import React, { Component } from 'react';
function withLogger(WrappedComponent) {
return class extends Component {
componentDidMount() {
console.log(`El componente ${WrappedComponent.name} se ha montado.`);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
Este HOC toma un componente y devuelve una nueva versión de ese componente que imprime un mensaje en la consola cuando se monta.
Para utilizar este HOC, simplemente envuelve tu componente con él:
class MyComponent extends Component {
render() {
return <div>¡Hola, mundo!</div>;
}
}
const EnhancedComponent = withLogger(MyComponent);
Ahora, EnhancedComponent es una versión mejorada de MyComponent que registra su montaje en la consola.
props, asegúrate de pasarlos correctamente al componente envuelto y no mutarlos dentro del HOC.Imagina que estás organizando una fiesta y necesitas decidir qué actividades ofrecer en base al clima. El renderizado condicional en React es como tomar decisiones basadas en ciertas condiciones: muestras diferentes elementos según lo que esté sucediendo en tu aplicación. Vamos a explorar algunas técnicas creativas para hacer esto.
El renderizado basado en estado implica mostrar u ocultar elementos según el estado actual de tu componente. Por ejemplo, podrías tener un botón que, cuando se hace clic, muestra un mensaje:
class Message extends React.Component {
constructor(props) {
super(props);
this.state = { showMessage: false };
}
handleClick = () => {
this.setState({ showMessage: true });
};
render() {
return (
<div>
<button onClick={this.handleClick}>Mostrar Mensaje</button>
{this.state.showMessage && <p>¡Hola, mundo!</p>}
</div>
);
}
}
En este ejemplo, <p>¡Hola, mundo!</p> solo se renderizará si showMessage es true.
El renderizado basado en props implica mostrar u ocultar elementos según las props que recibe un componente. Por ejemplo, podrías tener un componente de Alert que muestra diferentes mensajes dependiendo del tipo de alerta:
function Alert(props) {
if (props.type === 'success') {
return <p style={{ color: 'green' }}>¡Éxito! {props.message}</p>;
} else if (props.type === 'error') {
return <p style={{ color: 'red' }}>¡Error! {props.message}</p>;
} else {
return null; // No renderiza nada si el tipo de alerta no es reconocido
}
}
// Uso del componente Alert
<Alert type="success" message="La operación fue exitosa" />;
En este ejemplo, <Alert /> renderiza un mensaje diferente dependiendo del tipo de alerta que se le pase como prop.
Los operadores ternarios son útiles para renderizar condicionalmente elementos en una sola línea. Por ejemplo, podrías mostrar un mensaje diferente si un usuario está autenticado o no:
const userAuthenticated = true;
return (
<div>
{userAuthenticated ? <p>Bienvenido de nuevo, usuario</p> : <p>Inicia sesión para continuar</p>}
</div>
);
En este caso, el mensaje renderizado depende del valor de userAuthenticated.
