It's time to start on the second assignment in this course.
In this module, we had learnt about
the various types of React components including functional components,
then we examined the React router and how we can create a single-page application.
In this assignment, you'll explore all these concepts.
To get you started,
a partially completed About component.js file is provided for you.
As the first task in this assignment,
download About component.js file,
and move it into your components folder of your project,
and then integrate the About component into your single-page application,
so that when we click on the "About Us" link,
you will be able to navigate to the About component.
So, when you have completed the first task of your assignment,
you will be able to navigate to the About Us view in your single-page application.
So, when you go to the About Us view,
this is what you will see after your download and integrate
the About component.js file that is provided for you.
So, you will see that this is partially
completed with some of the information already set up for you,
and if you have taken the previous Bootstrap course,
you will recognize this from the Bootstrap course.
This is exactly the same thing that we saw in the About Us page.
Right at the bottom, you will be creating a list
of all the corporate leaders for your company.
The information for creating this list is provided for you through
the leaders state property in the main component.js file.
So, that needs to be passed into the About component.js file,
so that we can render these set of leaders.
So, once you have set up the About component,
and pass the information about all the leaders
from your main component to About component,
this is what you will end up seeing at the bottom of the About component view here.
So, you will see the four leaders names being printed out here.
Now, you will end up replacing this information by a list of
leaders after you complete the second and third tasks in this assignment.
So, that once you complete the second and third tasks in this assignment,
this is what you will end up seeing at the bottom of the About Us view here.
So, you can see that the four corporate leader's information is laid out here.
Now, to help us do this,
we are making use of the media React start component.
We had already seen the use of the media React start component,
when we created our first view of the menu page in the first module.
So, you can go back and take a look at how we created the menu listing all the dishes in
the first exercise of the lesson on React components in the first module.
Now, you'll be using a similar media component to create this list of leaders here.
Note, in particular, that you're rendering the image of the leader to the left side,
you're rendering the leader's name here,
you're rendering the leader's designation here,
and the leader's details given in the description for the leader here.
So, in the second task of your assignment,
you'll be setting up a functional component
called Render leader in the About component.js file.
This Render leader component will use the media class to create
this view for each item in the list of leaders.
In your third task of your assignment,
you'll end up creating the list of these four leaders as shown here.
So, to construct this list,
you'll take the help of the Render leader component that you implemented in Task 2,
and then render each of the leaders in a media list as shown here.
Have fun completing the second assignment in this course.