Presentational and Container Components

In this tutorial, we understand about how presentational components deal with the look and feel of the app and container components deal with the data and behavior. At the end of this tutorial, you will learn about:

• Organizing your React app into presentational and container components
• Enable your presentational components to be concerned with the look and feel of your app
• Enable container components to deal with the state, provide the data and handle user interactions

Install library

• $ npm install date-fns --save

Add a Container Component

• Add a new component named MainComponent.js in the components folder and update its contents as follows:

• Update the App.js by removing the state related information, and make use of Main Component to render the UI:

Turn Menu Component into a Presentational Component

• Open MenuComponent.js and update its contents by removing the state and removing the DishdetailComponent reference, and make use of the onClick supplied by MainComponent through the props to deal with the clicking of a menu item:

• The DishdetailComponent is already structured as a presentational component and hence needs no further update, except wrapping the return value from render() within a <div> with the className as container.
• To print out the date for a comment in a format more suitable for human readability, you can update your renderComment function with the code snippet shown below:

(source: Front-End Web Development with React on Coursera)