Hi guys. In this lesson, we will create our view client side with more J's comments. In view client side, we will consume our server side scripting port plus API data. To create a view component. The best way is using view command line interface. First of all, we will describe our project name.

Our project name will be client side. To create a project in view, we will use the command interface. If you don't install it yet, you can install it using npm install global view, see an AI service global then we can create our initial project to create it Our comments will be you create client site. In via command line interface, we can set default configurations and dependencies. To do it, we have two options. These are default mode and manual mode.

By the way, the first choice ASD comes from my predefined stored configurations. In view, we can say configurations for future projects. Let's choose manual mode from here. Because with manual mode, we will see every configurations step by step. Let's examine and learn all items one by one. First one is bubble j. s. bundle j. s converts source code to browser compatible JavaScript code.

For example, we want to support an old version of Internet Explorer like Internet Explorer 11. This means some new modern features of JavaScript could not be supported in this version. So in that case, we can use bubble j s, and bubble j. s will handle compatibility problem. The other one is TypeScript. TypeScript secret is modern JavaScript plus types like string number, date, custom types, etc. Progressive Web Apps is web development approach that tries to reach the application experience through mobile internet browsers think like that we have a website like abc.com.

Then we open it from browser, we can reach the normal website. But with progressive web app, we can add it to our main screen. And later, we can reach it like mobile application. The other thing is routers, you know that it is using to redirect link operations. The other thing is we x. When x is a state management pattern, we can think like it, we have an instance or OSHA trot application, then we can change this instance as controlled with actions or we can check the state of this instance with wi x We will see the example above it on our application, which is CSS.

Preprocessors is a program that lets you generate CSS from the preprocessors own unique syntax, for example, as a SS. In normal CSS, we can't use if expression or variable, but with a SS we can create variable operation or if expression like programming code. The other thing is linting. And formatting linter and formatter is used to find possible bucks in our court on compile time, and it is used for stylesheet of court. The other thing is unit test. unit testing is used to test for piece of the court and and testing is a type of functional test.

Unlike a unit test, you are not breaking the application down into smaller parts in order to test it, you are testing the entire application. Okay, now we can choose our required dependencies. We will use bubble routers, WI x and lenses. You use history mode for routers. Yes, we want to store history of routers. They can linter for monsters.

Es lint with error prevention only es lint with Airbnb config. This means excellent with provide error correction. vention and Airbnb config will be used for formatting. Airbnb has some rules for code formatting, such as indent size should be. Each code block should be described with semicolon, etc rows as needs plus standard config. It is similar with Airbnb, but the most important difference is you don't need to use semicolon to enter code block ESLint plus prejudice.

It is mainly used to format long lines and to setbacks between code blocks. We will just use es lint we won't use formatter but if you want to use it, you can use there won't be extra differences on implementation. Addition will feature. Furthermore, you can choose if you want to add these hooks to your configuration. These we'll run your linting formatting secrets when saving or committing to your Git repository. We will choose lead on safe.

There do you prefer placing config files? We will use existing package Jason. Save it for future projects. We can save our project creation configuration for future projects to reuse it, but for now, we don't want to it. Okay, this comment will create our initial project Later, we will go to the workspace folder, and we will import our dependencies. Our first dependency will be bootstrap, MPM install bootstrap.

JQuery. Copper is safe. You know that strap is a library for Responsive STI Our second dependency will be found out some icons npm install save 4000 Font Awesome SVG core 4003 solid SVG icons for our awesome view formed us. Our third dependency will be we will delete npm install we validate safe. We will use it for form validation Oh, last dependency will be axios npm install save axios we will use it for HTTP requests. So we will use it for communication with server side.

Okay now we have created our initial view project. In next lessons we will see the details about them. Thank you