Day 2: ReactJS nested component

Goal: To learn nested reactjs components

A card component with 3 nested components

Step 1 : I will use the same index.html and project from the last story. Therefore the document element ‘app’ is the container for the react component

index.html

Step 2 : Create a new ‘card.js’ file inside app/card/card.js and

• Create cardStyle variable for all styles in the new component
• At the point the template is just an empty <div>
• Finally, render the component inside the app container in index.html

However, we need our component to have three nested component as following

Template with 3 nested

Step 3 : Create AvatarHeader component in the same file app/card/card.js

AvatarHeader component

Step 3 : Create Avatar component in the same file app/card/card.js

Avatar component

Step 3 : Create Details component in the same file app/card/card.js

Details component

So finally our Card components look like as following. Voila!!

Card Component

The fiddle is here