Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
You've done a great job splitting the main App component into Header, Welcome, and Article and organizing their CSS. However, changes are needed because the decomposition isn't fully complete. The main goal of this task is to practice breaking down components, and the navigation section within the Header is a key opportunity for this.
As suggested in the task description, please extract the navigation links into their own Navigation component:
- Create a new folder and component for
Navigation. - Move the navigation HTML from
Header.jsxtoNavigation.jsx. - Move the corresponding
.navigation__linkstyles fromHeader.cssto a newNavigation.cssfile. - Import and use your new
<Navigation />component inside theHeader.
This change will fully align your project with the task's decomposition goals. You're very close!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| import React from 'react'; | ||
|
|
||
| // Create an Article function returning the HTML of article block | ||
| import './Article.css'; |
There was a problem hiding this comment.
It's a good practice to group all import statements at the top of the file, before any other code or comments. This improves readability and makes it easier to see the component's dependencies at a glance.
| import React from 'react'; | ||
|
|
||
| // Create a Header function returning the HTML of header block | ||
| import './Header.css'; |
There was a problem hiding this comment.
It's a good practice to group all import statements at the top of the file, before any other code or comments. This improves readability and makes it easier to see the component's dependencies at a glance.
src/components/Header/Header.jsx
Outdated
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
| <a className="navigation__link" href="#services"> | ||
| Services | ||
| </a> | ||
| <a className="navigation__link" href="#contact"> | ||
| Contact | ||
| </a> |
There was a problem hiding this comment.
The task description suggests: "You may also create a folder for the Navigation component and move navigation there.". These navigation links are a perfect candidate for being extracted into their own Navigation component to improve modularity and follow the decomposition principle of this task.
src/components/Header/Header.css
Outdated
| font-size: inherit; | ||
| } | ||
|
|
||
| .navigation__link { |
There was a problem hiding this comment.
The styles for the .navigation__link are part of the navigation BEM block, but they are currently located within the Header.css file. The task description suggests that you could create a separate Navigation component. Creating a Navigation component and moving these styles to its own CSS file would better align with the goal of splitting the application based on CSS blocks and improve code organization.
| import React from 'react'; | ||
|
|
||
| // Importing the CSS file | ||
| import './Welcome.css'; |
There was a problem hiding this comment.
For better readability and to follow common conventions, it's a good practice to group all import statements together at the very top of the file. This makes it easy to see all of the file's dependencies in one place.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this submission! You've successfully addressed all the previous feedback by decomposing the application into smaller, well-structured components. Creating the separate Navigation component and correctly importing it into the Header was a perfect implementation of the task requirements. The project now fully meets all specified criteria, so I am approving your solution. Well done!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
No description provided.