Can containers contain classes and markup?

Question

JavaScript

Friends,
Components in React are divided into several main groups (write where I'm wrong):
a. Presentative (know how to display data, but don't know the data itself; work only through properties; always pure components)
b. Containers (know what data to display but don't control display; are a composition of presentational components or other containers)
Now look. We have an application markup component (header, menu, footer, etc.).
If we want the hat to be gray, where should we write this style? In the header component, and thereby add display properties to the container? ...or do we make three components, LayoutContainer -> HeaderContainer -> HeaderView, and the latter knows the entire display, and we compose the data and the composition of the header in the HeaderContainer?
At the level of convenience, I prefer the third option. This is more reusable, even though it creates quite a few wrappers. We will then be able to make N-caps for every taste and color only by creating new containers.

Answer 1

Components in React are divided into several main groups (write where I'm wrong):

You are mistaken in the fact that in react the components are divided into some such groups. In React, components are divided in a completely different way - functional, class-based, and so on.
they are no longer divided into presentational/containers "in react", but in your specific application, provided that you have chosen the approach for building that is proposed in Dan Abramov's articles.
It is worth noting that this was just his opinion at that time, and now he writes:
You can choose some other approach. And share differently. Or generally on other principles to build architecture. Or modify his approach for some of his specific needs, and so on.
so the answer to the question is:
Depends on how you end up building your application.
So the answer is what you think is correct.
For me, the criterion is simple - if you decide to do things in some way and after a while, when you need to do something in this code, you swear and suffer - the decision was wrong. must be done differently. If you change what you need quite easily and without problems - you did everything right.
When the application grows enough, you yourself will understand what is best for you if you pay attention.
If you definitely need formal rules for constructing components - define any for yourself as you like best and follow them. Then change if it doesn't work.

Answer 2

a. Presentative (know how to display data, but don't know the data itself; work only through properties; always pure components)
Where does infa come from that these are always pure components?
If the project is large, then yes, you can create a wireframe with layout and set basic styles in it. If the project will not scale, for example, a simple ToDoshka, then you can set styles in the header component itself.
When you get down to business, you yourself will understand what will be more convenient. And you will redo your components many more times, but in the end you will figure it out