I'm beginner of react development with redux. I'm wondering what are the Presentational Components and Container Components.
Finally at the conclusion we can conclude in simple terms that the presentational components are concerned with the look, container components are concerned with making things work.
A Component is a class or function that describes part of a React UI. Container is an informal term for a React component that is connect -ed to a redux store.
Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store.
You’ll find your components much easier to reuse and reason about if you divide them into two categories. I call them Container and Presentational components.
I assume you have knowledge about redux architecture
Container Components
Presentational Componets
Benefits of categorizing components
For more details read this article
Here is the summarized version of the differences inorder to understand easily, even though some of them are related to the above answer above,
Container Components
Example :
class TodoApp extends Component {
componentDidMount() {
this.props.actions.getTodos();
}
render() {
const { todos, actions } = this.props;
return (
<div>
<Header addTodo={actions.addTodo} />
<MainSection todos={todos} actions={actions} />
</div>
);
}
}
function mapState(state) {
return {
todos: state.todos
};
}
function mapDispatch(dispatch) {
return {
actions: bindActionCreators(TodoActions, dispatch)
};
}
export default connect(mapState, mapDispatch)(TodoApp);
Presentation Components
Example:
<MyComponent
title=“No state, just props.”
barLabels={["MD", "VA", "DE", "DC"]}
barValues={[13.626332, 47.989636, 9.596008, 28.788024]}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With