Boas-vindas ao guia definitivo para o objeto Date e para o Moment.js. Este tutorial ensinará tudo o que você precisa saber para trabalhar com datas em seus projetos.

Como criar um objeto Date

Retornar a data e hora atual

const agora = new Date();

// Fri Jun 09 2023 14:17:20 GMT-0300 (Brasilia Standard Time)

Retornar a data e hora com valores individuais

const dataEspecifica = new Date(2023, 5, 9, 15, 0, 0, 0);

// Fri Jun 09 2023 15:00:00 GMT-0300 (Brasilia Standard Time)

A sintaxe é: Date(ano, mês, dia, hora, minuto, segundo, milissegundo).

Note que os meses são indexados iniciando pelo zero, ou seja, começam com janeiro sendo 0 e finalizam com dezembro sendo 11.

Retornar a data e hora de um timestamp

const unixEpoch = new Date(0);

O epoch representa a hora que ocorreu na quinta-feira, 1º de janeiro de 1970 (UTC), ou seja, o tempo conhecido como Epoch Unix (ou Unix time). O Epoch Unix é importante porque é o que o JavaScript, o Python, o PHP e outras linguagens e sistemas usam internamente para calcular o horário atual.

new Date(ms) retorna a data do epoch mais o número de milissegundos que você passar. Em um dia, há 86.400.000 milissegundos, então:

const diaDepoisDoEpoch = new Date(86400000);

retornará Friday, January 2nd, 1970 (UTC) (Sexta-feira, 2 de Janeiro de 1970).

Obtenha uma data e hora a partir de uma string

const stringParaData = new Date('May 29, 2019 15:00:00');

// Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Obter a data dessa maneira é muito flexível. Todos os exemplos abaixo retornam objetos do tipo Date válidos:

new Date('2019-06') // June 1st, 2019 00:00:00
new Date('2019-06-16') // June 16th, 2019
new Date('2019') // January 1st, 2019 00:00:00
new Date('JUNE 16, 2019')
new Date('6/23/2019')

Você pode também usar o método Date.parse() a fim de retornar o número de milissegundos desde o epoch (1 de Janeiro de 1970):

Date.parse('1970-01-02') // 86400000
Date.parse('6/16/2019') // 1560610800000

Definindo um fuso horário

Quando você passa uma string de data sem definir um fuso horário, o JavaScript assumirá que a data/tempo está usando o UTC, antes de convertê-la para o fuso horário que seu navegador está utilizando:

const dataDeNascimentoExata = new Date('6/13/2018 06:27:00');

console.log(dataDeNascimentoExata) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Isso pode levar a alguns erros quando a data a ser retornada desvia-se por muitas horas. Para evitar isso, passe um fuso horário junto da string:

const dataDeNascimentoExata = new Date('6/13/2018 06:27:00 GMT-1000');

console.log(dataDeNascimentoExata) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

/*
Outros formatos que também funcionam:

new Date('6/13/2018 06:27:00 GMT-10:00');
new Date('6/13/2018 06:27:00 -1000');
new Date('6/13/2018 06:27:00 -10:00');
*/

Você também pode passar alguns, mas não todos os fusos horários existentes:

const dataDeNascimentoExata = new Date('6/13/2018 06:27:00 PDT');

console.log(dataDeNascimentoExata) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

Métodos do objeto Date

Em diversos momentos você não precisará da data completa, apenas de parte dela, como o dia, semana ou mês. Felizmente, existem diversos métodos para se fazer isso:

const dataDeNascimento = new Date('6/13/2018 06:27:39');

dataDeNascimento.getMonth() // 5 (0 é janeiro)
dataDeNascimento.getDate() // 13
dataDeNascimento.getDay() // 3 (0 é domingo)
dataDeNascimento.getFullYear() // 2018
dataDeNascimento.getTime() // 1528838859000 (milisegundos desde o epoch)
dataDeNascimento.getHours() // 6
dataDeNascimento.getMinutes() // 27
dataDeNascimento.getSeconds() // 39
dataDeNascimento.getTimezoneOffset() // -540 (deslocamento do fuso horário em minutos com base na localização do seu navegador)

Facilite o trabalho com datas com o Moment.js

Acertar datas e horários não é uma tarefa fácil. Cada país tem uma maneira diferente de formatar datas e contabilizar diferentes fusos horários (como, por exemplo, o horário de verão) leva muito tempo. É aí que o Moment.js brilha – ele facilita a análise, formatação e a exibição de datas.

Para começar a usar o Moment.js, instale-o por meio de um gerenciador de pacotes, como o npm, ou adicione-o ao seu site por meio de uma CDN. Consulte a documentação do Moment.js para mais detalhes.

Obter a data e hora atual com o Moment.js

const agora = moment();

Isso retorna um objeto com a data e a hora com base na localização do navegador, juntamente com outras informações de localidade. É semelhante ao new Date() do JavaScript.

Obter uma data e hora de um timestamp com o Moment.js

Semelhante ao new Date(ms), você pode passar o número de milissegundos desde o epoch até o moment():

const diaDepoisDoEpoch = moment(86400000);

Se você quiser obter uma data e hora usando um timestamp do Unix em segundos, você pode usar o método unix():

const diaDepoisDoEpoch = moment.unix(86400);

Obter uma data e hora de uma string com Moment.js

Analisar uma data no formato de uma string com o Moment.js é fácil e a biblioteca aceita strings no formato da ISO 8601 ou da RFC 2822, juntamente com qualquer string aceita pelo objeto Date do JavaScript.

Strings no formato da ISO 8601 são recomendadas, uma vez que são um formato amplamente aceito. Aqui estão alguns exemplos:

moment('2019-04-21');
moment('2019-04-21T05:30');
moment('2019-04-21 05:30');

moment('20190421');
moment('20190421T0530');

Definindo um fuso horário com o Moment.js

Até agora, temos utilizado o Moment.js no modo local, o que significa que assumimos que qualquer input é uma data ou hora local, de modo semelhante ao do funcionamento do objeto Date do JavaScript.

const momentoExatoDoNascimento = moment('2018-06-13 06:27:00');

console.log(momentoExatoDoNascimento) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

No entanto, para definir um fuso horário, você primeiro precisa pegar o objeto Moment no modo UTC:

const momentoExatoDoNascimento = moment.utc('2018-06-13 06:27:00');

console.log(momentoExatoDoNascimento) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)

Então, você pode ajustar a diferença nos fusos horários com o método utcOffset():

const momentoExatoDoNascimento = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00');

console.log(momentoExatoDoNascimento) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Você também pode definir a diferença dos fusos horários (UTC offset) como um número ou uma string:

moment.utc().utcOffset(10) // Número de horas de diferença
moment.utc().utcOffset(600) // Número de minutos de diferença
moment.utc().utcOffset('+10:00') // Número de horas de diferença como string

Para usar fusos horários nomeados (America/Los_Angeles) ou códigos de fusos horários (PDT) com objetos Moment, configure a biblioteca Moment Timezone.

Formatando a data e hora com o Moment.js

Uma das principais vantagens do Moment.js em relação aos objetos Date nativos do JavaScript é a facilidade de formatar a data e a hora de saída. Basta encadear o método format() para um objeto de data do Moment e passar uma string de formato como parâmetro:

moment().format('MM-DD-YY'); // "08-13-19"
moment().format('MM-DD-YYYY'); // "08-13-2019"
moment().format('MM/DD/YYYY'); // "08/13/2019"
moment().format('MMM Do, YYYY') // "Aug 13th, 2019"
moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20"
moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"

Aqui está uma tabela com alguns tokens de formatação comuns:

Acesse a documentação do Moment.js para saber mais sobre os tokens de formatação.

Trabalhar com objetos Date do JavaScript e com o Moment.js não precisa consumir todo o seu tempo. Agora, você deve saber mais do que o suficiente para começar com ambos.

Quando criamos projetos, queremos que eles possam ser acessados através da Internet. Ao invés de comprar um domínio e gastar tempo para configurá-lo, é mais fácil hospedá-lo no GitHub Pages.

Um projeto que usa JavaScript, HTML e CSS é simples de ser hospedado no GitHub Pages. No entanto, projetos que são construídos usando React, Vue ou Angular, precisam de configurações adicionais. O ideal seria que qualquer pessoa, ao acessar sua aplicação, tivesse a mesma experiência se o projeto fosse executado localmente.

Neste artigo, mostrarei como criar uma simples aplicação com React, usando roteamento e aprenderemos a fazer o upload dela no GitHub Pages. Daremos uma atenção especial para a parte de roteamento, pois ela é importante de ser entendida e implementada.

⚠️ Este artigo pressupõe que você tenha conhecimentos de React e Git.

Pré-requisitos

Você precisa do Node, do yarn e do npm instalados na sua máquina. Para verificar se estão instalados, abra um terminal e digite o seguinte:

npm -v
yarn -v
node -v

Se esses comandos retornaram o número de suas respectivas versões, você está pronto para continuar. Caso contrário, é necessário instalar os seguintes itens:

• Node (inclui o npm)
• Yarn

Precisaremos também de um repositório no GitHub. Acesse sua conta e crie um repositório. Escolha o nome que você achar adequado para esse projeto. Porém, eu usarei o nome starter-project até o fim deste artigo.

Para criar nosso projeto, usaremos o create-react-app, um pacote que facilita a criação de uma single-page application (aplicação de página única). Para criar um projeto, você precisa digitar o seguinte comando no terminal:

npx create-react-app starter-project

Assim que todas as operações finalizarem, você terá um boilerplate (modelo inicial) de um projeto do React para você seguir com o desenvolvimento. A fim de verificar se tudo está funcionando corretamente, acesse o repositório do projeto (no nosso exemplo, usamos starter-project) e execute o seguinte comando:

yarn start

Se tudo funcionar corretamente, você verá uma mensagem no terminal dizendo que a aplicação está rodando no seguinte endereço: http://localhost:3000

Se acessarmos esse endereço no navegador, devemos ver o seguinte:

Como fazer o deploy do projeto no GitHub

Você deve ter notado que não criamos nenhum repositório no GitHub. Então, antes de seguirmos em frente, devemos fazer o upload do nosso projeto. Acesse a sua conta no GitHub e crie um repositório com o mesmo nome do projeto do React.

☝️ Garanta que o seu repositório esteja marcado como público. Se ele estiver marcado como privado, você não poderá utilizar o GitHub Pages.

Vamos adicionar um apontamento para nosso repositório remoto em nosso repositório local. Para fazer isso, digite o seguinte no terminal:

git remote add <nome-do-repositorio-remoto> <url-do-repositorio>

Então, no nosso caso, o comando será parecido com:

git remote add origin https://github.com/TomerPacific/starter-project

É importante chamar o remote origin, pois ele será necessário para fazer o nosso deploy.

Depois de executar o comando acima, ainda não podemos subir o nosso código. Inicialmente, precisamos configurar uma branch e defini-la como origin.

 git push --set-upstream origin master

Agora, podemos fazer o upload do nosso projeto para o repositório.

Para que possamos fazer o upload da nossa aplicação, também, precisamos instalar o pacote gh-pages:

yarn add gh-pages

Esse pacote nos ajudará com o deploy do nosso código para a branch gh-pages, que será utilizada para hospedar a nossa aplicação no GitHub Pages.

Para que possamos usar o pacote gh-pages, precisamos adicionar duas chaves aos nossos scripts do arquivo package.json:

"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build", <----------- #1
    "deploy": "gh-pages -d build", <---------- #2
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Em seguida, precisamos modificar o nosso arquivo package.json adicionando o campo homepage. Esse campo é utilizado pelo React para encontrar o URL principal do arquivo HTML. Nele, colocaremos o URL do nosso repositório no GitHub:

{
  "name": "starter-project",
  "homepage": "https://tomerpacific.github.io/starter-project/", <----
  "version": "0.1.0",
  /....
}

Para fazer o deploy da aplicação, digite o seguinte no terminal:

npm run deploy

A execução do comando acima realiza a build da aplicação e a envia para uma branch chamada gh-pages, que o GitHub usa para vincular nosso projeto ao GitHub Pages.

🚧 Se você não nomeou sua branch como origin, você receberá um erro durante essa fase: Falha em acessar remote.origin.url (a tarefa deve ser executada em um repositório git com uma branch origin configurada ou deve ser configurada com a opção "repo").

Você saberá que o processo foi bem-sucedido se, no final dele, for exibida a palavra Published (em português, publicado). Agora podemos ir ao nosso repositório do GitHub, acessar as configurações e depois clicar na seção do GitHub Pages.

Se você vir uma mensagem similar a exibida acima, significa que sua aplicação agora está hospedada no GitHub Pages.

Roteamento no React

Até agora, tudo bem:

1. Temos uma aplicação do React que está hospedada no GitHub Pages
2. Também temos um processo simplificado para fazer o deploy sempre que quisermos fazer alterações

Como o objetivo deste artigo, no entanto, é mostrar uma aplicação mais complexa do que a que criamos inicialmente, discutiremos o roteamento a seguir.

Um componente que está ausente em nossa aplicação é a navegação. Nossa aplicação não terá apenas uma página, mas diversas. Então, como os usuários poderão navegar entre elas?

Roteamento é a prática de selecionar um caminho para seguir. Em termos mais básicos, o que deve acontecer quando você clica em um link dentro de uma página.

React é uma biblioteca e ela não contém tudo o que você precisa para sua aplicação (no nosso caso, o roteamento). Portanto, instalaremos o react router.

O React Router tem componentes diferentes para aplicações para a web e para aplicações nativas. Como estamos construindo uma aplicação para web, utilizaremos o react-router-dom.

yarn add react-router-dom

Para usar o roteamento em nossa aplicação, vamos criar um elemento de navegação que ficará visível na parte superior da tela. Adicionaremos esse trecho de código no nosso arquivo App.js substituindo o HTML que já existe lá.

 <div>
     <nav>
         <ul id="navigation">
             <li>
                 <Link to="/">Home</Link>
             </li>
             <li>
                 <Link to="/about">About</Link>
             </li>
             <li>
                 <Link to="/contact">Contact</Link>
             </li>
         </ul>
     </nav>
</div>

Normalmente, em projetos que não utilizam o React, usamos um caminho relativo para as páginas em HTML em cada seção. Dessa maneira, o navegador sabe de onde ele deve buscar os dados.

Entretanto, no nosso projeto, não temos diferentes arquivos HTML para cada seção. Nós apenas faremos o carregamento de diferentes componentes. O conteúdo que estava no App.js será agora encontrado dentro de um componente chamado Home.

import './App.css';
import React from 'react';
import logo from './logo.svg';

class Home extends React.Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                </header>
            </div>
            
        );
    }

}

export default Home;

Como criamos três seções em nossa navegação e como já criamos a parte referente a Home, vamos criar um outro exemplo usando a seção Sobre.

Criaremos um novo arquivo chamado About.jsx, que conterá nosso código para a seção Sobre.

import React from 'react';

const divStyle = {
    color:'white'
};

class About extends React.Component {
    
    render() {
        return (
            <div style={divStyle}>
                <h2>About Page</h2>
                <main>
                    <p>This section contains information about...</p>
                </main>
            </div>
        )
    }
}



export default About;

Você pode estar se perguntando, como a aplicação vai saber para onde ir quando clicarem no link sobre? Para tal, utilizaremos um componente chamado Route.

O Route é um dos componentes mais importantes do react-router, pois permite renderizar componentes diferentes com base no caminho do URL. Para o nosso projeto, usaremos o código a seguir dentro do App.js logo abaixo da parte de navegação.

<Switch>
    <Route exact path="/">
    <Home />
    </Route>
    <Route path="/about">
    <About />
    </Route>
</Switch>

Você pode ver que nós criamos duas rotas para os componentes Home e Sobre. O componente Switch nos permite agrupar componentes de rota e ele "escolherá" apenas um deles.

Nosso App.js fica assim:

import './App.css';
import React from 'react';
import { Route, Switch, Link } from "react-router-dom";
import About from './About';
import Home from './Home';

class App extends React.Component {
  render() {
      return (
        <div className="App">
          <div>
            <nav>
              <ul id="navigation">
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                <Link to="/about">About</Link>
                </li>
                <li>
                <Link to="/contact">Contact</Link>
                </li>
              </ul>
            </nav>
          </div>
            <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
          </Switch>
          </div>
            );
  }
}

export default App;

Uma última coisa que precisamos fazer é envolver nosso projeto inteiro em um componente Router. Precisamos fazer isso porque é ele que nos permite usar um roteamento em nossa aplicação. Usaremos o componente BrowserRouter, pois ele usa a API de histórico do HTML5.

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Se executarmos tudo localmente, parece funcionar. Vamos fazer o deploy do nosso projeto melhorado no GitHub Pages e veremos o resultado.

Como lidar com o roteamento usando HashRouter

À primeira vista, tudo parece estar funcionando bem, mas, ao tentar atualizar a página ou navegar pelo próprio navegador, você notará que continuamos recebendo erros 404.

Por que isso acontece? O motivo é que o GitHub Pages não suporta o histórico do navegador como o seu navegador faz por padrão. No nosso caso, a rota https://tomerpacific.github.io/starter-project/about não ajuda o GitHub Pages entender para onde direcionar o usuário (uma vez que é uma rota do front-end).

Para resolver esse problema, precisamos usar o Hash Router ao invés de Browser Router na nossa aplicação. Esse tipo de roteador usa a parte do hash do URL para manter a interface do usuário sincronizada com o URL.

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Você pode ler mais sobre esse assunto aqui (texto em inglês).

Faça o deploy de sua aplicação novamente e teremos um resultado satisfatório. Não teremos mais erros 404.