Day 2: ReactJS nested component
Goal: To learn nested reactjs 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
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
Step 3 : Create AvatarHeader component in the same file app/card/card.js
Step 3 : Create Avatar component in the same file app/card/card.js
Step 3 : Create Details component in the same file app/card/card.js
So finally our Card components look like as following. Voila!!
The fiddle is here