@christopher-adolphe
Posted
Hi @Robincredible,
You did a great job for this challenge. 👍 I really like the subtle animation when a rating is selected and also the notification appears. I also like your approach to get the selected value via an <input type="hidden"> element. It's been while since I have used the <input type="hidden"> and I almost forgot about it until I saw your code. 😅 I would have used <input type="radio"> but this is also a nice alternative. I tried to answer your questions below.
- React (as well as Angular, Vue, etc.) is component-based and at the beginning, it can be difficult to determine what parts of the design should be a component on its own or not. Splitting every single part of the design into individual components can easily complicate things like managing state and events. I've set myself a rule where as soon as I see that things are getting too complicated, I take a few steps back and take a few minutes to think of simpler alternatives. For example if I was to tackle this challenge, I would have most probably created only 2 components; a generic
<Card />component and a<RatingForm />component. The end result would have looked like this:
<div className="App">
<div className="container">
<Card>
<RatingForm />
</Card>
</div>
</div>
If you wish to make the <RatingForm /> component more reusable, you could have it accept props for the title and the text like <RatingForm title="Some title" text="Some text" />. In short, more components does not always equal better reusability. Just keep things simple.
- It is also a good practice to separate components in individual files as it promotes separation of concerns, better readability and eases maintenance as your app grows. I understand this is a small project but you can start right now to build up the good habits. 😉
- In the
RatingsContainercomponent, I noticed there is anonClickprops on thediv className='ratings-main-container' onClick={this.handleClick} >whilethis.handleClickis not set. Why is that ? 🤔 - Regarding the tools to use, I think it's just a matter of preference. For simple challenges, I tend to use just HTML, CSS and JS and as the complexity rises, I could use any of React, Angular or Vue. I just see these challenges as an opportunity to become more familiar with those tools.
I was also surprised to see that you have used class-based component, this is less common nowadays.
I am also new to React and I've tried to share with you what I've learnt so far. I hope this helps.
Keep it up.
Marked as helpful
@Robincredible
Posted
@christopher-adolphe Hello Christopher! Thank you for the kind words!
My first choice was actually radio buttons! But I found them hard to style and customize so I just went with this. I forgot about <input type="hidden"> as well until I researched some solutions just to have an input inside the <form>!
Thanks for this! Splitting parts of the UI into components was actually a real problem down the line that I was so confused if I was doing it right. Thanks for sharing your insights and I'll definitely make it simpler next time!
For the <RatingsContainer> component, this was something that I actually forgot to remove when I was trying to do a feature that resets the selected rating if you clicked outside of the numbers/submit button. This was one of the problems that came up which definitely made me rethink why I made so many components 😅This is why you would see a React.createRef on the <Rating> component, it was just a quick fix for my bad code structure.
For using React, yep! It wasn't necessary of course, I just wanted to see if I could accomplish this challenge after learning React on freecodecamp. Thanks for the tip on separating components into files! I'll definitely be doing that on a bigger project!
To be honest, the freecodecamp short course on react used almost exclusively class-based components! It was probably outdated in that regard because I was also able to research functional components, I just wasn't able to use them here.
Thank you for sharing with me your experiences, insights and thoughts! This was really helpful and I will be using a lot of these new learnings in future projects!
Thanks and good luck on your learning path as well!
@christopher-adolphe
Posted
Hi @Robincredible,
I'm happy to help and glad you see that the feedback was useful.
In my opinion is it a good thing to know class-based components because you never know some day you might have to work on an old project which uses that. But definitely, consider learning functional components and hooks as well.
Best regards.
Marked as helpful
