Smart and Stupid React Components

He translated the article The land of undocumented react.js: The Context , where he referred to an article by Dan Abramov about smart and dumb components, but for some reason thought that it was habrahabr. I think this small article will not be superfluous for anyone.
Translation of Smart and Dumb Components

There is a simple template that I find extremely useful when writing applications on React. If you have been working with React for some time , then you probably already understood this. 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 (Smart) and Stupid (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 stupid components:

1. do not depend on the rest of the application, for example Flux actions or stores
2. often contained in this.props.children
3. receive data and callbacks exclusively through props
4. have your css file
5. occasionally have their own state
6. may use other stupid components
7. examples: Page, Sidebar, Story, UserInfo, List

My smart components:

1. wraps one or more stupid or smart components
2. stores the state of the store and forwards it as objects to stupid components
3. causes Flux actions and provides them with stupid components in the form of callbacks
4. never have their own styles
5. rarely give DOM themselves, use stupid layout components.
6. examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList

I put them in different folders to make their distinction clear.

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 reuseability. You can use the same stupid component with completely different sources of wealth.
3. Stupid components are in fact the “palette” of your application, you can put them all on one page and let the designer customize them by getting into the application logic. You can run regression testing on such a page.
4. This forces you to extract “component layouts”, such as Sidebar, Page, ContextMenu, and use this.props.children instead of duplicating the same typesetting in various smart components.

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