reluviari/huntweb-react

Recycling learning with React

Recycling learning with ReactJS

Criação: 19 de fevereiro de 2020

Prática : @reluviari

Link to App

You can visit the app by clicking this link: Access App.

Aula 1 : O que é ReactJS ?

• ReactJS construir o Frontend
• Uma biblioteca para desenvolver em javascript
• Acessar API Rest
• Roteamento
• Componentes
• Estados e Propriedades

Aula 2 : Criando Projeto

1. node -v
2. npm -v
3. yarn -v
4. create-react-app reluviaris-huntweb
5. cd reluviaris-huntweb
6. code .
7. yarn start

Aula 3 : O que são componentes ?

• Conceito de componentização
• react
• react-dom
• Método do componente: render

Aula 4 : Criando Header ?

• Na pasta src, na pasta componentes, na pasta Header, então criar todos arquivos desse componente: index.js, styles.css.

Aula 5 : Buscando produtos da API

• Acessar API nodejs-api: essa API fornece o dados dos produtos.
• Biblioteca axios: yarn add axios
• Insomnia: gestão de API

Aula 6 : Armazenamento no estado

• Objeto estado
• Trabalhar com variável estado

Aula 7 : Listando produtos

• Estilizando a exibição dos produtos.

Aula 8 : Páginas anterior / próxima

• Listar os detalhes dos produtos
• Fazer listagem das páginas

Aula 9 : Configurando Navegação

1. yarn add react-router-dom : Trabalhando com rotas

Aula 10 : Navegando para o detalhe

• Listando o detalhe de cada produto

Encerramos o projeto tendo realizado:

• Componentização
• Roteamento
• Ciclos de vida
• Utilização de API
• Estado