React Architecture Part 1: Container vs Presentational Components
One of the early fundamental concepts you learn as a beginning programmer is how to organize your code by grouping similar program logic together, allowing particular files or components to specialize in particular task(s). Ruby on Rails showcases easy examples of MVC frameworks (Model, View, Controller), where code for class objects, display, and controller logic are isolated from each other to maintain a separation of concerns, a convention that both optimizes and eases scaling of your apps.
React design holds a similar convention with what are called Presentational and Container components, though these are not formerly part of the React library. Likewise, I should also mention that this is only one way to approach your React design, and may already be considered outdated by some developers. Still it is important to understand even if you never put it into practice while building in React.
First, here’s some examples of both components we’ll be looking at.
Screenshots from my React based game, “Bork”.
