Oportunidade Dev ReactJS GesCorpGo

Aplicação

Desenvolver um catálogo para exibir uma lista de produtos geradas a partir da API disponibilizada.

Componentes

• Header
• Input
• Product

Funcionalidades

• Pegar informações da API e mostrar
• Pesquisar de forma automática através do input
• Cadastrar novo produto a lista

Tecnologias

• ReactJS
• React Router DOM
• Axios
• Styled Components
• Typescript

Passo a Passo

1. Iniciar um projeto ReactJS (com typescript) yarn create react-app . --template typescript

2. Instalar o styled-components yarn add styled-components yarn add @types/styled-components

3. Instalar o react-router-dom yarn add react-router-dom

4. Limpar o projeto

5. Seguintes objetivos foram traçados:

• Criar a página Cadastro para poder listar todos os produtos que estão na API.
• Criar um componente para ser o cabeçalho (Header).
• Criar rotas para navegar em toda a aplicação por meio do menu no cabeçalho (Header).
• Criar um componente produto para ser usado na listagem de produtos da API.
• Criar a página cadastro para criar novos produtos e salvar no estado.
• Criar um contexto para que todos os produtos e as funcionalidades de adicionar e remover produtos possam ser acessadas em qualquer lugar da aplicação.
• Criar função para adicionar e excluir produto.
• Adicionar as funções nos seus devidos lugares: Adicionar produto na página de Cadastro e remover produto no componente Produto.

6. Projeto concluído com sucesso.

Deus é bom o tempo todo.