Fundamentals of React - Components in Depth

Exercise: Create Reusable Components


Your turn! Here are the instructions for your challenge:

1). Add the following CSS rule to the profile image:  .profile-image { height: 50px; float: left;}
2). Add the following CSS rule to the profile <p> tag:  p.profile {margin-left: 65px; line-height: 50px;}
3). Create a parent component named App( ). Nest <Profile /> in App( ) component several times and render <App  /> to the page.
4). Add props to the profile component, and pass in props from <App /> so you end up with several different Avatar images and Avatar names.
5). Add a separator of some sort between the Avatar rows.

You can access the exercise on Stackblitz here


I finished! On to the next chapter