This video is available to students only

Making Course Component

In this lesson, we're going to make our course component

Making courses component#

We have our courses api ready. We have also set up axios, which means we can show the courses on our main page. Let's do just that. Inside components directory, let's create our Courses component. This will be called Courses.tsx. To get started, import React from react. Our function will be called Courses. We also need to return a div with className course, so let's export it as well.

Now we need to make an api request to get course data. To store course data, we need to maintain a state. Let's import useState from react and create courses and setCourses. useState is with the default value of an empty array and now we know that courses will carry an array of courses so we can import our model and give it a type of Course array. We are going to make use of the agent file to make a request, so let's import it as well. We need to make the api request as soon as the page loads, for which we need to have useEffect hook. Let's import it. Inside useEffect hook, there's no dependency, so we can put an empty array.

Let's call agent.Course.list function which will then receive a response. We can store this value in courses by using setCourses to the response. Our courses variable now carries our courses. Inside our course div, let's create a header; we will give it a className, course__header. h1 tag will carry the text, What to Learn Next? and h2 tag will carry New Courses picked just for you.... The container which will carry our courses needs to be responsive, which means it should resize as per the screen size and should look good. Again, we can either write media queries by ourserlves or we can use the antd. In this case, I would prefer using ant design because it gives us rows and columns which are responsive, so let's import Row and Column from antd.

We can use Row as a parent, and we can give some margin which is called gutter. Vertical margin can be 24 and horizontal margin can be 32; we can put it inside an array. We want one course to be in a column. To get individual course's data, we need to map our courses variable, courses.map, and individual course will be called course which will be of type Course. We can also have index which will be of type number. Like I said, I want each course to be one column, so let's return Col with className, gutter-row. Span can be 6. We can also pass key and give it a value of index, which will be unique.

I want our course to look like a card; antd gives us Card component which we can use here. Let's import Card from antd and use it inside Column. The card should be hoverable so let's give it that value. Our card displays an image with cover property. This property will accept an image tag; let's give it a width of 100%. Alternate text can be course cover and source will be course.image. If you notice here, we are getting intelllisense because we have given it a type Course. Let's create a div which will carry the title of the course. Classname can be course__title. Text will be course.title. The same way, let's create 3 more divs; course instructore, course rating and course price. Course price should also carry dollar symbol, so let's do that.

Again, I have provided sass file for styling in the code below. Just copy that, make a new file, _course.scss and paste it here. Import it inside main.scss file.

Start a new discussion. All notification go to the author.