Skip to content

Decompose app into components #4483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elenachernyshova01-cmd wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Decompose app into components #4483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1202280
Decompose app into components
elenachernyshova01-cmd Jul 3, 2026
c9cc5de
Create Navigation component
elenachernyshova01-cmd Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ Split the `App.js` into components based on CSS blocks. CSS code should be split
- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-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](https://<your_account>.github.io/react_decompose/) and add it to the PR description
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://elenachernyshova01-cmd.github.io/react_decompose/) and add it to the PR description
7,923 changes: 4,502 additions & 3,421 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/stylelint-config": "*",
"@vitejs/plugin-react": "^4.3.1",
"cypress": "^13.13.0",
Expand Down
91 changes: 2 additions & 89 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,100 +7,13 @@ iframe {
}

html {
font-family: "Source Sans Pro", "Open Sans", Roboto, Arial, sans-serif;
font-size: 10pt;
line-height: 1.4;
font-weight: 400;
font-family: "Source Sans Pro", "Open Sans", Roboto, Arial, sans-serif;
line-height: 1.4;
}

body {
margin: 0;
background: #eee;
}

.welcome {
height: 100vh;
background: coral;
}

.welcome__text {
margin: 0;
font-size: 400%;
text-align: center;
line-height: 1;
padding-top: calc(50vh - 20pt);
display: block;
font-weight: 700;
}

.header {
width: 100%;
padding: 1em;
font-size: 140%;
position: sticky;
top: 0;
left: 0;
right: 0;
transition: opacity 0.2s ease-in-out;
text-align: center;
}

.header__title {
font-weight: 600;
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
}

.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;
}

.navigation__link:hover,
.navigation__link:focus {
opacity: 1;
}

.article {
margin: 5em auto 0;
padding: 1em;
font-size: 140%;
max-width: 800px;
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}

.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
82 changes: 6 additions & 76 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,16 @@
import React from 'react';
import './App.css';
// Move each BEM block to a separate component (file) and import them here
import Welcome from './components/Welcome/Welcome';
import Header from './components/Header/Header';
import Article from './components/Article/Article';
Comment on lines +5 to +6

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The task description explicitly states you may create a folder for the Navigation component and move navigation there, but currently navigation markup is still inside Header. This violates the requirement to move navigation into its own Navigation component aligned with its CSS block.


function App() {
return (
<main className="app">
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
<header className="header">
<h1 className="header__title">Site Name</h1>
<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>
</header>
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam
nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere
lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt
dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis
bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis
orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum.
Nunc efficitur massa non neque elementum semper. Vestibulum lorem
arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed
tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh,
bibendum gravida felis. Vivamus ut nunc id mauris posuere
pellentesque. Praesent tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor.
Cras congue, massa nec sagittis mollis, dui felis ultrices magna,
tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit
amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec
maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem
hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum
semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat
velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend.
Aenean quis faucibus ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna
nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim.
Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis
interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu
diam.
</p>
</article>
<Welcome />
<Header />
<Article />
</main>
);
}
Expand Down
32 changes: 32 additions & 0 deletions src/components/Article/Article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,33 @@
/* Put article styles here */
.article {
max-width: 800px;
margin: 5em auto 0;
padding: 1em;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Article component uses an article__title element, but Article.css doesn’t define any .article__title styles. Since the task requires splitting CSS by BEM blocks and colocating styles per component, consider either styling .article__title here or removing the class if you don’t intend to style it.

font-size: 140%;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The task description requires that navigation be moved into a separate Navigation component (and optionally a dedicated folder), but here the <nav> and its links are still defined inside Header, so navigation has not been decomposed as required.


background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.article {
margin: 3.5em auto 0;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigation-related styles (e.g., .navigation__link) should be moved into a dedicated Navigation component stylesheet to align with the requirement to split CSS by BEM blocks/components, instead of keeping them in Header.css.

padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
67 changes: 64 additions & 3 deletions src/components/Article/Article.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,66 @@
// import a css file containig article styles
import './Article.css';

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The nav element uses className="navigation", but Navigation.css only defines .navigation__link. Since the task requires splitting CSS by BEM blocks and colocating styles with components, consider adding a .navigation rule in this file to style the block root instead of only its elements.


// Create an Article function returning the HTML of article block
function Article() {
return (
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh.
Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem,
vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce
efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The task description requires moving the navigation section into its own Navigation component and folder, but here the <nav className="navigation">…</nav> is still embedded in Header. Consider extracting this into a separate component and importing it into Header to comply with the requirement.

in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis
imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc
efficitur massa non neque elementum semper. Vestibulum lorem arcu,
tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt
tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida
felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent
tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras
congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt
finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet
vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus
nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in.
Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate.
Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim
consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus
ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh,
blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce
tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum
vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam.
</p>
</article>
);
}

// Add a default export statement for Article component to use it in the other files
export default Article;
33 changes: 33 additions & 0 deletions src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,34 @@
/* Put header styles here */
.header {
position: sticky;
top: 0;
right: 0;
left: 0;

width: 100%;
padding: 1em;

font-size: 140%;
text-align: center;

transition: opacity 0.2s ease-in-out;

}

.header__title {
display: inline;

margin: 0;
padding: 0;

font-size: inherit;
font-weight: 600;
}

@media (min-width: 500px) {
.header {
display: flex;
justify-content: space-between;
text-align: left;
}
}
14 changes: 11 additions & 3 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
// import a css file containig header styles
import Navigation from '../Navigation/Navigation';
import './Header.css';

// Create a Header function returning the HTML of header block
function Header() {
return (
<header className="header">
<h1 className="header__title">Site Name</h1>
<Navigation />
</header>
);
}

// Add a default export statement for Header component to use it in the other files
export default Header;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The navigation-related styles should be colocated with a dedicated Navigation component rather than living in Header.css, to fully satisfy the requirement of splitting CSS along decomposed BEM/component blocks.

18 changes: 18 additions & 0 deletions src/components/Navigation/Navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.navigation__link {
display: inline-block;

padding: 0 0.5em;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigation.jsx assigns className="navigation" to the <nav> element, but Navigation.css doesn’t define a .navigation selector. Since the task requires splitting CSS code by BEM blocks and colocating those styles with the component, consider adding a .navigation rule here to style the block root (or remove the class if you don’t intend to style it).

color: black;
text-decoration: none;

opacity: 0.7;
outline: none;

transition: opacity 0.2s ease-in-out;
}

.navigation__link:hover,
.navigation__link:focus {
opacity: 1;
}
Loading
Loading