É uma app básica que visa ensinar passo a passo o processo de desenvolvimento na plataforma vtexio. A funcionalidade desenvolvida é para mostrar o preço com 5% de desconto no boleto.
Conceitos que você vai aprender:
- Criar / instalar um componente.
- Adicionar tipagens e como corrigir os erros.
- Usar hooks de react (useEffect e useState).
- Usar o contexto do produto ('vtex.product-context')
- Como usar css-handle ('vtex.css-handles') e ('styled-components')
- Crear a interface que vai ser mostrada na store-theme.
- Publicar a app.
- Chamar a app na store-theme.
Instalação:
- Ter a configuração de instalação básica para desenvolver (https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-2-basic-development-setup-in-vtex-io)
- Instalar git.
- Clonar ou fazer download do repositorio usando 'git clone https://github.com/carlosviniciusananias/vtexio-appexample-front.git'
- Fazer login na conta de testes usando o comando 'vtex login avantivtexio'.
- Acessar na pasta 'cd .\react-app-template-master\react'
- Configurar as tipagens usando o comando (vtex setup --typings)
- Caso utilize 'Visual Studio Code' deve-se fechar e reabrir para ajustar a tipagem.
- Acessar na pasta 'cd .\react-app-template-master'
- Linkar a app usando o comando 'vtex link'.
- Abrir um novo terminal e acessar a pasta 'cd .\store-theme-master\store'.
- Linkar a app usando o comando 'vtex link'.
Demo:
Illustration:
