Introdução a React.js – Criando um Cronômetro

1- Crie um projeto novo o create-react-app e execute o projeto. Abra o browser no endereço http://localhost:3000/.

yarn global add create-react-app
npx create-react-app cronometro
cd cronometro
yarn start

2- Analise o código e verifique que foi criada a seguinte estrutura:

cronometro/
  README.md
  node_modules/
  **package.json**
  .gitignore
  public/
    favicon.ico
    **index.html**
  src/
    **App.css
    App.js
    App.test.js
    index.css
    index.js**
    **logo.svg**

package.json: lista as dependências do projeto e possui alguns aliases para os scripts envolvidos no build

  • start: Inicia o build no modo de desenvolvimento.
  • build: Executa o build do projeto otimizado para produção.
  • test: Executa os testes do projeto.
  • eject: Traz para dentro do nosso projeto, toda a configuração que o react-scripts abstrai.

index.html: O arquivo index.html vem com a marcação mínima necessária para iniciar nossa aplicação. A tag div com o id rootserá utilizada pelo React para renderizar nossa aplicação.

src/App.js: contém o componente raiz da aplicação. O componente acima é definido com a class e extende a classe Component do React. Existem duas formas de definir componentes, através de functions ou através de class. Um componente deve sempre implementar um método render, que retorna um JSX do que deve ser mostrado na tela, ou null quando não deve mostrar nada.

index.js: ele que ocorre a inicialização da nossa aplicação. Importando o ReactDOM, o módulo do React responsável pela manipulação do DOM.

3- Crie o arquivo Contador.js e adicione o código abaixo. Um function component é criado com o nome de Contador, onde recebe via props as informações de minuto e segundos.

4- Crie o arquivo Botao.js e adicione o código abaixo. Um function component é criado com o nome de Botao, onde recebe via props o texto do botão.

5- Crie o arquivo LabelRelogio.js e adicione o código abaixo. Um function component é criado com o nome de LabelRelogio, onde recebe via props o texto que será exibido no relógio.

6- Copie o código abaixo para o arquivo src/App.js. As linhas 2, 3 e 4 importam os componentes criado anteriormente. Na linha 7 é criado um componente com o nome App estendendo de React.Component. Na linha 8 é criado o construtor do componente e em seguida é criada os states: segundos, minutos, stop, nameStop, name, parcial.

O método zerarCronometro() reseta os states, em parcial() é armazenado os valores no instante de minutos e segundos, o método pararTempo() altera o valor do state stop e modifica o texto do botão stop de stop para start e vice-versa, o método incrementar () incrementa os segundo e minutos.

O método componentDidMount() é chamado logo após o componente ser montado. Neste método você pode carregar dados de um endpoint remoto e chamar o setState(), alterando o valor do estado inicial do componente. Ele é executado antes que o navegador atualize a tela. Neste método estamos implementando um temporizador para a cada 1000 milissegundos incrementar os segundos.

O método render() é o único método obrigatório em um class-component. Ele é responsável por renderizar os componentes sempre que sofrem alterações. Neste exemplo, estamos renderizando 1 componente Contador para mostrar o relógio, 1 componente LabelRelógio para mostrar o nome do relógio, 3 componentes Botao (zerar, stop e parcial) e por fim 1 componente LabelRelogio para exibir as parciais.

7- Execute o projeto com e teste:

yarn start

Github:

https://github.com/totemarcal/cronometro

Referências:

https://blog.coderockr.com/posts/2017/iniciando-com-react-2-criando-a-estrutura-do-projeto/

Deixe uma resposta

Specify Google Client ID and Secret in Super Socializer > Social Login section in admin panel for Google Login to work

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *