Responsive component using React and Tailwind.

Community feedback

• 

  P

  Ehsan Tatasadi•1,780

  @tatasadiPosted 9 months ago

  Hey there,

  Great job on completing this challenge! It's impressive to see how you've leveraged React along with Tailwind CSS to build a responsive and interactive component. Let's dive into some targeted suggestions to refine your code further.

  Tailwind Breakpoints and Responsiveness

  Instead of relying on JavaScript to listen for resize events to adjust the layout for different screen sizes, take full advantage of Tailwind's responsive utility classes. Tailwind's framework is designed to handle responsiveness with minimal custom CSS or JavaScript, making your code cleaner and more maintainable. You can remove the isLargeScreen state and the effect that listens to the resize event, and instead, directly apply responsive classes in your markup.

  Usage of showAvatar State

  The showAvatar state seems to be used to toggle the visibility of the AvatarComponent based on the showShare state. If the intention is to hide the avatar when the share component is visible, consider simplifying this logic by using only one piece of state. For instance, showShare could be enough to control the visibility of both components, assuming they are mutually exclusive.

  Naming Convention in Tailwind Config

  In your Tailwind configuration, you've used camelCase for naming colors. Tailwind's convention and general CSS custom property practices lean towards kebab-case for consistency and readability.

  Before:

  colors: {
    veryDarkGrayishBlue: 'hsl(217, 19%, 35%)',
    // other colors
  }
  

  After:

  colors: {
    'very-dark-grayish-blue': 'hsl(217, 19%, 35%)',
    // other colors
  }
  

  These suggestions aim to enhance the maintainability, readability, and performance of your project. Leveraging Tailwind's features to their fullest can significantly streamline your development process, making your codebase simpler and more efficient. Keep exploring and applying best practices in your projects!

  Marked as helpful

  0

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 9 months ago

  @tatasadi , Wow, thank you very much for your considerations! I'm still starting to enter this world of technology (I started studying five months ago) and Tailwind started last week, so for me it's still very difficult, I have a lot of doubts. Your tips were very valuable! Thank you very much!

  0
• 

  Mateusz•180

  @matsta92Posted 9 months ago

  Good code Flávia!

  :)

  1

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 9 months ago

  @matsta92 , thank you! 😊

  0

  

  Mateusz•180

  @matsta92Posted 9 months ago

  @flaviare1s 😊

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  Olá @flaviare1s!

  Ótimo projeto!

  Já partiu pro React?? Como estão indo os estudos?

  1

  ---

  

  P

  Flávia Reis•650

  @flaviare1sPosted 9 months ago

  @danielmrz-dev , Obrigada, Daniel!

  Estou começando a tentar entender React, mas ainda está meio nebuloso. Acho que preciso primeiro aperfeiçoar meu Javascript. Me recomendaram o curso da Origamid. Qual foi mesmo o curso que você falou que fez?

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  @flaviare1s

  De JavaScript eu fiz o do Gustavo Guanabara e depois parti pros cursos da Alura...

  To tentando aperfeiçoar o JavaScript o máximo possível antes de partir pra algum framework, pois li e ouvi dizerem que fica mais fácil se você já tiver uma boa base de JavaScript.

  Eu já vi os conteúdos da Origamid, são ótimos... me lembro de ter aprendido alguma coisa por lá, só não me lembro exatamente o quê... Acho que foi algo relacionado ao SASS

  0

  

  P

  Flávia Reis•650

  @flaviare1sPosted 9 months ago

  @danielmrz-dev Você gosta muito dos da Alura?

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  @flaviare1s

  Sim, to gostando bastante. São cursos curtos e muito mão na massa, práticos. Aprendo lá e venho aplicar nos projetos aqui 😊

  1

  

  P

  Flávia Reis•650

  @flaviare1sPosted 9 months ago

  @danielmrz-dev , Mais tarde vou comprar o da Origamid. 😊

  1