add task solution by AndrewPrszn · Pull Request #4250 · mate-academy/react_decompose

AndrewPrszn · 2026-01-31T18:34:15Z

mateacademy-ai-mentor

Review Summary

Good work on creating the component file structure. However, changes are needed because the core requirement of the task—decomposing App.jsx—has not been completed.

Here are the critical issues to address:

App.jsx is not using the new components. The main App.jsx file still contains all the original hardcoded JSX. Please import your Welcome, Header, and Article components and use them to render the page, removing the old static content.
Article.jsx has incorrect content. This component should render the five unique, static paragraphs that were originally in App.jsx. Currently, it's incorrectly repeating the same prop value. Also, please correct the headline's class name from article-title to article__title to match the BEM convention.

Once you've updated App.jsx to use your new components and fixed the content in Article.jsx, your solution will be on the right track.

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/App.jsx

+import './components/Welcome/Welcome.css';
+import './components/Header/Header.css';
+import './components/Navigation/Navigation.css';
+import './components/Article/Article.css';


These component-specific CSS files should be imported inside their corresponding component files. For example, Welcome.css should be imported in Welcome.jsx.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Article/Article.jsx

+function Article({ paragraph }) {
+  return (
+    <article className="article">
+      <h1 className="article-title">Headline</h1>


The class name here should be article__title to match the BEM convention used in the original App.jsx and the rest of the project.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Article/Article.jsx

+      <p className="article__paragraph">{paragraph}</p>
+      <p className="article__paragraph">{paragraph}</p>
+      <p className="article__paragraph">{paragraph}</p>
+      <p className="article__paragraph">{paragraph}</p>
+      <p className="article__paragraph">{paragraph}</p>


This component should render the five unique, static paragraphs that were originally in App.jsx. Currently, it's incorrectly repeating the same paragraph prop five times. The component shouldn't need to accept any props; it should just contain the original static content.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Article/Article.css

+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }


These styles for the .header class do not belong in the Article.css file. Per the task instructions, styles should be split just like the components. Please move this block to the Header.css file.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';


While not always strictly necessary with modern React setups, it's a good practice to explicitly import React in every file where you use JSX. This ensures consistency and avoids potential issues with different build tools. Please add import React from 'react'; at the top of this file.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+export function Navigation() {


The task requires using export default. While you do have a default export on line 19, this named export is redundant and can be confusing. It's best practice to have a single export for a component file. Please remove the export keyword from this function declaration and rely solely on the default export.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Welcome/Welcome.jsx

@@ -1,5 +1,25 @@
 // import a css file containig welcome styles
+import './Welcome.css';


It's a standard convention and a good practice to explicitly import React at the top of every file that uses JSX. Please add import React from 'react'; here.

mateacademy-ai-mentor · 2026-01-31T18:35:58Z

src/components/Welcome/Welcome.jsx

+//           libero, in dignissim lacus erat et metus. In hac habitasse platea
+//           dictumst. Aenean euismod ligula sed massa efficitur, at convallis
+//           libero venenatis.
+//         </p>
+//       </article>
+//     </main>
+//   );
+// }
+//
+// export default App;


This commented-out code seems to be a leftover from another file and is not relevant to the Welcome component. It's best to remove it to keep the code clean and readable.

mateacademy-ai-mentor

Review Summary

Great job on this task! I am approving your solution as you've successfully refactored the App.jsx component and correctly split the logic into Header, Welcome, and Article components.

While your work meets the core requirements, here are a few small improvements to consider for future projects:

In src/components/Article/Article.css, some styles for the header should be moved to Header.css to keep component styles fully encapsulated.
The src/components/Welcome/Welcome.jsx file contains a large block of commented-out code that can be removed to improve readability.
In src/components/Navigation/Navigation.jsx, you can remove the named export from the function declaration since you already have a default export.

Excellent work overall, and keep up the great progress!

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

mateacademy-ai-mentor · 2026-01-31T18:55:51Z

src/components/Article/Article.css

+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }


These header styles do not belong in the Article.css file. To keep your components properly encapsulated, all styles related to the header should be in Header.css.

mateacademy-ai-mentor · 2026-01-31T18:55:51Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+export function Navigation() {


While this works, having both a named export here and a default export on line 19 for the same component is redundant. Since the requirement is to use export default, you can remove the export keyword from this line to keep your module exports cleaner.

mateacademy-ai-mentor · 2026-01-31T18:55:51Z

src/components/Welcome/Welcome.jsx

+//           libero, in dignissim lacus erat et metus. In hac habitasse platea
+//           dictumst. Aenean euismod ligula sed massa efficitur, at convallis
+//           libero venenatis.
+//         </p>
+//       </article>
+//     </main>
+//   );
+// }
+//
+// export default App;


This block of commented-out code seems to be a remnant from another file. It's best to remove it to keep the component clean and focused on its own logic.

add task solution

c51cf70

mateacademy-ai-mentor suggested changes Jan 31, 2026

View reviewed changes

add task solution

f023fea

AndrewPrszn requested a review from mateacademy-ai-mentor January 31, 2026 18:54

mateacademy-ai-mentor approved these changes Jan 31, 2026

View reviewed changes

		@@ -0,0 +1,19 @@
		import './Navigation.css';

		export function Navigation() {

		@@ -1,5 +1,25 @@
		// import a css file containig welcome styles
		import './Welcome.css';

Conversation

AndrewPrszn commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AndrewPrszn commented Jan 31, 2026 •

edited

Loading