https://github.com/leo-henrique/avaliacao-interativa

Uma simples avaliação interativa utilizando JSX, componentes e hooks básicos do React.
https://github.com/leo-henrique/avaliacao-interativa

components-react jsx react scss useeffect useref usestate vitejs

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/leo-henrique/avaliacao-interativa
• Owner: Leo-Henrique
• Created: 2022-12-20T18:12:33.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-22T18:40:37.000Z (about 2 years ago)
• Last Synced: 2024-11-09T03:42:41.214Z (about 2 months ago)
• Topics: components-react, jsx, react, scss, useeffect, useref, usestate, vitejs
• Language: SCSS
• Homepage: https://leo-henrique.github.io/avaliacao-interativa/
• Size: 226 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 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.

![Captura de tela do projeto](https://user-images.githubusercontent.com/72027449/208747795-22f30fa6-28a5-46c3-a775-8a76f0d3969f.png)

## 🔗 Acesse o projeto

* [Site ao vivo](https://leo-henrique.github.io/avaliacao-interativa/)

* [Desafio no Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI)

## 🚀 Execute em sua máquina

### 👨‍💻 Instale as dependências:

```bash

npm install

```

### 👨‍💻 Veja o projeto em seu navegador:

```bash

npm run preview

```

## 💡 Meus aprendizados

Eu optei por utilizar o [Vite](https://vitejs.dev/) 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](https://caniuse.com/?search=es6%20modules);

* 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.