ldantas-s / nlw2-proffy

Um projeto bastante interessante e de bonita interface para treino das habilidades com reactjs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

home screen desktop proffy Proffy

Projeto criado na NLW#2 (Next Level Week #2) usando a metodologia mobile first.

home screen desktop

home screen mobile proffyList screen mobile

Tecnologias:

react

useState()

No uso do useState() não há muita novidade para mim, pois eu já tinha tido contado com ele

code example using useState()

react-select

Porém, com o react-select foi meu primeiro contato com ele e devo dizer que foi um tanto complicado no começo de entender como funcionava a mudança de estilo em conjunto com styled-components, mas consegui e fiquei bastante satisfeito com o resultado...

code example using react-select

e abaixo estão as classes css que consegui identificar para fazer as mudanças no estilo do select usado

code example using react-select

back-top

styled-components

Apesar de ter um pouco mais de conforto com styled-components, neste projeto aprendi que, a partir de um component de estilo criado, dá para criar outros tendo ele como base sem ter a necessidade de importar todos eles no local onde será usado.

code example using styled-components

Vou explicar: code example using styled-components

ButtonProffy é o elemento importado no código acima, porém, a partir dele eu estou instanciando os dois, ButtonProffy.Purple e ButtonProffy.Green, elementos de button sem ter a necessidade de te-los importado, que foi criado no ButtonProffy/style.js

back-top

About

Um projeto bastante interessante e de bonita interface para treino das habilidades com reactjs


Languages

Language:JavaScript 88.7%Language:CSS 7.7%Language:HTML 3.6%