O intuito deste projeto é auxiliar no estudo das tecnologias React e Typescript. Para isso, vamos fazer juntos um página com um dashboard bem visual. Então já preparamos um projeto base que já possui diversos exemplos de componentes de visualização que poderão ser usados durante o Bootcamp.

O Conceito de componentes não será abordado durante as explicações, mas fique a vontade para perguntar em nosso canal do slack

Se não conseguir realizar algum dos passos ou tiver alguma dúvida, pode nos perguntar no canal #typescript do Slack Dev Juiz de Fora.

Se ainda não estiver no Slack, você pode visitar https://devjf.herokuapp.com/ e gerar um convite. Um email será enviado para o endereço cadastrado com as próximas instruções.

O primeiro passo começa antes mesmo do nosso primeiro encontro. Precisamos que você prepare sua máquina para que possamos começar já com o ritmo total e assim aproveitar nosso tempo juntos da melhor maneira possível.

Para iniciar o projeto, primeiro é necessária a instalação de algumas coisas.

• NodeJs

  Se ainda não tiver uma versão instalada, você pode baixar na página de downloads. Recomendamos usar a versão LTS para evitar problemas de compatibilidade com algumas dependências.

  Para verificar se o node já está funcionando, rode o seguinte comando no seu terminal:

    node --version

  Você deverá ver o número da versão do Node que acabou de instalar.

• Yarn

  Embora não seja obrigatório que você tenha instalado em sua maquina, usaremos o Yarn como gerenciador de dependências durante nossas reuniões.

  Você pode fazer o download dele neste link.

  Para verificar se o Yarn já está funcionando, rode o seguinte comando no seu terminal:

    yarn --version

  Você deverá ver o número da versão do Yarn que acabou de instalar.

• Compilador TypeScript

  Durante o desenvolvimento do projeto usaremos o compilador do TypeScript para converter nosso código em JavaScript.

  Para instalar, basta rodar o comando:

    yarn global add typescript

  ou, se estiver usando o NPM:

    npm install -g typescript

  Para confirmar que está tudo funcionando, rode o seguinte comando no seu terminal:

  tsc --version

  Você deverá ver o número da versão do compilador que acabou de instalar.

Além disso, esperamos que use um Editor (ou IDE) que dê suporte ao TypeScript. Nós recomendamos o Visual Studio Code pela sua facilidade, mas se você já está acostumado com outro, veja Aqui se ele está na lista que oferecem suporte à linguagem.

1. Clone o repositório git clone https://github.com/app-masters-academy/typescript-dashboard.git
2. Após clonar o repositório entre na pasta do projeto cd typescript-dashboard
3. Instale as dependências utilizando do gerenciador escolhido acima.
   • npm i para se estiver usando o NPM.
   • yarn para Yarn.
4. Após instalar as dependências execute o projeto usando:
   • npm start para se estiver usando o NPM.
   • yarn start para Yarn.

Além da explicação do Bootcamp e das dúvidas no Slack, separamos pra você um material que pode tirar suas dúvidas ou te explicar melhor algum ponto que não era nosso foco aqui no Bootcamp.

• O que é Typescript
• ECMAScript
• Playground

• Introdução ao JSX
• Propriedades e Componentes
• Estado e Ciclo de Vida
• Roteamento com React Router Dom
• Tipando em Componentes

Nós vamos usar o código que já temos para criar um componente genérico para os dados que estão vindo da API.

Recomendamos utilizar algumas APIs abertas, mas você pode escolher outra que achar melhor ou alguma API própria.

• OpenWeather
• COVID-19 Brazil API
• Postman COVID-19 API Resource Center

Atenção: Para realizar a requisição a API é recomendado utilizar dos estados e do ciclo de vida do componente chamando componentDidMount Para fazer as requisições à API sugerimos a utilização dos seguintes métodos:

• axios
• fetch