Daniel Deutsch
Jun 8, 2017 · 2 min read

Thinking in React lays out how to structure components in React. When using Redux it’s even more important to know how to structure your components. Therefore a small reminder in form of an article. :D

📄 Table of contents


“Plans are only good intentions unless they immediately degenerate into hard work.” — Peter Drucker


Why to layout the components before writing code

Planning your application and components before you start writing code will help you save a lot of time later on. With all the possible features React components can have, they clutter very fast and become soon not manageable. Dividing the purpose and functionality of your components will significantly improve your workflow when your app starts to grow.

  • presentational components (how things look)
  • container components (how things work)

Make sure to read the article from Dan Abramov, where he explains the key ideas between those components in detail.

Presentational ComponentsContainer ComponentsPurposeHow things look (markup, styles)How things work (data fetching, state updates)Aware of ReduxNoYesTo read dataRead data from propsSubscribe to Redux stateTo change dataInvoke callbacks from propsDispatch Redux actionsAre writtenBy handUsually generated by React Redux

Source: https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md

Presentational components

Logical presentation

  • React Component
  • Manage own State
  • May take place in React Lifecycle

Pure presentation

  • Stateless
  • Rely on Props
  • Pure functions
  • Don’t take place in React Lifecycle

“I call components encapsulated React components that are driven solely by props and don’t talk to Redux. Same as “dumb components”. They should stay the same regardless of your router, data fetching library, etc.”

— Dan Abramov

Container components

See this article for a great example.

“I call containers React components that are aware of Redux, Router, etc. They are more coupled to the app. Same as “smart components”.”

— Dan Abramov


If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Of All Things - Tech Progress

Articles covering entrepreneurship, tech, programming, innovation, ideas, future, success and businesses. If you want to submit your story or become a writer, send a message to dd@createdd.com

Daniel Deutsch

Written by

Business Law and Machine Learning. Pushing the limits to make the world a better place. Open for Projects of any kind.

Of All Things - Tech Progress

Articles covering entrepreneurship, tech, programming, innovation, ideas, future, success and businesses. If you want to submit your story or become a writer, send a message to dd@createdd.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade