Interactive rating component - React / Typescript / SASS

Community feedback

• 

  Nika•180

  @nikavolkPosted over 2 years ago

  Hello Marc!

  I've completed this project with React as well, so here's my input:

  Visually: looks great! I can't find any faults at all, really.

  Technically:

  • one minor bug in the ThankYouInner component on line 16 (rating {variable} out of 5).
  • choosing a rating and clicking submit works on every rating except for the first, might be just my device?
  • just my very personal opinion: there seems to be a lot of code for a rather simple component

  I loved your folder and file structure and will definitely work on making mine in a similar fashion (lots of small component files for each part of the app). As for SASS styles and files, I think they need to be imported into every child but honestly, I need to look into this myself.

  Great job!

  0

  ---

  

  Marc•30

  @mcallec1Posted over 2 years ago

  @nikavolk thanks so much for your feedback, I really appreciate it.

  • Didn't even notice the first bug, thanks for pointing that out.
  • I'll check out the issue with clicking on the first item
  • Yep, it is a lot of code. I'm still learning React and I wanted to use Typescript and SASS to get more experience with them. I know a vanilla js/css solution would be less code but these projects are a great opportunity to try out new tech and libraries.

  0

  

  Nika•180

  @nikavolkPosted over 2 years ago

  @mcallec1 I think using TS and, React and Sass is great!

  My solution to avoid lots of code (and, to be honest, I'm not nearly skilled enough to write as much as you did) was to use React Router and a useState hook. Feel free to have a look at my code 😊

  0

  

  Marc•30

  @mcallec1Posted over 2 years ago

  @nikavolk yeah I can see how your version is much more streamlined than mine and uses less code. Good Job! Your code looks great from what I can tell. Using react router looks like a really good approach and definitely less code. I would never have thought about doing in that way (and actually I still need to learn react router).

  What I'm trying to do with these projects is apply what I'm learning in some of my online courses so that I'm comfortable using them in larger projects. For example, where you used router, I was aiming to get the hang of passing in function props with typescript just to see how that works. Also the code that generates the circles with the ratings choices, I wanted to make that it's own component because from what I've learnt it's the 'react' way of doing things. It also helps me to understand the interaction between parent and child components.

  1

  

  Marc•30

  @mcallec1Posted over 2 years ago

  @nikavolk I also actually prefer your approach of having a single scss file, it seems more intuitive to me, but I decided to try css modules combined with sass to see how that would work. My next project I'm going to try out tailwind, have you used that before?

  1

  

  Nika•180

  @nikavolkPosted over 2 years ago

  @mcallec1 Definitely a great way to learn new things 😊 I really do have to look into Typescript, it's used and required pretty much everywhere nowadays.

  I think that as far as keeping all CSS in one file goes, it's probably preferred for tiny components like this one, however from what I've seen in different react tutorials, sharding the styles like you did is the way to go.

  I looked into tailwind and it's daunting 🙈 It seems like it speeds up designing apps by a lot, but there's a lot of framework-specific class shorthands that you either need to have on hand at all times (like a cheatsheet), or remember them after a while. Will definitely use it in a future project, though (probably something with forms, or for a whole website design).

  0

  

  Marc•30

  @mcallec1Posted over 2 years ago

  @nikavolk yeah I agree about Tailwind, it seems like a strange way to handle styles in a project. I'm going to try it out though because it seems so many jobs in React are asking for Tailwind experience.

  What's the next Frontend Mentor project you're going to work on?

  0