Smart and Dumb React Components

He did the translation of the article The land of undocumented react.js: The Context , where he referred to Dan Abramov's article about smart and stupid components, but for some reason thought that it was on habrahabr. I think this short article will not be superfluous for anyone.
Translating an article Smart and Dumb Components

There is a simple template that I find extremely useful when I write applications in React. If you have been working with React for a while , then you probably already understood that. This is well explained in this article , but I want to add a couple of points.

You will find that your components are much easier to reuse and discuss if you divide them into two categories. I call them Smart and Dumb, but I also heard Fat and Skinny, Stateful and Pure, Screens and Components and so on. All this is not absolutely the same, but the idea is similar.

My dumb components:

1. independent of the rest of the application, such as Flux actions or stores
2. often found in this.props.children
3. receive data and callbacks exclusively through props
4. have their own css file
5. occasionally have their own state
6. can use other stupid components
7. examples: Page, Sidebar, Story, UserInfo, List

My smart components:

1. wraps one or more silly or smart components
2. stores the state of the store and throws it as objects into silly components
3. calls Flux actions and provides them with silly callback components
4. never have their own styles
5. rarely produce DOM themselves, use stupid components for layout
6. examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList

I put them in different folders to make their difference explicit.

Profit from this approach

1. The best division of responsibility. You understand your application and your UI better if you write components in this way.
2. The best re-usability. You can use the same stupid component with completely different sources of state.
3. Stupid components - this is actually the "palette" of your application, you can put them all on one page and let the designer configure them, crawling into the application logic. You can run regression testing on such a page.
4. This forces you to extract “layout components” such as Sidebar, Page, ContextMenu and use this.props.children instead of duplicating the same layout in different smart components.

Remember, components should not issue a DOM. They should only provide the boundaries between the UI.