Oleksandr Starshynov w1 React #2
Conversation
| border: 1px solid #ccc; | ||
| background-color: white !important; | ||
| color: #333; | ||
| border-radius: 6px !important; | ||
| cursor: pointer; | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .category-button:hover { | ||
| background-color: #f5f5f5; | ||
| } | ||
|
|
||
| .category-button.active { | ||
| background-color: #0077cc !important; | ||
| color: white; |
There was a problem hiding this comment.
Try to avoid using !important in your CSS.
(It may make styles harder to override and maintain)
There was a problem hiding this comment.
File Name:
- The
compositefolder naming isn’t a common convention in most React projects. In this case, you can simplify the structure by moving them directly intocomponents/ - Folder names like components and pages, it’s common practice to use all lowercase. Only component files themselves should use PascalCase (e.g., Button.jsx) to clearly distinguish them as React components.
There was a problem hiding this comment.
I would say that this is a little sueprise for me. I am showing here the scrinshot from our session. So, I guess that I am doing the correct structure of components.
Does it mean that I have to re-do the whole structure?
There was a problem hiding this comment.
From what I understand, the screenshot composite folder is still under the main components directory, so technically it's still part of the components.
Besides, this is more about coding style, and there’s no strict right or wrong. Since this is your project, it’s totally fine as long as the structure makes sense to you. I’m just sharing my perspective based on common practices.
Out of curiosity: how do you distinguish between components and composite?
There was a problem hiding this comment.
It seems to me that the structure proposed in the lecture is logical, so I don't have any difficulties. Components are repeating or not elements of the interface, they have no logic, only structure and styles. For example, these will be buttons, inputs, and so on. Components are combined components, logic is added and values are transferred. This is already a functional group of buttons or a product card. Does this make sense to you?
|
|
||
| /* .product-card img { | ||
| max-height: 250px; | ||
| width: 100%; | ||
| object-fit: contain; | ||
| display: block; | ||
| margin: 0 auto; | ||
| } */ | ||
|
|
There was a problem hiding this comment.
Is there any reason you want to keep it?
| @@ -0,0 +1,13 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
Since React 17 and newer versions with the new JSX transform, explicitly importing React in every file is no longer necessary.
| import React from "react"; |
|
The code is clear and well-structured! |
Hi @ChingHsun it was in ReadMe |
Oh sorry I didn't see! Your project works well and meets all requirements! I will approved |
all-productsfile. Note: the site is responsive, so have a look at the breakpoints in the deployed example project.all-categoriesfile at the top of the pagecategoryproperty should be displayed on the screen. Note: The categories listed in the product objects do not match up exactly with the categories in the categories list. You will have to find a solution to this without editing the files