React, Javascript, HTML, CSS, VS Code/Sublime Text, Bounce JS

Community feedback

• 

  P

  Christopher Adolphe•620

  @christopher-adolphe

  Posted over 3 years ago

  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 RatingsContainer component, I noticed there is an onClick props on the div className='ratings-main-container' onClick={this.handleClick} > while this.handleClick is 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.

  12

  Marked as helpful
• 

  Shuaib•640

  @JustShuaib

  Posted over 3 years ago

  Hi Robin. The card seems quite big on a desktop. Consider reducing the size a bit? The animation & bounce effect also feels nice! 😊

  Then you asked some questions:

  • When I worked on mine, the part where I had issue was the effect on the list. Removing the active color from a button when another button is selected.
  • I actually used vanilla JS for the project 😀. I think I used SASS for the styling.

  Happy coding!

  11

  Marked as helpful
• 

  Prabhash Ranjan•2,540

  @besttlookk

  Posted over 3 years ago

  Hi,

  • Give appropriate tittle
  • Consider scenario when user submit without giving a rating.

  I liked the bounce effect

  Nice work overall

  Good luck

  Happy Coding

  11

  Marked as helpful