Solution #4252
Solution #4252
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job on structuring the application into components and separating the styles! The file organization is very clean.
However, changes are needed regarding how components are exported. The task requires using only export default for all components, but the current implementation uses both named and default exports. This is a critical issue as it will likely cause the tests to fail.
For example, in src/components/Header/Header.jsx, you should change:
export const Header = () => (to:
const Header = () => (And then in src/App.jsx, update the import from import { Header } from ... to import Header from ....
Please apply this change to all components (Header, Article, Welcome, and Navigation). Once that's fixed, the solution will be perfect!
✨ 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
src/App.jsx
Outdated
| import { Header } from './components/Header/Header'; | ||
| import { Article } from './components/Article/Article'; | ||
| import { Welcome } from './components/Welcome/Welcome'; |
There was a problem hiding this comment.
Great job on exporting the components with export default. To maintain consistency, it's a good practice to also import them as default. For example:
import Header from './components/Header/Header';This makes it clear that you are importing the main export from the module.
src/components/Article/Article.jsx
Outdated
| import './Article.css'; | ||
|
|
||
| // Create an Article function returning the HTML of article block | ||
| export const Article = () => ( |
There was a problem hiding this comment.
You have a named export here (export const Article) and a default export on line 61. The task requirement specifies: "Tests expect you to use export default for all the components."
To align with the requirement and improve consistency, please use only the default export. You can change this line to const Article = () => ( and then update the import statement in App.jsx to import Article from './components/Article/Article';.
src/components/Header/Header.jsx
Outdated
| import Nav from '../Navigation/Navigation'; | ||
|
|
||
| // Create a Header function returning the HTML of header block | ||
| export const Header = () => ( |
There was a problem hiding this comment.
You have both a named export here and a default export on line 11. The task requirement is to "use export default for all the components".
To adhere to this, please remove the named export by changing this line to const Header = () => (. This will make the default export on line 11 the single source of truth for this component.
| @@ -0,0 +1,17 @@ | |||
| import './Navigation.css'; | |||
|
|
|||
| export const Navigation = () => ( | |||
There was a problem hiding this comment.
This component has both a named export (export const Navigation) and a default export (line 17). The task requires using export default for all components. To maintain consistency and adhere to the requirements, please remove the named export by changing this line to const Navigation = () => (.
src/components/Welcome/Welcome.jsx
Outdated
| import './Welcome.css'; | ||
|
|
||
| // Create a Welcome function returning the HTML of welcome block | ||
| export const Welcome = () => ( |
There was a problem hiding this comment.
You have both a named export here and a default export on line 9. The task requirement states: "Tests expect you to use export default for all the components."
To follow this requirement, you should remove the named export. You can change this line to const Welcome = () => ( and rely on the default export on line 9.
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 done a great job addressing the previous feedback. The project is now perfectly structured, with each component and its corresponding styles correctly separated into their own modules. Using export default for all components and updating the imports accordingly meets all the key requirements of the task. The code is clean, well-organized, and functions as expected. I am approving your solution.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
DEMO LINK and add it to the PR description