Installing Ant Design

[00:00 - 00:14] To make our application look good in all screen sizes, we want our application to be responsive. We can either write media queries ourselves which can take a lot of time to hinder and to explain.

[00:15 - 00:28] Also it's outside the scope of this course. What we can do is we can install a UI framework which stands for a User Interface Framework which will help us tackle this responsive application problem.

[00:29 - 00:41] It will also allow us to save time in many aspects like designing the frequently used components such as cards, footer, list etc. This is a big cause.

[00:42 - 00:47] We want to save time wherever we can. Using a UI framework can be our best bet.

[00:48 - 01:01] Trust me, it will save a lot of our development time. Although there are some disadvantages as well, your application is not much customizable as it could have been with custom CSS.

[01:02 - 01:11] And your application might look like someone else who has been using the same UI framework. It also has a larger bundle size because of this framework's presence.

[01:12 - 01:21] But here we are focusing on creating an application which has functionality of a real world e-learning application. Styling is anyways very subjective.

[01:22 - 01:36] You might have a different liking to a color scheme, grid layout or even choice of images. By using a UI framework you can choose to use it as it is or create a custom component by yourself.

[01:37 - 01:48] So, everyone's happy here. When it comes to choosing a UI framework we have plenty of options such as boot strap, semantic UI, Bulma and many more.

[01:49 - 02:05] These frameworks provide us the styling when we use CSS class names provided by these frameworks. Although it works perfectly well with React it's always a good idea to have a component which can be used anywhere in the application.

[02:06 - 02:22] That problem is also resolved as we have React based framework provided by the above mentioned frameworks. The benefits of using these libraries are that a large number of components which I mentioned above have already been prepared for us.

[02:23 - 02:35] When the library is available in our app we can simply import these components and use them directly. We are not using any of these frameworks though, we are going to use and design framework.

[02:36 - 02:47] And design is my personal favorite React UI framework which has all the components we need in this application. I love how every component of ant design looks so authentic.

[02:48 - 03:00] It has also every component that we will need in this application. Although it's a good looking framework it has a bundle size which is fairly larger than some of the other ones mentioned in this video.

[03:01 - 03:09] So just keep this thing in mind if you want to use it in your production application. Now let's install this in our application.

[03:10 - 03:19] If you are on the homepage just click on getting started and copy this line. NPM install and design.

[03:20 - 03:43] The ant library is built with TypeScript so we won't have to install any additional type declaration files. Now we can go back to our terminal, make sure you are inside the client folder and now paste this.

[03:44 - 03:53] Once it is installed we can begin to use the components quickly. Now that we have installed and design we are good to go.

[03:54 - 03:54] See you in the next lesson.