Making Course Component

[00:00 - 00:26] We have our courses API ready. We have set up XUs, which means we can show the courses on our main page. Let's do just that. Inside the components directory, let's make a new one and let's call this file courses.tsx. I mean create a new file and this file will be called courses.tsx.

[00:27 - 01:30] To get started, again import React from React. Our function will be called courses and it will return a dev with class name course. Let's export it as well. Now we need to make an API request to get courses data. To store course data, we need to maintain a state. Let's import U State from React. And create a variable const courses set courses UState with default value of an empty array.

[01:31 - 02:16] And now we know that courses will carry an array of courses. So we can write type course array. And it will be imported automatically. We are going to make use of the agent file to make a request. So let's import it as well. Import agent.

[02:17 - 04:13] As well. Let's write code for use effect. Since there is no dependency, we can put an empty array here. Let's call agent.courses.less function which will then give us the response. We can use this response by using set courses and with a value response. Our courses variable now carry courses. Inside our course div, let's create our header. We will give it a class name of course underscore underscore header. We will have an extract which will say what to learn, learn next. And the H2 tag will say new courses. Just call U. 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 ourselves or we can use the ant design. In this case, I would prefer using ant design. It gives us row and columns which are responsive. So let's do one thing. Let's import row and column from ant two.

[04:14 - 05:58] We can use row as a parent here. We can give some margin which is called got our. So got our will take an object and inside the array. Vertical margin can be 24 and horizontal margin can be 32. We can put it inside an array like this. We want one course to be in a column. To get individual courses data, we need to map our courses variable which is an array of courses. If we map over it, the individual course will be called just cause which will be again of type cause. Whenever we are writing JavaScript inside this return statement, we need to do that inside the curly bracket. So courses dot map each individual course will be called a course and next one can be an index. Now, now we can return a column. Let's close it as well. Our course will be of type cause and index will be a number. Since we are using TypeScript as very important to give type safety. Now, as I said, I want each course to be one column. So we will return a column here and let's give it a class name of got a row and the span value can be six for now. We can also pass key and give it a value index.

[05:59 - 06:40] I want our course to look like a card and design gives us card component which we can use here. Now, with row and column, let's also import card from and design and use it here. Card component. This card should be our variable. So let's give it a variable. Our card displays an image with the cover property. So let's write cover. This property will accept an image tag. So let's make an image tag. We can give it a width of 100%.

[06:41 - 09:08] Alternate text can be force cover and the source will be course dot image. If you notice here, we are getting intelligence because we have given it a type cause. Cause dot image will be a source. Let's create a depth which will carry the title of the course . Now, let's give it a class name of course underscore title and the value will be course dot title. The same way, let's create three more dips. Next one can be course underscore underscore instructor instructor instructor. Next one can be course underscore underscore rating and the value will be course dot rating and finally the price and this one will be called course underscore price and the value will be course or price. Again, I have provided SAS file for styling in the code below. Just copy that, make a new file inside SAS components and let's call it underscore course dot S C S S and paste the file here. Also import it inside main file. So we will do activate import and component slash course. You already said. Perfect. I want few more changes here. First of all, I want this span value to change dynamically with the screen size. So that let's create a new state and let's give it a value of span well and the function will be set span well default value can be empty for now, but we can give it a type of number. Since we know it is going to be of type number.

[09:09 - 10:38] Now let's create a function which changes the value depending on the screen size. Let's call this function check with this function will return nothing. So we can give it a type void, which means we are saying that this function is not going to return anything. First condition will be if window dot in a way is more than 1,024 pixels. We don't have to write pixels here because the window doesn't give us the value in pixels. It just returns a number. So if the inner width is more than 1,024 pixels, we want our span value to be six. So we will use a set span well function and give it a value of six. As if window dot inner width is less than 1,024 pixels, but it is greater than 768 pixels. We want our set span well to be 8. Finally, if it is anything below 768 pixels, we can simply write well.

[10:39 - 12:57] We don't have to write else f because it is sure that the last condition is going to be when the width is going to be below 768 pixels. Let's also pass this function inside the user effect hook so that it runs whenever the page renders. To call this function on screen size change, we can use use layout effect hook. This is almost same as use effect hook, but it performs better when we want to read under the screen again and again. So we can import it from react, use layout effect. It is used exactly as the user effect hook. So use layout effect hook. There is no dependency so we can pass an empty area. We want to run this check width function anytime the screen size changes. We can use window dot add event listener here. So let's write it down window dot add event listener and the event will be res ized. So whenever the screen resizes, we want to call the check width function to avoid memory leak we can also return the function. Can this copy it and paste it here. Now rather than six, we can pass the value span well here. I also want to show stars depending on ratings of the course from the code below. You can copy a function called show stars and just copy it above the return statement. It might show an error because we haven't imported f a icons just import star star as f a icons from react icons slash f a. Now let's look at this function. This accepts rating which will be a decimal number. Options is an empty array which receives star icon component whenever it passes this loop. Our loop starts from one and it runs till the ratings whole number which can be one, two, three, four or five.

[12:58 - 14:59] When the difference between the rating and the eye is less than one or more than 0.3 which will be on the final loop, it will get half a star. That's it. Now let's use this function inside a span here. Rating span. This function is called show stars and it accepts rating so we will pass course dot rating. I think now we are done. Let 's run this code both from back end and front end. So let's make sure we are inside client and start and start also go to the back end. See the API dot net. Watch. Done. Since it's starting the code, let's import this component inside the home page because otherwise we are not going to see anything. So let's go to SRC pages and go to home page and instead of using home page, we can we can use the parent and inside we can write our courses component. Perfect. Also inside the app dot t6 file, we have to import the styles from and design. So import and p slash test slash and p dot css and that's it. Now if we open the browser, this is how our project looks for now. Hmm not bad. Now let's also check it for responsiveness. So if we reduce the screen size, we see that they are changing as well. So perfect. I think for this section, we are good for the front end.

[15:00 - 15:01] Let's go to the back end in the next lecture.