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.
-
Se ainda não tiver uma versão instalada, você pode baixar na página de downloads. Recomendamos usar a versão
LTSpara 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.
-
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.
-
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.
- Clone o repositório
git clone https://github.com/app-masters-academy/typescript-dashboard.git - Após clonar o repositório entre na pasta do projeto
cd typescript-dashboard - Instale as dependências utilizando do gerenciador escolhido acima.
npm ipara se estiver usando o NPM.yarnpara Yarn.
- Após instalar as dependências execute o projeto usando:
npm startpara se estiver usando o NPM.yarn startpara 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.
- 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.
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: