React js

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your Frontend Mentor challenge! Your project demonstrates a good understanding of React components and CSS styling. Here are a few suggestions to enhance your code:

  1. React Component Best Practices:

     • Always use self-closing tags for components without children for cleaner code. For example, change <Panel></Panel> to <Panel /> in your App.js.
     • In Panel.js, instead of a regular function, consider using arrow functions for consistency and modern syntax.
     • Example:

       const Panel = () => { /* ... */ };
       

  2. CSS Module Usage:

     • Ensure consistency in naming conventions. Your import statement uses Panel.Module.css, but the convention is usually Panel.module.css. Stick to lowercase for file names to avoid potential issues, especially on case-sensitive file systems.

  3. Improving Accessibility:

     • Add alt text to your images that describes the image. This is important for screen readers and users who might have images disabled. For decorative images, use an empty alt attribute (alt="").
     • For buttons, especially the rating buttons, consider adding aria-label to describe the action, like aria-label="Rate 1 out of 5".
     • Example:

       <img src={Star} alt="Star icon" className="Star" />
       

  Additional Resources:

  • To learn more about React best practices, check out the React official documentation.
  • For CSS modules, this CSS-Tricks guide is a great resource.
  • Explore Web Accessibility Initiative (WAI) for accessibility guidelines.

  Keep up the great work, and continue challenging yourself with new projects. Each project is a step forward in your development journey. Happy coding! 🌟💻

  00