Aula 6

Renderização Condicional

Renderização condicional em React é o processo de decidir o que exibir na interface do usuário com base em certas condições.

Exemplos de Renderização Condicional

Operador Ternário

        
const UserGreeting = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
        </div>
    );
}
        
    

Short-circuit Evaluation (`&&`)

        
const Notification = ({ showNotification }) => {
    return (
        <div>
            {showNotification && <p>You have new messages!</p>}
        </div>
    );
}
        
    

Função que Retorna JSX

        
const Greeting = ({ isLoggedIn }) => {
    const renderGreeting = () => {
        if (isLoggedIn) {
            return <h1>Welcome back!</h1>;
        }
        return <h1>Please sign in.</h1>;
    }
    return <div>{renderGreeting()}</div>;
}
        
    

Re-renderização de Componentes

Em React, os componentes re-renderizam quando há alterações no estado, nas props, ou em raros casos, forçando a atualização manualmente.

Alterações no State

        
const Counter = () => {
    const [count, setCount] = React.useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}
        
    

Alterações nas Props

        
 const Display = ({ message }) => {
    return <h1>{message}</h1>;
}

 const App = () => {
    const [text, setText] = React.useState('Hello');

    return (
        <div>
            <Display message={text} />
            <button onClick={() => setText('World')}>Change Message</button>
        </div>
    );
}
        
    

Force Update

        
const App() => {
    const [, forceUpdate] = React.useState(0);

    return (
        <div>
            <button onClick={() => forceUpdate(n => n + 1)}>Force Update</button>
        </div>
    );
}
        
    

Estilização Dinâmica

Estilização dinâmica permite aplicar estilos com base no estado ou nas props do componente.

Styled Components

        
import styled from 'styled-components';

const Button = styled.button\`
    background: \${props => (props.primary ? 'blue' : 'gray')};
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
\`;

function App() {
    return (
        <div>
            <Button primary>Primary</Button>
            <Button>Secondary</Button>
        </div>
    );
}
        
    

Alternativas ao Styled Components

Emotion

        
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = primary => css\`
    background: \${primary ? 'blue' : 'gray'};
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
\`;

function Button({ primary, children }) {
    return <button css={buttonStyle(primary)}>{children}</button>;
}
        
    

Tailwind CSS

        
const App = () => {
    return (
        <div>
            <button className="bg-blue-500 text-white p-2 rounded">Primary</button>
            <button className="bg-gray-500 text-white p-2 rounded">Secondary</button>
        </div>
    );
}
        
    

CSS Modules

        
/* Button.module.css */
.button {
    padding: 10px;
    border-radius: 5px;
    border: none;
    color: white;
}
.primary {
    background-color: blue;
}
.secondary {
    background-color: gray;
}
        
    

        
import styles from './Button.module.css';

const Button = ({ primary, children }) => {
    const className = primary ? styles.primary : styles.secondary;
    return <button className={\`\${styles.button} \${className}\`}>{children}</button>;
}
        
    

Material-UI

        
import Button from '@mui/material/Button';

const App = () => {
    return (
        <div>
            <Button variant="contained" color="primary">Primary</Button>
            <Button variant="contained" color="secondary">Secondary</Button>
        </div>
    );
}