add task solution#4433
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your implementation successfully meets all core task requirements. The App.jsx has been properly decomposed into separate components (Welcome, Header, Article, Navigation) with CSS split along component boundaries. All components are in their respective folders and use export default as required. While there are some excessive blank lines between JSX elements in files like Article.jsx, Navigation.jsx, and Welcome.jsx, these are minor code style issues that don't prevent task completion or break functionality. According to the decision criteria, whitespace and spacing issues are considered non-blockers. The submission is functional and meets the requirements—consider cleaning up the blank lines in your JSX for better code style in future work.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| @@ -1 +1,30 @@ | |||
| /* Put article styles here */ | |||
| .article { | |||
There was a problem hiding this comment.
Missing src/components/Header/Header.jsx file - the task requires using the existing Header folder and splitting CSS from components based on CSS blocks
| @@ -1 +1,30 @@ | |||
| /* Put article styles here */ | |||
| .article { | |||
There was a problem hiding this comment.
Missing src/components/Navigation/Navigation.jsx and Navigation.css files - the task explicitly requires creating a Navigation folder and moving navigation there
| @@ -1 +1,30 @@ | |||
| /* Put article styles here */ | |||
| .article { | |||
There was a problem hiding this comment.
Missing src/components/Welcome/Welcome.jsx and Welcome.css files - the task requires using the existing Welcome folder
| @@ -1 +1,30 @@ | |||
| /* Put article styles here */ | |||
| .article { | |||
There was a problem hiding this comment.
Missing src/App.css - the task requires splitting CSS code too, and the original App.css contains base styles that should be handled appropriately
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| function Article() { | ||
| return ( |
There was a problem hiding this comment.
Missing Navigation.jsx file - Header.jsx imports Navigation but this file doesn't exist in the provided code
| import React from 'react'; | ||
|
|
||
| // Create an Article function returning the HTML of article block | ||
| import './Article.css'; |
There was a problem hiding this comment.
Missing Navigation.css file - referenced by the import in Navigation.jsx
| import './Article.css'; | ||
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| function Article() { |
There was a problem hiding this comment.
Missing Welcome.jsx and Welcome.css files - App.jsx imports Welcome but these files don't exist
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| function Article() { | ||
| return ( |
There was a problem hiding this comment.
Missing Header.jsx file - the component is imported in App.jsx but the file wasn't provided
| <h2 className="article__title">Headline</h2> | ||
|
|
||
| <p className="article__paragraph"> | ||
| In elementum lorem eget est euismod ornare... | ||
| </p> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements inside the article component
|
|
||
| <p className="article__paragraph">In ac nisi lacus. Fusce est dolor...</p> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements inside the article component
|
|
||
| <p className="article__paragraph"> | ||
| Donec arcu elit, euismod vel lobortis eu... |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements inside the article component
| </p> | ||
|
|
||
| <p className="article__paragraph"> | ||
| Cras egestas tempor nibh, a fermentum lorem... | ||
| </p> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements inside the article component
|
|
||
| <p className="article__paragraph"> | ||
| Pellentesque habitant morbi tristique senectus... | ||
| </p> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements inside the article component
| import './Header.css'; | ||
|
|
||
| // Add a default export statement for Header component to use it in the other files | ||
| import Navigation from '../Navigation/Navigation'; |
There was a problem hiding this comment.
Missing Welcome.jsx file - App.jsx imports this component but the JSX file doesn't exist in the Welcome folder
| <h1 className="header__title">Site Name</h1> | ||
|
|
||
| <Navigation /> |
There was a problem hiding this comment.
Checklist item #1 violation: excessive blank lines between components inside JSX
| <h1 className="header__title">Site Name</h1> | ||
|
|
||
| <Navigation /> | ||
| </header> | ||
| ); | ||
| } | ||
|
|
||
| export default Header; |
There was a problem hiding this comment.
Checklist item #1 violation: excessive blank lines between JSX elements inside nav
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
|
|
||
| <a className="navigation__link" href="#services"> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements (lines 8, 13, 15, 18, 23 contain empty lines between <p> tags). Compare to GOOD example - components should be placed directly without multiple blank lines between them.
|
|
||
| import './Navigation.css'; | ||
|
|
||
| function Navigation() { | ||
| return ( | ||
| <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"> |
There was a problem hiding this comment.
This violates checklist item #1: excessive blank lines between JSX elements (lines 2, 4, 6, 11, 16 contain empty lines). The JSX children should flow directly after each other.
|
|
||
| import './Navigation.css'; | ||
|
|
||
| function Navigation() { | ||
| return ( | ||
| <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.
This violates checklist item #1: excessive blank lines between JSX elements (lines 2, 4, 11, 15, 22 contain empty lines). Remove these blank lines to follow the GOOD example pattern.
| line-height: 1; | ||
| padding-top: calc(50vh - 20pt); |
There was a problem hiding this comment.
This violates checklist item #1: There's an unnecessary blank line between the h1 and Navigation component inside the header element
| line-height: 1; | ||
| padding-top: calc(50vh - 20pt); | ||
| display: block; | ||
| font-weight: 700; | ||
| } |
There was a problem hiding this comment.
This violates checklist item #1: Excessive blank line between link elements inside the nav
|
|
||
| // Create a Welcome function returning the HTML of welcome block | ||
| import './Welcome.css'; | ||
|
|
||
| // Add a default export statement for Welcome component to use it in the other files | ||
| function Welcome() { | ||
| return ( | ||
| <section className="welcome"> | ||
| <span className="welcome__text">Sticky Header!</span> |
There was a problem hiding this comment.
Checklist item #1 violation: excessive empty lines between imports and component definition (lines 2, 4)
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
Checklist item #1 violation: excessive empty line between h1 and Navigation inside header JSX
|
|
||
| // Create a Welcome function returning the HTML of welcome block | ||
| import './Welcome.css'; | ||
|
|
||
| // Add a default export statement for Welcome component to use it in the other files | ||
| function Welcome() { | ||
| return ( | ||
| <section className="welcome"> | ||
| <span className="welcome__text">Sticky Header!</span> |
There was a problem hiding this comment.
Checklist item #1 violation: excessive empty lines between imports and component definition (lines 2, 4)
|
|
||
| // Create a Welcome function returning the HTML of welcome block | ||
| import './Welcome.css'; | ||
|
|
||
| // Add a default export statement for Welcome component to use it in the other files | ||
| function Welcome() { | ||
| return ( | ||
| <section className="welcome"> | ||
| <span className="welcome__text">Sticky Header!</span> | ||
| </section> | ||
| ); |
There was a problem hiding this comment.
Checklist item #1 violation: excessive empty lines between imports and component definition (lines 2, 4)
2 participants
[DEMO LINK] https://aamaltseva-sqwosh.github.io/react_decompose/