Leo-Henrique / avaliacao-interativa

Uma simples avaliação interativa utilizando JSX, componentes e hooks básicos do React.

Avaliação interativa com React utilizando useState | Desafio do Frontend Mentor

Decidi escolher um projeto com um resultado bem simples pela plataforma Frontend Mentor, mas que fosse possível já botar a mão na massa em conceitos trazidos pelo React, tais como JSX, componentes e alguns hooks básicos do React.

🔗 Acesse o projeto

• Site ao vivo
• Desafio no Frontend Mentor

🚀 Execute em sua máquina

👨‍💻 Instale as dependências:

npm install

👨‍💻 Veja o projeto em seu navegador:

npm run preview

💡 Meus aprendizados

Eu optei por utilizar o Vite para criar meu ambiente de desenvolvimento.

Confira meus principais aprendizados em relação ao React:

⚡ Com o Vite.js, pude principalmente:

• criar um ambiente de desenvolvimento para React descomplicado e muito rápido;

• aproveitar ES6 modules nativo do JavaScript, que já possui um bom suporte aos navegadores;

• utilizar uma configuração mínima do Vite para fazer o deploy deste projeto com o GitHub Pages.

👨‍💻 Na extensão de sintaxe JSX, pude principalmente:

• utilizar todas as regras de escrita do JSX, considerando que se parece com HTML mas não é;

• embutir expressões JavaScript dentro da sintaxe com chaves, trazendo diversas possibilidades como: valores dos atributos HTML personalizados, manipular diferentes tipos de dados etc;

• retornar vários elementos HTML utilizando os itens de uma array como base.

👨‍💻 Com os componentes React, pude principalmente:

• fragmentar toda a interface em diferentes componentes, considerando reutilização, organização e possíveis manutenções / melhorias;

• retornar HTML personalizado dos componentes, manipulando o retorno com base nas propriedades / argumentos;

• deixar os componentes mais legíveis com a desestruturação das props.

👨‍💻 Com o useState hook, pude principalmente:

• identificar todos os dados mutáveis da minha interface – como o conteúdo do card e a avaliação selecionada, por exemplo;

• transformar os dados mutáveis em estados e renderizar componentes específicos com base nos estados atuais.

👨‍💻 Com outros hooks, pude principalmente:

• fazer referência a um elemento DOM e utiliza-lo em diversos componentes diferentes com useRef;

• setar comandos específicos em momentos diferentes do ciclo de vida de meus componentes com useEffect.