react-preview-card

Community feedback

• 

  P

  Mpass•200

  @Benson0721Posted 21 days ago

  Thank you so much for pointing out so many areas where I can improve and for reminding me about powerful tools and the <picture> element! I have tidied up my code using Prettier, corrected some mistakes, and focused on accessibility in the HTML part.

  What you mentioned are really important points that I usually overlook. I really appreciate you sharing your insights!

  Have a great day!

  1
• 

  Huy Phan•2,600

  @huyphan2210Posted 22 days ago

  Hi, @Benson0721

  I checked out your solution and I have some thoughts:

  Code Quality

  Remove unnecessary spaces:

  • It’s always a good practice to keep your .jsx files clean and organized. If you're not already using it, I highly recommend Visual Studio Code (VSCode) as your IDE. There are extensions, like Prettier, that can help format your code automatically. Personally, I use VSCode for front-end development, and it’s been very effective.

  Repository Organization

  Streamline your folders:

  • I noticed that you have two identical images folders, one inside the public directory. It’s important to remove any unused or duplicate folders to keep your project tidy and avoid confusion.
  • Similarly, I see three folders for CSS/SCSS files. Which one does your project actually use? Deleting the unused folders will make your project easier to navigate for yourself and others.

  ResponsiveImage.jsx Optimization

  Simplify your component:

  • Your ResponsiveImage.jsx can be cleaned up by using a <picture> element, which is more semantic and suitable for responsive images. Here's a suggestion for your component:

  export default function ResponsiveImage() {
      return (
          <picture>
              <source 
                  srcSet="./images/image-product-desktop.jpg" 
                  media="(min-width: 1440px)" 
              />
              <img 
                  src="./images/image-product-mobile.jpg" 
                  alt="product_image" 
              />
          </picture>
      );
  }
  

  This approach is not only cleaner but also utilizes HTML's built-in responsiveness effectively.

  PreviewCard.jsx Improvements

  1. Redundant elements:

  The button with id="AddToCart" className="info_item" at the end of the file seems unnecessary since it doesn’t belong to the component or any logical part of the code. Consider removing it.

  2. Semantic HTML:

  Using semantic tags like <p> for paragraphs and <h1> for top-level headings is crucial for better accessibility and SEO. I noticed some overuse of <div>, <p>, and <h1>. For instance:

  • Use <h2> or <h3> for subheadings instead of <p> or <h1>. Leverage <article>, <section>, or <main> where appropriate to structure your content meaningfully.

  Semantic HTML improves:

  • Accessibility: It helps screen readers understand your content better.
  • SEO: Search engines prioritize structured, semantic content.
  • Maintainability: Your code will be easier to read and debug.

  General Advice

  My suggestion would be to focus on improving your core HTML, CSS, and JavaScript skills before heavily relying on libraries like React. Libraries and frameworks are powerful tools, but understanding the fundamentals will help you use them more effectively in the long run.

  For your next challenges, try writing projects using pure HTML, CSS, and JavaScript. Once you’re confident, you can move on to React or other libraries for more complex challenges.

  Happy coding!

  1