O intuito deste projeto é auxiliar no estudo das tecnologias React e Typescript. O projeto se constitui em uma única página de dashboard e esta página já possui diversos exemplos de componentes de visualiação. (A ideia de componentes não será abordada durante as explicações, más fique a vontade para perguntar em nosso canal do slack). Durante os estudos será pedido para realizar alterações e adições a página de dashboard. (Não será cobrado um tema especifico)
É recomendada a leitura dos seguintes tópicos para melhor compreensão do que pode ser feito na aplicação. Qualquer 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.
Para iniciar o projeto, primeiro é necessária a instalação de um dos seguintes gerenciadores de dependências.
-
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, é esperado que você esteja usando um editor que dê suporte ao TypeScript. Aqui é possível ver uma lista de Editores e IDEs que oferecem suporte para a linguagem.
Se seu editor não estiver na lista ou não tiver nenhum instalado, recomendados que baixe e instale o Visual Studio Code.
- 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 depenências execute o projeto usando:
npm startpara se estiver usando o NPM.yarn startpara Yarn.
- Introdução ao JSX
- Propriedades e Componentes
- Estado e Ciclo de Vida
- Roteamento com React Router Dom
- Tipando em Componentes
Atenção: Para realizar a requisição a API é recomendado utilizar dos estados e do ciclo de vida do componente chamando componentDidMout Para fazer as requisições à API sugerimos a utilização dos seguintes métodos.