:react-js:Conteúdo produzido por Profº Vinicius Martins

<aside> <img src="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" alt="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" width="40px" />

O React é uma biblioteca para interfaces de usuário nativas e da web. O React permite que você crie interfaces de usuário a partir de partes individuais chamadas componentes

</aside>

Exercise: Iniciar Projeto Form com Steps

Tela que deverá ser desenvolvida

<aside> 💡

A parte de Layou podem ficar a vontade para mexer e customizar, porém a arquitetura de funcionamento da página tem que ser a mesma da imagem

</aside>

• 1️⃣ É necessário identificar os componentes (functional components) que deverão ser criados para compor (composition) a tela.
• 2️⃣ Também é necessário identificar quais props (props) cada componente irá receber, se for o caso.
• 3️⃣ A parte de estilização deve ser feita utilizando ou css modules (css modules) ou css inline (style).

SUGESTÕES DE COMPONENTIZAÇÃO DO PROFº

• A caixa que contém os steps e o formulário pode ser um componente, podem dar o nome pra ele de Box.tsx
  • Ele pode receber um children por props que vai ser justamente todo o formulário; ✅
• Pode ser criado um componente para renderizar a linha divisória que fica entre os steps e o formulário. Pra esse componente você pode dar o nome de Divider.tsx
  • Ele pode ser só um dumb component. Não precisa receber props. ✅
• Os steps podem ser um componente unico (Steps.tsx)
  • Ele pode receber (props) uma lista com a quantidade de steps e qual o nome do step
  • O step pode ser um objeto do typescript com um nome e a ordem dele. Por exemplo: {nome: "Step 1", ordem: 2}
  • O componente Steps.tsx pode receber uma lista de steps e renderizar utilizando o método map da classe Array do javascript (list and keys)
• Os campos que vão receber a entrada de dados (Input.tsx) podem ser componentes;
  • ele pode receber algumas props como label e placeholder, por exemplo
• O botão pode ser um componente também (Button.tsx)
  • Ele pode receber uma prop chamada texto, por exemplo, pra identificar o que será renderizado no botão