Esta é uma solução para o Interactive rating component challenge on Frontend Mentor. Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação através da construção de projetos realistas.
O projeto:
- Layout responsivo
- Ter os estados de foco para todos os elementos interativos na página
- Selecionar e enviar uma classificação numérica
- Ter o estado do cartão "Thank you" apos enviar uma avaliação
- Solution URL: Interactive rating component
- HTML5 semântica
- CSS
- Flexbox
- Layout Responsivo
- React - JS library
Meu principal objetivo com esse projeto é praticar o desenvolvimento de web com React, o principal conceito colocado em prática foi o Context Api, que foi utilizado para gerenciar o estado global de uma aplicação React. Ela permite compartilhar dados (como estado) entre componentes sem a necessidade de passar props manualmente entre eles.
import React, { createContext, useState } from 'react';
// Crie o contexto
const MeuContexto = createContext();
// Crie um provedor que irá encapsular os componentes onde você deseja compartilhar informações
export function MeuContextoProvider({ children }) {
const [informacao, setInformacao] = useState('Informação inicial');
return (
<MeuContexto.Provider value={{ informacao, setInformacao }}>
{children}
</MeuContexto.Provider>
);
}Continuarei estudando ReactJs, e meu próximo objetivo é usar Redux nos projetos.
- Linkedin - Filipe Alves
- Frontend Mentor - @lipeqalves