Olá! Hoje eu gostaria de compartilhar com vocês um pequeno projeto que desenvolvi que deu o começo para meus estudos em React. Explicarei como eu desenvolvi e fiquem à vontade para darem sugestões a este projeto.

Configuração do Projeto 🏗️

Antes de iniciar este projeto, eu já tinha instalado o Node.js, mas quem quiser é só acessar o site deles.

Para baixar o React, utilizei o seguinte comando:

npx create-react-app clock

Para iniciar o projeto no navegador, fiz o uso deste comando:

npm start

Este comando iniciará o servidor de desenvolvimento e abrirá automaticamente uma nova janela do navegador com o meu React.

Após isso, com o React devidamente baixado, os arquivos principais estão no diretório src, na qual posso editar esses arquivos para começar a construir meu projeto.

Organizei o projeto em arquivos como App.js, Clock.js, e estilos como App.css, Clock.css, e reset.css (com este último arquivo sendo para retirar o style padrão dos navegadores).

Estrutura de Componentes 🔄

Criei o componente "Clock" para lidar com a exibição e a funcionalidade do relógio digital, enquanto o componente principal App contém a estrutura geral.

Para criar esse design, o componente Clock é dividido em várias className: clock__space-button, clock__button, clock__display, display__hours, clock__supports, e support. Com eles, eu consegui criar cada parte do relógio para formar esse visual.

Funcionalidade do Relógio ⌚

constructor(props) {
    super(props);
    this.state = {
      currentTime: '00:00:00'
    }
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ currentTime: new Date().toLocaleTimeString() })
    }, 1000 );
  }

  render() {
    return(
      <div className='clock'>
        <div className='clock__space-button'>
          <div className='clock__button'>
          </div>
        </div>
        <div className='clock__display'>
          <div className='display__hours'>
            <h1>{this.state.currentTime}</h1>
          </div>
        </div>
        <div className='clock__supports'>
          <div className='support'></div>
          <div className='support'></div>
        </div>
      </div>
    );
  }

O componente Clock utiliza o estado do React para armazenar a hora atual (currentTime). O estado inicial é definido como '00:00:00'. O método de ciclo de vida componentDidMount é utilizado para obter a hora atual com toLocaleTimeString, além de atualizar o estado a cada segundo usando setInterval, garantindo que a exibição do relógio esteja sempre atualizada.

A hora é exibida dentro da seção display__hours usando uma tag h1.

Depois é exibida no App.js com o componente Clock.

render() {
    return(
      <div className='container'>
        <div className='container__content'>
          <Clock/>
        </div>
      </div>
    );
  }

Conclusão

Mesmo sendo simples e desenvolvido por alguém que esta começando no React, espero que curtem o projeto.

Vocês podem ver o resultado no Vercel e no repositório