In react the components are divided into two categories: presentational components and container components. Each of these have their own characteristics. Let’s look at both of these components in details.
- Mainly concerned with how things look.
- Have no major dependencies on the rest of the app.
- No connection with the specification of the data that is outside the component.
- Mainly receives data and callbacks exclusively via props.
- May contain both presentational and container components inside it considering the fact that it contains DOM markup and styles of their own.
For example, the below code denotes a presentational component, and it gets its data from the props and just focuses on showing an element.
- Mainly concerned with how things work.
- May contain both presentational and container component but does not have DOM and markup of their own.
- Provide the data and behaviur to presentational or other container components.
- Call flux actions and provides these as callbackss to the presentational component.
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.
- Differences between Functional Components and Class Components in React
- How to auto-resize an image to fit a div container using CSS?
- Font scaling based on width of container using CSS
- How to position a div at the bottom of its container using CSS?
- How to Rotate Container Background Image using CSS ?
- Difference between ng-container and ng-template in AngularJS
- Docker compose tool to run multi container applications
- Semantic-UI | Container
- How to change font size depending on width of container?
- Difference between Docker Image and Container
- How to define a container for an external (non-HTML) application using HTML5?
- How to create full width container in bootstrap5?
- How to create full width container using bootstrap?
- How to make an svg scale with its parent container ?
- ReactJS | Components
- ReactJS | Components - Set 2
- ReactJS | Lifecycle of Components
- Angular 7 | Components
- ReactJS | Functional Components
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.