Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS
Essa será uma aplicação já funcional onde o seu principal objetivo é realizar dois processos de migração: de Javascript para Typescript e de Class Components para Function Components.
A seguir veremos com mais detalhes o que e como precisa ser feito 🚀
Para te ajudar nesse desafio, criamos para você esse modelo que você deve utilizar como um template do GitHub.
O template está disponível na seguinte URL:
https://github.com/rocketseat-education/ignite-template-reactjs-refactoring-classes-ts
Dica: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em nosso FAQ.
Para esse desafio, além dos conceitos vistos em aula utilizaremos o JSON server para criar uma Fake API com os dados das comidas.
Assim como utilizamos o MirageJS no módulo 2 para simular uma API com os dados das transações da aplicação dt.money, vamos utilizar o JSON Server para simular uma API que possui as informações das comidas.
Navegue até a pasta criada, abra no Visual Studio Code e execute os seguintes comandos no terminal:
yarn
yarn server
Em seguida, você vai ver a mensagem:
Perceba que ele iniciou uma fake API com o recurso /foods
em localhost
na porta 3333
a partir das informações do arquivo server.json localizado na raiz do seu projeto. Acessando essa rota no seu navegador, você consegue ver o retorno das informações já em JSON:
Dessa forma, basta consumir essas rotas da API normalmente com o Axios. Caso queira estudar mais sobre o JSON Server, dê uma olhada aqui:
Com o template já clonado, as depêndencias instaladas e a fake API rodando, você deve editar os seguintes arquivos:
- src/components/Food/index.jsx;
- src/components/Food/styles.js;
- src/components/Header/index.jsx;
- src/components/Header/styles.js;
- src/components/Input/index.jsx;
- src/components/Input/styles.js;
- src/components/Modal/index.jsx;
- src/components/ModalAddFood/index.jsx;
- src/components/ModalAddFood/styles.js;
- src/components/ModalEditFood/index.jsx;
- src/components/ModalEditFood/styles.js;
- src/pages/Dashboard/index.jsx;
- src/pages/Dashboard/styles.js;
- src/routes/index.jsx;
- src/services/api.js;
- src/styles/global.js;
- src/App.js;
- src/index.js.
Todos esses arquivos devem ser migrados de Javascript para Typescript. Além disso, os arquivos que possuírem componentes em classe devem ser migrados para componentes funcionais.
Como esse é um projeto CRA sem TypeScript, você primeiro precisar instalar as dependências/tipagens e configurar o TS. Nossa sugestão é criar um novo projeto CRA com Typescript e comparar a estrutura atual com a que você precisa ter. Realizando essa comparação, facilmente você consegue ver que:
- É preciso instalar o
typescript
- É preciso criar um arquivo de configuração
tsconfig.json
. Inclusive, você pode utilizar a configuração gerada automaticamente no CRA template Typescript para criar o seu arquivo. - É preciso criar um arquivo
react-app-env.d.ts
com o conteúdo:
/// <reference types="react-scripts" />
- É preciso instalar as tipagens das bibliotecas.
Configurando esse setup, você deve ser capaz de trabalhar normalmente com o Typescript no seu projeto.
Caso você tenha dificuldade nesse processo de migração, dê uma olhada no nosso guia sobre esse assunto:
Nesse desafio você já recebe a aplicação totalmente funcional, então todos os recursos mostrados neste video já estão implementados no template e devem permanecer funcionado após suas alterações.
Esse desafio deve ser entregue a partir da plataforma da Rocketseat. Envie o link do repositório que você fez suas alterações. Após concluir o desafio, além de ter mandado o código para o GitHub, fazer um post no LinkedIn é uma boa forma de demonstrar seus conhecimentos e esforços para evoluir na sua carreira para oportunidades futuras.
- Clonado o template
- Criado outro projeto com o comando
yarn create-react-app my-app --template typescript
eyarn
e copiado dele os arquivostsconfig.json
ereact-app-env.d.ts
. - Instalado o typescript no projeto com o comando
yarn add typescript -D
- Instalado as tipagens que o projeto foi precisando
yarn add @types/react -D
yarn add @types/react-dom -D
yarn add @types/react-icons -D
yarn add @types/react-router-dom -D
yarn add @types/styled-components -D
yarn add @types/react-modal -D
- Refatorado arquivos, alterando de
.js
e.jsx
para.ts
e.tsx
, passando a utilizar useState() no lugar de this.state da extenção Component do React, useEffect(), function ao invés de class, declarando as tipagens nos index e styles com Props, etc.