React Design Patterns: Presentational and Container Components

The term presentational and container components refers to a design pattern within React, where components are separated into two main buckets: presentational (which are concerned with how things look) and container (which are concerned with how things work).

[kumailn]

First of all many many thanks Jon Bellah for being focus with the topic, I saw many many tutorials bloated with lots of random information which really get confusing and waist time.

[lokeshbajracharya]

Thanks Jon... my project structure has improved alot from this video

[aaadesh]

Precisely pointed out difference in very few words, great content!

[ayush]

Such Quality content. Thanks Jon for sharing this!

[joseplopez]

Man you need more subs, great content. Subscribed.

[boomboom-]

Really good tutorial bro, keep up the good work. I've seen your channel is inactive, hope you're okay.

[codedealers]

Nice example and simple explained! Subbed. BTW could you cover testing in react with Jest one day?

[okoiful]

so the Form component is the container?

[mrchedda]

Is it me or did he not show an example of a container component?

[javierrenteria]

Hello... one question.. "container" is the "component" that will be reused many times for another "components"? Sorry for my English! thanks!

[courtneye.]

Hi Jon! Thank you so much for this clearly explained walkthrough 🙏🏾 just to clarify: the Button functional component (which takes props) is what is considered the container component and Form and App class components are considered the presentational components? Or did I get it backwards? I just want to make sure the right thing comes to mind when I say container vs presentational component. Thanks in advance!

[danieltkach]

Is this still applicable with modern react? (functions and hooks). Because I'm thinking customHooks would be your "how things work". Can anyone clarify?