Agora que temos um h1, é possível utilizá-lo para mostrar informações que dependam de uma prop do componente. Para isso, alguns conceitos serão apresentados, já que são necessários para desenvolver uma aplicação.
Conceitos
O Hook
Hooks são APIs que permitem utilizar funcionalidades de React. Sem hooks, uma componente funcional em React, é simplesmente uma função que retorna uma tag escrita em tsx. Hooks permitem entre outras coisas, armazenar estado entre diferentes renderizações e executar efeitos colaterais. Obs.: eles não funcionam dentro de classes.
Exemplo:
const [count, setCount] = useState(0);
Interface para definir as props
Define as props e também os tipos associados.
interface CountdownProps {}
Definição das configurações de um bloco
No VTEX IO, oferecemos uma ferramenta de gestão de conteúdo da loja, chamada Site Editor. Com essa ferramenta, encontrada no admin da VTEX, podemos alterar imagens e texto de componentes sem precisar modificar o código da loja.
Para que o seu bloco possa aceitar configurações do usuário, é utilizado um JSON schema, que irá gerar um formulário para o Site Editor. Abaixo é possível ver um exemplo de schema:
O schema também é responsável por definir os textos que serão vistos pelo usuário do admin no formulário.
Atividade
Na interface definida no Countdown.tsx, adicione uma prop chamada targetDate, ela é do tipo string. Com isso, estamos definindo uma prop do componente que será utilizada para inicializar o contador.
A definição da prop em si é feita através da declaração dela na interface CountdownProps no arquivo Countdown.tsx, mostrada anteriormente. Assim, adicione uma linha que defina uma prop chamada targetDate, do tipo string.
Feito isso, é preciso utilizá-la no componente, substituindo o texto de antes, "Teste Countdown" por um outro texto, através do Site Editor.
No futuro, esse targetDate será utilizado para definir a data de término para o contador. Porém, por enquanto, esse campo pode ser genérico.
Primeiramente, é preciso alterar o componente para utilizar a proptargetDate definida anteriormente. Para isso, é preciso adicionar dentro do componente React a variável a ser utilizada no h1. Você lembra do bloco de código do componente na etapa anterior? Vamos utilizá-lo novamente para fazer as alterações.
Além disso, para alterar essa propriedade através do Site Editor, é necessário adicionar essa mesma prop ao schema. Isso é feito através da adição de um objeto com chave targetDate dentro do objeto properties no schema. Ou seja:
Pronto! Agora você pode alterar o conteúdo do texto através do Site Editor. Vamos ver como ficou? Vá até o Site Editor e clique em Countdown no menu lateral, isso abrirá o menu de edição da app, que será como a imagem abaixo.
Agora, no campo abaixo do título, digite alguma coisa e veja a alteração, que passará a exibir o texto que você digitou.
Tornando o bloco countdown customizável
Introdução
Agora que temos um
h1
, é possível utilizá-lo para mostrar informações que dependam de uma prop do componente. Para isso, alguns conceitos serão apresentados, já que são necessários para desenvolver uma aplicação.Conceitos
O Hook
Hooks são APIs que permitem utilizar funcionalidades de React. Sem hooks, uma componente funcional em React, é simplesmente uma função que retorna uma tag escrita em
tsx
. Hooks permitem entre outras coisas, armazenar estado entre diferentes renderizações e executar efeitos colaterais. Obs.: eles não funcionam dentro de classes.Exemplo:
Interface para definir as props
Define as props e também os tipos associados.
Definição das configurações de um bloco
No VTEX IO, oferecemos uma ferramenta de gestão de conteúdo da loja, chamada Site Editor. Com essa ferramenta, encontrada no admin da VTEX, podemos alterar imagens e texto de componentes sem precisar modificar o código da loja.
Para que o seu bloco possa aceitar configurações do usuário, é utilizado um JSON schema, que irá gerar um formulário para o Site Editor. Abaixo é possível ver um exemplo de schema:
O schema também é responsável por definir os textos que serão vistos pelo usuário do admin no formulário.
Atividade
Na interface definida no
Countdown.tsx
, adicione uma prop chamadatargetDate
, ela é do tipo string. Com isso, estamos definindo uma prop do componente que será utilizada para inicializar o contador.A definição da prop em si é feita através da declaração dela na interface
CountdownProps
no arquivoCountdown.tsx
, mostrada anteriormente. Assim, adicione uma linha que defina uma prop chamadatargetDate
, do tipo string.Feito isso, é preciso utilizá-la no componente, substituindo o texto de antes, "Teste Countdown" por um outro texto, através do Site Editor.
Primeiramente, é preciso alterar o componente para utilizar a prop
targetDate
definida anteriormente. Para isso, é preciso adicionar dentro do componente React a variável a ser utilizada noh1
. Você lembra do bloco de código do componente na etapa anterior? Vamos utilizá-lo novamente para fazer as alterações.Além disso, para alterar essa propriedade através do Site Editor, é necessário adicionar essa mesma prop ao schema. Isso é feito através da adição de um objeto com chave
targetDate
dentro do objetoproperties
no schema. Ou seja:Pronto! Agora você pode alterar o conteúdo do texto através do Site Editor. Vamos ver como ficou? Vá até o Site Editor e clique em
Countdown
no menu lateral, isso abrirá o menu de edição da app, que será como a imagem abaixo.Agora, no campo abaixo do título, digite alguma coisa e veja a alteração, que passará a exibir o texto que você digitou.