O documento descreve como criar e estruturar um projeto React simples para uma loja online, dividindo-o em componentes como barra de busca, lista de produtos e carrinho de compras. Ele explica como instalar o Create React App, definir o estado inicial dos componentes e fazer atualizações via setState, além de passar e acessar propriedades entre componentes.

1. React
Instalação e Primeiro Projeto
Bruno Catão

2. Instalação
• Vamos usar uma ferramenta para gerar a estrutura do projeto:
• Create React App – um toolchain (gerador) da estrutura do projeto
• Instalação: npm i -g create-react-app
• Existem outras opções:
• Next.js – aplicações estáticas ou renderizadas no servidor
• Gatsby – direcionada para aplicações estáticas
• Neutrino – webpack + presets
• nwb – publicação de componentes React para o npm
• Parcel – empacotador (bundler) de aplicações que funciona com React
• Razzle – framework de renderização server-side que funciona com React

3. Primeiros passos
cd c:PastaOndeFicamSeusProjetos
npm i –g create-react-app
create-react-app app-loja
...
cd app-loja
npm start

4. Resultado

5. Entendendo a estrutura do projeto
• index.html
• Template HTML onde todos os componentes serão injetados
• index.js
• Script executado no início da aplicação
• É ele quem vai carregar os componentes e injetar no
template
• App.js / App.css / App.test.js
• Componente de exemplo com sua respectiva folha de estilos
e testes de unidade
• package.json
• Configuração das dependências do projeto

6. index.html

7. index.js
Insira o componente App dentro do elemento com id "root"

8. App.js (modificado)
Hã ?! É isso mesmo, JavaScript misturado com HTML (é JSX)
O HTML fica dentro de parêntesis, e tem que ter só um elemento pai

9. Resultado
Não precisa ficar parando o servidor e reiniciando.
Na hora que você altera o código, ele recarrega automaticamente.

10. Nosso primeiro exemplo
• Vamos fazer um protótipo de loja online
• Em React a gente deve pensar nos componentes
• Nossa loja terá:
• uma barra de busca
• uma listagem de produtos
• um carrinho de compras com os produtos selecionados

11. Mockup

12. Mockup - Componentes
Loja
BarraDeBusca
ListaDeProdutos
ItemLista
CarrinhoDeCompras
ItemCarrinho

13. Loja.js

14. index.js

15. Passando parâmetros para um componente
• Os parâmetros são chamados de props
• Pare enviar o parâmetro é só:
• <Componente param1="valor" param2="valor" />
• Para acessar os valores dos parâmetros:
• this.props.param1

16. index.js

17. Loja.js

18. Estado de um Componente
• O estado é um objeto
• Guarda os valores de um componente
• Esses valores podem ser exibidos em algum trecho de HTML
• O estado deve ser alterado sempre pela função setState
• Nunca deve ser alterado diretamente !
• Sempre que o estado é alterado, a exibição é atualizada
automaticamente
• Mesmo que o valor tenha sido passado como prop de um
subcomponente

19. Loja.js
Construtor:
Chama o construtor da superclasse
Define o estado:
Um array de objetos (produtos)
Estilo de Programação React:
Não é hábito usar laços
Ao invés disso, utiliza-se a função map

20. Resultado

22. Antes
Depois

23. E esse bind ?
• JavaScript é uma linguagem funcional
• O valor do this é diferente do de uma
linguagem orientada a objetos
• Em JavaScript o this é referente ao
contexto de quem chama a função
• Ou seja, o this terá os valores locais do
local onde a função for chamada
• E se a gente quiser fixar o valor do this?
• É pra isso que serve o bind, ele fixa o
valor do this
• Nesse caso, o this vai ter os valores
locais do componente loja,
independente de onde as funções
comprar e remover forem chamadas

25. ListaDeProdutos.js

28. CarrinhoDeCompras.js

31. BarraDeBusca.js

33. Loja.js

37. Resultado

38. Com um pouco HTML e CSS (Bootstrap)