Develop

[MishaKudria]

React Decompose

Split the App.js into components based on CSS blocks. CSS code should be split too.

• You already have Article, Header and Welcome folders inside ./src/components/ with required files.
• You may also create a folder for the Navigation component and move navigation there.
• Tests expect you to use export default for all the components.

• Instructions

• Install Prettier Extention and use this VSCode settings to enable format on save.
• Implement a solution following the React task guideline
• Open one more terminal and run tests with npm test to ensure your solutions is correct
• Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description

[mateacademy-ai-mentor]

Review Summary

Your implementation successfully meets all mandatory requirements. The App.js is properly split into Welcome, Header, and Article components, each with their own folder and CSS file, and all components use export default as required. Tests are passing without any functional issues. A couple of minor cleanup items worth noting: there are placeholder comment blocks remaining in Header.jsx and Article.css from the original template that should be removed for code cleanliness. Additionally, while the task description marks a Navigation component as optional, you may consider extracting the .navigation__link styles from Header.css into a separate Navigation component if you want to strictly follow the BEM block separation principle. Overall, your solution is approved and demonstrates proper component decomposition. Keep up the good work!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

These are placeholder comments from the original template - they should be removed now that the component is implemented. Replace with meaningful documentation or remove entirely.

[mateacademy-ai-mentor]

The .navigation__link CSS class represents a separate BEM block from the header. According to the task requirement to 'Split the App.js into components based on CSS blocks', this should be extracted into a separate Navigation component with its own folder.

[mateacademy-ai-mentor]

The .navigation__link CSS class represents a separate BEM block from the header. According to the task requirement to 'Split the App.js into components based on CSS blocks', navigation styles should be extracted into a separate Navigation component with its own folder.