Container & Presentational Components

[00:00:00]
>> Mike: The next thing we're gonna do is apply a component architecture practice called container and presentation components. This is a very, very popular technique to use across all front end development these days. I believe it was sort of born out of the React community. In principle, here's how you wanna think about this.

[00:00:23]
You make it so your components are either smart and stateful, or they have an interesting template of some sort. And you try to make components that are either one or the other. And you try not to make something that can tick both of those boxes. This means that you can test the presentation of things, right?

[00:00:48]
These are, for example, our template-only components. We give them args, they render some HTML. They are stateless.
>> Mike: So those are easy to test. You just pass them args, see what they render. Pass them args, see what they render. A container component would be something that has actions.

[00:01:07]
Something that has state, right? And that is gonna be easy to test because you can give it a for testing use only presentation. They might be much easier to make assertions against than the full-blown component in the wild. So you can think of it as like, you can have a big JS module, but your template should be very simple in that case.

[00:01:34]
Or you can have a complicated template, but your JS module should be absent or extremely simple. I would say it's fair game to have a JS module for the purpose of bringing in a service, something like that. But you shouldn't be doing stateful stuff. You shouldn't be seeing this dot whatever in that components template.

[00:01:56]
Presentation components are just about turning data into HTML.