React Decompose solution#4303
Conversation
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 task! Your solution is approved because you've successfully met all the core requirements. You did a great job splitting the application into Header, Welcome, and Article components and correctly separating the CSS into component-specific files. As a suggestion for future improvement, consider extracting the navigation logic from the Header into its own Navigation component. While this was an optional step, it's a great practice for creating more modular and reusable code. Keep up the fantastic work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| </p> | ||
| </article> | ||
| <Welcome /> | ||
| <Header /> |
There was a problem hiding this comment.
Good job splitting the main components! As a next step for better decomposition, consider extracting the navigation logic from the Header component into its own Navigation component. The task description mentions this as a possible improvement.
| .navigation__link { | ||
| display: inline-block; | ||
| outline: none; | ||
| text-decoration: none; | ||
| opacity: 0.7; | ||
| padding: 0 0.5em; | ||
| color: black; | ||
| transition: opacity 0.2s ease-in-out; |
There was a problem hiding this comment.
These styles are related to the navigation part of the header. The task description suggests that you could create a separate Navigation component. If you do so, these styles should be moved to their own Navigation.css file to improve modularity.
| <nav className="navigation"> | ||
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
|
|
||
| <a className="navigation__link" href="#services"> | ||
| Services | ||
| </a> | ||
|
|
||
| <a className="navigation__link" href="#contact"> | ||
| Contact | ||
| </a> | ||
| </nav> |
There was a problem hiding this comment.
Good work creating the Header component. As a next step, you could move this <nav> block into its own Navigation component. The task description suggests this as a way to further decompose the application. This practice improves modularity and makes the Navigation component potentially reusable elsewhere.
2 participants
DEMO LINK
https://LisandraCaniato.github.io/react_decompose/