Skip to content

React Decompose solution #4303

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
LisandraCaniato wants to merge 1 commit into
base: master
Choose a base branch
from
Open

React Decompose solution #4303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7,827 changes: 4,403 additions & 3,424 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
89 changes: 1 addition & 88 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,91 +16,4 @@ html {
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;
}
}
}
86 changes: 8 additions & 78 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,18 @@
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';

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">
<h1 className="article__title">Headline</h1>
<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 />
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Mar 12, 2026

Choose a reason for hiding this comment

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

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.

<Article />
</main>
);
}

export default App;
export default App;
31 changes: 30 additions & 1 deletion src/components/Article/Article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
/* Put article styles here */
.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) {
.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
32 changes: 29 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,31 @@
// import a css file containig article styles
import './Article.css';

// Create an Article function returning the HTML of article block
function Article() {
return (
<article className="article">
<h1 className="article__title">Headline</h1>

// Add a default export statement for Article component to use it in the other files
<p className="article__paragraph">
In elementum lorem eget est euismod ornare...
</p>

<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor...
</p>

<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis...
</p>

<p className="article__paragraph">
Cras egestas tempor nibh...
</p>

<p className="article__paragraph">
Pellentesque habitant morbi tristique...
</p>
</article>
);
}

export default Article;
43 changes: 42 additions & 1 deletion src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,42 @@
/* Put header styles here */
.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;
Comment on lines +21 to +28
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Mar 12, 2026

Choose a reason for hiding this comment

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

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.

}

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

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}
}
26 changes: 23 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,25 @@
// import a css file containig header styles
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>

// Add a default export statement for Header component to use it in the other files
<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>
Comment on lines +8 to +20
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Mar 12, 2026

Choose a reason for hiding this comment

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

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.

</header>
);
}

export default Header;
15 changes: 14 additions & 1 deletion src/components/Welcome/Welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
/* Put welcome styles here */
.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;
}
12 changes: 9 additions & 3 deletions src/components/Welcome/Welcome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
// import a css file containig welcome styles
import './Welcome.css';

// Create a Welcome function returning the HTML of welcome block
function Welcome() {
return (
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
);
}

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