Aprenda a Criar um Componente de Seletor de Data Reutilizável com React

Criando um Componente de Seletor de Data Reutilizável

Neste tutorial, vamos explorar como construir um componente de seletor de data reutilizável no React. A reutilização de componentes é uma das principais vantagens do React, pois permite que você escreva menos código e mantenha sua aplicação mais organizada. Vamos começar!

O que é um Componente de Seletor de Data?

Um componente de seletor de data é uma parte da interface do usuário que permite que os usuários escolham uma data específica. É amplamente utilizado em formulários, calendários e aplicações que exigem a seleção de datas.

Estrutura do Componente

Primeiro, precisamos definir a estrutura do nosso componente. Vamos criar um arquivo chamado DatePicker.js e começar a implementar a funcionalidade básica.

import React, { useState } from 'react';

const DatePicker = () => {
    const [selectedDate, setSelectedDate] = useState('');

    const handleDateChange = (event) => {
        setSelectedDate(event.target.value);
    };

    return (
        <div>
            <label htmlFor="date">Escolha uma data:</label>
            <input type="date" id="date" value={selectedDate} onChange={handleDateChange} />
        </div>
    );
};

export default DatePicker;

Neste código, estamos criando um componente funcional chamado DatePicker. Utilizamos o hook useState para gerenciar o estado da data selecionada. O handleDateChange atualiza o estado sempre que o usuário escolhe uma nova data.

Estilizando o Componente

Para tornar o nosso seletor de data mais atraente, podemos adicionar algumas classes de estilo. Vou sugerir o uso de CSS para estilização, mas você pode optar por bibliotecas como Styled Components ou Emotion, se preferir.

.date-picker {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.date-picker label {
    margin-bottom: 10px;
}

.date-picker input {
Padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

Neste exemplo, estamos aplicando um layout simples e uma estilização básica ao nosso seletor de data. O resultado é um componente mais amigável e visualmente agradável.

Tornando o Componente Reutilizável

Agora que temos um componente básico, vamos torná-lo mais reutilizável, permitindo que o usuário passe propriedades como onChange e value.

const DatePicker = ({ onChange, value }) => {
    return (
        <div className="date-picker">
            <label htmlFor="date">Escolha uma data:</label>
            <input type="date" id="date" value={value} onChange={onChange} />
        </div>
    );
};

Agora, nosso componente aceita onChange e value como props, tornando-o mais flexível para diferentes casos de uso.

Usando o Componente em um Formulário

Vamos ver como podemos utilizar o DatePicker em um formulário.

import React, { useState } from 'react';
import DatePicker from './DatePicker';

const Form = () => {
    const [date, setDate] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Data selecionada: ${date}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <DatePicker value={date} onChange={(e) => setDate(e.target.value)} />
            <button type="submit">Enviar</button>
        </form>
    );
};

export default Form;

Esse exemplo mostra como integrar o DatePicker em um formulário. Quando o usuário envia o formulário, uma mensagem de alerta apresenta a data selecionada.

Conclusão

Neste tutorial, aprendemos a criar um componente de seletor de data reutilizável em React. Ao longo do caminho, discutimos desde a estrutura básica do componente até a estilização e integração em um formulário. Com essas habilidades, você pode criar interfaces mais dinâmicas e interativas em suas aplicações.

Por que Criar Componentes Reutilizáveis é Importante em React?

Um componente reutilizável de seletor de data pode ser uma grande adição a qualquer aplicação React. Ele não apenas melhora a experiência do usuário, mas também ajuda a manter o código limpo e organizado. Com a possibilidade de customização e fácil integração em diferentes partes da aplicação, o seletor de data se torna uma ferramenta essencial para desenvolvedores que buscam criar interfaces robustas e responsivas. Ao dominar a criação de componentes como este, você estará um passo mais perto de se tornar um especialista em desenvolvimento React.

Algumas aplicações:

• Formulários de cadastro
• Calendários de eventos
• Agendas de compromissos
• Aplicativos de reservas
• Interfaces de usuário em geral

Dicas para quem está começando

• Pratique a criação de componentes simples antes de avançar para os complexos.
• Explore a documentação oficial do React.
• Experimente diferentes formas de estilização.
• Participe de comunidades online para trocar experiências e tirar dúvidas.
• Não hesite em refatorar seu código para aprimorar a qualidade.

Compartilhe este tutorial