ASP. NET Core 6, EF Core and React. JS - Complete Guide | Victor Campos Lins | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ASP. NET Core 6, EF Core and React. JS - Complete Guide

teacher avatar Victor Campos Lins, Software Engineering, Full-Stack Dev

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

43 Lessons (3h 41m)
    • 1. 1 Course overview

    • 2. 2 Setting up the environment

    • 3. 3 Introduction to ASP

    • 4. 4 Creating React ASP

    • 5. 5 Exploring project structure and key file

    • 6. 6 Dependency injection

    • 7. 7 Custom middleware

    • 8. 8 Introduction to Entity Framework Core

    • 9. 9 Configuring Entity Framework in the project

    • 10. 10 Installing SQL Server

    • 11. 11 Creating database and tables

    • 12. 12 Creating Library entity in the project

    • 13. 13 Creating GET method Entity Framework

    • 14. 14 Creating ADD method Entity Framework

    • 15. 15 Creating UPDATE method Entity Framework

    • 16. 16 Creating DELETE method Entity Framework

    • 17. 17 Introduction to ASP

    • 18. 18 Creating API controller and configuring

    • 19. 19 Configuring GET method API

    • 20. 20 Configuring UPDATE method API

    • 21. 21 Configuring CREATE method API

    • 22. 22 Configuring DELETE method API

    • 23. 23 Introduction to React

    • 24. 24 JSX

    • 25. 25 Virtual DOM

    • 26. 26 React Component

    • 27. 27 React Props

    • 28. 28 React Effect Hook and LifeCycle Methods

    • 29. 29 State and Mutability

    • 30. 30 Event Handling

    • 31. 31 Conditional rendering

    • 32. 32 Iterations

    • 33. 33 Forms

    • 34. 34 Refs

    • 35. 35 Adding Axios and designing the page

    • 36. 36 Cross Origin Requests (CORS)

    • 37. 37 Implementing Get item in the websitet

    • 38. 38 Implementing Update item item in the website

    • 39. 39 Implementing Insert item item in the website

    • 40. 40 Implementing Delete item item in the website

    • 41. 41 Adding SweetAlert for notification

    • 42. 42 Handling errors in the Front End

    • 43. 43 Publishing the solution in IIS

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you will learn how to develop a complete functional application using ASP.NET Core 6, that connects to a database, allowing users to visualize, create, edit and delete elements directly from a friendly and well designed web page using React.js, one of the most powerful front-end libraries on the market.

At the end of this course, you will have sufficient knowledge to develop your own complete application using ASP.NET Core, React.js and Entity Framework Core connecting to a database.

Some of the topics that we will cover during this course:

• Setting up the environment

• Introduction to ASP.NET Core 6

• Dependency injection

• Custom middleware

• Introduction to Entity Framework Core

• Creating database and table in Microsoft SQL Server

• Designing CRUD operations in C# using Entity Framework Core

• Introduction to ASP.NET Core Web API

• Documenting our Web API using Swagger

• Introduction to React


• Virtual DOM

• Component

• Props

• React Effect Hook

• State and Mutability

• Event Handling

• Conditional Rendering

• Cross-Origin Requests (CORS)

• Adding Axios to connect our front-end with our back-end

• Adding SweetAlert for notification

• Handling errors in the Front-End

At the end of this course, you will learn how you can deploy the solution that you've developed in IIS

Meet Your Teacher

Teacher Profile Image

Victor Campos Lins

Software Engineering, Full-Stack Dev


Hi there, I'm Victor. I am a software engineer and Full-Stack developer with over 7 years of experience national and international. I have already worked in a huge variety of projects and architectures, some simple others considerably complex.

Some of my main skills include Software Architecture, Web Development, ASP.NET Core, React.js, Entity Framework Core, Javascript, SQL and Web Services.

I consider myself passionate about coding as I really felt excited about learning technologies and using them to automate and improve processes.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. 1 Course overview: Hi, welcome to the course, building modern web applications. We actually an We will start installing those that were used during the squares means rose to do 2000 22, Node.js and SQL Server. Later on, where you start developing our spec project using Core, you can figure out with APIs are met so controllers. Then we use a framework or show manipulated data from the database. And then we'll create our front end application, reacts, Bootstrap and a library called EXOS to connect to the back. We use just library to HTTP requests. And later on to finish, you deploy your solution in IOS. During this course, we'll develop a single page that will connect to our database to handle US Institute Library. In this portal will be able to search for one specific library, my name, to add library, to edit any information in one specific record. And this change here will be reflected in our database. And also we can delete one required to discuss is intended for N developer that wants to learn core and reacts to build modern web applications. And also for any technology enthusiasts. My name is Victor and I am dotnet software developer who's graduated in software quality engineer. We've over seven years of experience in software development, project management. I hope you really enjoyed this course. And let's start by setting up our environment. 2. 2 Setting up the environment: Hi, In this lecture, we install the tools that we use in our course. Let's start by installing Visual Studio. For this, we are here in the Microsoft website. We click the visuals to 2022. Community Edition. Yes, click container. Now is the older the proper installer. And then in here we select components from Microsoft about Visual Studio, we want to restore this installation. So when you select Web Development, NodeJS, dots Nan desktop development. We said disruption as installed wind loading, and then we click Install. Now it's the load, all the software's necessary. Now we have Visual Studio. Now let's continue installing SQL Server. Engine is link. We scroll down in the developer option, SQL Server 2019. We click the loads. Now. When we click to open the installer, basic installation. Now, we can say some options during this installation. In our case, we will not change anything. We just co-produce connection string goes really use it later with our families. And let's say we have now installed the enzyme for the SQL Server 2019. Now we install NodeJS for the Core application using Visual Studio. It's required to have the Node.JS for the development phase. So when we're doing the development, we are debugging NodeJS is necessary. So let's install now. To install perfectly it installed. Now for us to confirm that we have installed correctly, Let's go open our aim here. We type. So we can see the current version of nodes that we just installed. One thing to point out is that when we install NodeJS, we also install npm. So if we type npm, we can see here the version as well. Npm is the package manager for JavaScript. It's online riposte, where we can fetch specific libraries. In our case, we use npm to get excellence that we use this library to connect the front end, waive the backend, and also to install this week. Now, let's start talking about 3. 3 Introduction to ASP: In this lecture, we will talk about current. is an open source web framework for beauty, fast and secure web apps and services within dotnet ESP, dotnet is also cross-platform. What means that? We can build your application on Windows, Linux, or Mac. And here we can see in extensive documentation about this framework, there are some concepts that I would like to discuss to make it clear for us to understand what is a framework Lead for an application because there's sometimes confuses us about what is ESP dotnet core, what is the difference and sharp and as well? What are the difference? So let's try to explain using this image here. First. In the base we have the platform. The platform is rotten and six. So it's like low level runtime environment, like a virtual machine that we run. We execute our code on top of the platform. We have framework. We have more than one. In our case, we are talking about Core. A framework is a group of libraries and APIs are Red Butte that provides the functionality that we can use to speed up our development. Inside the framework, we can develop our application. Framework, can use one or more language. So for example, we have core and when you use in Visual Studio, we can see a template for JS framework Core using CHR and VB. So framework can use more than one language, then the platform also supports. So Jesus, basically the difference between framework, latter farm and the programming language. Just to exemplify data platforms besides dotnet, for example, Java, Python, and PHP. platform was first released in 2 thousand job with the framework. Then just graph, we can see the evolution of splatter form. So basically it was released as well. And then in 2016, it was, it was created dotnet core. And then in 2020 we have botnet. And in here we can see that now have dotnet six. 4. 4 Creating React ASP: We will start creating our project. We open then Visual Studio 2022. And then in here we click Create New Project reacting. And then this is the template that we use core. We react JS, we click Next. And then here we select the location. We flag disruption play solution. In the same directory. We put the name of this project and then we click next. Here, gives me the framework that 96, in our case, we are not used, but we'll keep this option. And then we click Create. Now we have here the solution, all the components from the template, the red here. So we can build, compile the solution. As we discussed, npm is used to fetch library. So in this case, the first time that we are compiling solution is using npm to fit all the libraries that we're reacting. Finish. We can see here the insight client app. We click to show all files. Then we have Node models. This was created during, during the mute. So now let us think of as application. And this is the application running in our local host using reactor. And in the next lecture, we will explore the solution and all the files. 5. 5 Exploring project structure and key file: Hi. In this lecture, we will explore the structure of our project. The first element is the CS project that we can see here. When we click, we can see the details inside this file. Or we can just come here and it gets plotted file. Let's play the same screen. Inside this file we can see some specific configurations of all the projects, like the type of the framework. In this case, we are use dotnet six. What is the proxy and some others specific information about concerning this project? Next Should we can see this part here called the abundance. Inside this area, we can see all the dependence used by our Web API. So if we come here, we can see that now currently you have only two webinars. That is ESnet. Just remembering that our solution has two parts, the back end, the Web API, and a front end. That is that we now in our case we are using React. This area here only, this only shows the dependence used by our back into our web API. We want to see the dependence that we, our front end is using. Then we need to come inside, use vulgar client app. Just for the insights folder. There are other files used by our front end. In sight for this folder, we can see this back JSON. And in here we can see all the dependence used by our front ends. When each point that all dependencies that are used by our back-end, they are managed by nuggets. My institute called nuggets that we can see here in all dependence that are used in our prompts to install any sort of library in our, in our reactor. This dependence, they are managed by 2 called NPM. So in here, these are, this is the difference. We have true different package management solution. If we need to install a package for our demo script, then we use npm. That is a package manager specifically designed for GS application. In our case, we use JSON npm later to install this library called axis for us to do a HTTP request. And later on as well, we use nugget to install the framework for us to do that, the base manipulation. So we need to use different tools to install different packages. And this is where they are used. One specifically for JavaScript front end and the other for our back-end. Continuing, we have inside the folder properties, the file launch settings.js. Just fire is responsible to organize what would happen when we press the Play button. So we have different profiles and each profile has different configuration. We have as well, just file app settings. This is the file that we can use to put specific parameters and configuration that we use will need later on in our development. So for example, a clear simplest database connection string. We will put in this session file our connection string to access our database. If we return to the client that we need to note that inside this folder we have a folder called node modules. Basically inside this folder, all the libraries are the definitions used by React project. The front end will be installed inside here. So as we can see here, we have lot of files and all these deafness we can see in the package.json file. So when we execute the common NPM install, what it does is it will check use file and then you install every dependence there is inside this file. So in our case, our 1974 package or check it, analyzed, India's in beam stop. If we didn't have all these files are read in place, then that colon should install just levels. Just to clarify, when we executed npm install, we saw more than 1000 packets being outdated and allies. But if you open here, just fire, we can see Phil package. What happens is when we install the package using NPM. In the background, it installed as well all this dependence that this package has, that's why we can see much more package and dependence. Then we can see here. And finally, we have the most important file in this product, that is the program CS. This file is the entry point of the application, is in this file that we can see the application host being created is where you play. Later on. We'll play with the dependence injection and also with the HTTP request pipeline. We can also change when we use the customer middleware. And finally, we can see the Common App Scotland, that we've executed our application. Please note that in the previous versions of Visual Studio and upset, we used to have two files, program CS and Easter Seals. Now in this version we have only one that has everything. And in the next lecture, we'll talk about dependency injection. 6. 6 Dependency injection: Hi. In this lecture, we will talk about dependency injection. To talk about dependency injection first, we need to understand, well what is a dependency. So in this scenario where we have one class using another class, using another class is a dependence. Classwork depends on class 2. So in this case, in our solution, we will use the concept, the inks to code library. So let's say that in this controller, the controller, if we do the implementation of the code like this, here we have direct dependence. So controller is depend, is the painting directly from this library service. And here we can see that dependence. We also need to understand the concept of inversion of control. Control is a prominent principle that you reverse the traditional flow of communication. Here's an inversion of control says that objects do not create or the provisions on which they relied on to do the work. Instead, they get dizzy objects that they need from an outside source. And B, this context is called dependency injection or neither. So we have traditional approach. We can see that one glass use directly. They are the class that they need. They create these objects inside using the inversion of control. Okay? Grace book. All these dividends are injected into the class one. So Jesus, the concept of inversion of control. Someone else, some polyp components, in this case that Lebanon's injection on later, we will inject into the class whatever the class needs. Instead of the traditional approach, the class through 18, the object directly. By using this approach here we have a very strong dependence. By using this approach, we don't have dependence, is a strong dependence at all. Now that we know what is dependence in what is inversion of control, Let's talk about dependency injection by itself. Dependency injection is a technique that we use in order to achieve the inversion of control. So in this case, and just as an example, we have this controller where we have this method using directly this library service Jesus without dependency injection. And in here you can see I strong dependency. Using the dependency injection approach, we will remove this dependence endings that we will receive. The interface that really use better we will realize to do the work. And then we use the metal inside is interface. Using this approach, we can say that we don't know. Just may look at the code, which class, what will be the concrete, concrete class that we're as acute disk method, we only rely on the interface and who the who knows, which will be, what will be the class. The concrete class is that dependency injection container. So in our solution first we'll create a folder called dependence injection. Inside this folder we have create class. So here's an example called console greater insights class. We agreed. Right? Let me just click. Right. So this method we write in our debug output the word desk to independence injection. Now, what we need to do is to extract an interface that we represent this console writer. So in order to reduce, we can click Request come here. In this interface. This is the image that we want. And it saves. We have now the interface, we have the method we need. Now, the dependence co-planar with dependency injection of their needs. That whenever, wherever we need to use GIS interface, I can solve writer. They should just hope that it should send back this implementation and wedges dependence configuration in our container. We need to go in this glass program CS. And the line type. We're doing this, we're saying to this content Today's dependency injection container that whenever we need to use this interface, we need to send back instead does implementation. And just as an example, let's use this class here inside the controller. Why the forecast? For alright though when we use this template, this replica plating in Visual Studio. So let's take some time and just put here. So the first thing is to create a variable here called Microsoft writer. So Jesus, the interface that we use inside this method, we will say that this interface called the math. Right? Now in the constructor, we need this extra parameter and say that our local interface will be received in a constructor. When we pull it to the constructor that we need this interface. What happens in the background is that the dependency injection container will inject the implementation that we previously defined in just parts of the code. So now if we return in our controller, when you put a breakpoint here and here and execute. Now we just page, we click fetch data. In just a moment that dependence injection container is injected. The implementation of its interface here, as we can see here. And now in our method, we are now inside the colors that we use create few minutes ago. In if we accuse this method, then we can see here that it is working perfectly. And now for our next lecture, we'll talk about coastal medulla. 7. 7 Custom middleware: Hi. In this lecture, we will talk about customer middleware. Middleware is a piece of compliance that we can hook in the request pipeline to handle, to manipulate requests and response. So in this image here we can see the request pipeline that is performed by cancer using Core. In this case, it allows us to create, to use a variety of middlewares. In each medulla, we receive the request and we'll manipulate both requests buffers, and then sent to the next medulla that you sent to the next. And then finally, we return as the response. The pipeline specifies how the application should respond to an HTTP request can throw away the f2 is a web service used in JUCE application that lacks a lot of functionality. We, if we compare it with IAAS, but it's the one that is been used SP and basically induce cancer. Takes the request grocers and returns a response back to the client. And now when you create an application that will create this component discussed or medulla that we're receiving the requests and mu include when information in the response. And then we see this information. In order to do this, we use postman, that is a tool that we can send requests and see all the details in the request and response. So let's start. All right, so in our application, Let's create a folder called coastal medulla. And in here we create item and we recall my medulla. And in here we can see the predefined structure of this medulla and include them next. So we view as acute our code here and then we will call the next. So in our case, what we do is we will get a DHCP contexts. And in the response, we will include one information, let's say altar. And you include the victor. Ok? Now we have our medulla. We've just manipulation in the response including one specific information. And now what we need to do is include this medulla into the HTTP pipeline. In order to do this, we need to call this method here, use my meter, we can rename, but for this example you keep as it is. Use my medulla from this class here. So in our programs, yes, what we need to do is in here after the ROCE, use my door, we need to include the using, let's say now we create a customer and we put this into the HTTP requests. Now let's use Bozeman and see us working for this in our best. We will call this method here. Weather forecasts get because just because the medulla, they aim to the HTTP requests. So for this we need to have, we need to simulate these HTTP requests to see the response. So let's run our application. So now our application is up and running. For this, we will use Postman. And it's pretty much simple, could just come in this link. And now we'll dab. For this example, what we will do is to simulate the method call to the weather forecast. The response from this method is what we see when we click here. So whenever we click here, it goes through our back-end. And this method is executed in our code. Let's put a breakpoint in here. Just to confirm that this line here is being triggered. And hitting postman, we need to select what we are doing. Good news one we'll talk about later in doing our curves. But for this one now, we should select Get because our method that we use here is a to b gets. And in here, we'll just need to put our URL and then we can click Send in here. So our customer was called by the pipeline. It's been executed. Here. Below is the response. So above is the request where we can put some information. So we are doing a test in some sort of security API. We can come here in authorization and include username and password. This is not the case, but this is the request, but this one is the response part. In here we can see our payloads, our response body. And in here, we can see the header and the information that we just put. So this is how customer middleware works. Now for the next lecture, Let's talk about a framework. 8. 8 Introduction to Entity Framework Core: Hi. In this lecture, we will talk about the Framework. Core Framework is a data access technologies that enable us to access data using a model approach using objects. These also is good for us. The dotnet developers. It's easy to access data to see the data, manipulate as well, and also eliminates the need. Most of the usual data access code. If you see here, have the interim report. That is our ORM is an object relational mapping used by our application to access the database. And G's are the technologies that we are using. Just an example how this framework works, how we can see the difference. This line here is how SQL looks like. If we go directly to the database, select from schema and table. If we do the same using a framework approach, does is it looks like, as you can see here, there is no SQL code, is just C sharp object code. How does this work? In the back-end? In the background, if you're going into database, we can see the table with the columns. We have the tie and all the definitions in a database. And in our code, the same table library is a, is an object, is a class with the same configuration here, same columns that we have here. We also have here. And we can include some validations, just like we can see that this address is required. As we can see here. We are not obese that this information is also require. So we create the model in our C-Sharp code that we can use to access the database in a very easy way. And that's why it's called object relational mapping. Because we map our objects to be similar as our schema in our database. Cage framework support lots of different database. Now our case we are using SQL, but also we could use Oracle, MySQL, SQLite in much others. So this is the technology that we use in this course to access data in our database. And in the next two lecture, let's install regular. 9. 9 Configuring Entity Framework in the project: Hi, in this lecture, Let's configure for solving in our application right-click Manage NuGet package. We put Microsoft Framework Core, click and install accept. And that's it. Now if we come in dependence packets, we can see here ancient framework. Now have eaten, stopped is installed. Now we need to stall the provider as Q, L. As we discussed, we can use this framework to handle, to manipulate lots of different types of database providers by Oracle. But in this case, we'll use for SQL Server. So we need to install as well JUCE library using the same version as we installed the Framework Core. Let's install accept. And that's it. We can see here these other dotnet dependence. Let's now create our data contexts in our solution, right-click and class. And let's create data complex. So all the communications between our obligation and the database will happen through this class. For this, we need to import framework library. After is we need to come in our program, CS will come our contexts. And that's it. Inside this one here, we need to also include one specific configuration that is the connection string. And this connection string will connect J's data contacts with the specific database. So in here, we should put include this library. For now let's just put connection string. We put this connection string in our application settings and reread religious information from here. And also, when we do this, it means that we are doing something in the constructor of this class that contexts. In order for this to work here, we also need to create a constructor that we received information from the different contexts. And we're saying to the DB context class. So when we do this, we are saying that for this class to exist, we need to receive the options, the cortex options with the connection string that we will receive and send it back as well to the DB context. So just to clarify, what we did, we first install a framework for libraries, and then we create the IEP contexts. This class will be the one that will connect to the database to retrieve our data. In our case, our library entity. This will be manage used by the library service that we will create in the next lecture and the next class, we'll configure our SQL database table. 10. 10 Installing SQL Server: Hi, In this lecture, we'll install SQL Server. In the previous lectures we install SQL Server, but it was only the database in Jain, what we stall now you'd be the GUI Managed SQL infrastructure. So we can see the table and we can create the table and database using a graphical user interface. Produce we need to account and install the SQL Server Management Studio is the GUI to manage SQL. So we come here, node timescale, and then SQL Server Management Studio. And the next lecture, we'll create our database table. 11. 11 Creating database and tables: Hi, In this lecture, we'll create our database and table. So first, let's open SQL Server Management Studio. We click Connect Database, new database, and recreate it, put the name of our database, ESP, dotnet and react. And that's it. Our database now is created. Now we can create our table. Now, we will create our table will be for library. The first column ID. The type will be int, should not allow, no cause this column will be our primary key. For this. We need to come here in and C ES, and this will be roughly increment. Well, so whenever we have a new item, the column will be incremented one way one. The next column you'll be name. The type will be char, should not allow noise. Well, let's strengthen. The terms will be endless. We'll be any workshop. And this gives me 100. And also you're not alone. No. Telephone to be any varchar 15 for this one will be, wow, No. So that's it. Now we can save. And now we should put the name of our aid in this case will be Library. And if we refresh it here, Library. In this lecture, we create our table in our database. And the next lecture we'll create our model in our next project. 12. 12 Creating Library entity in the project: Hi, In this lecture, we'll create the class library now project. So let's open our solution. And the first thing, we create a folder called model. And then we'll create another folder called introduce containing here we agreed our class library. This class will follow the same model, the same model that we just created, the database name, address and telephone. Or if you save information to reveal this in here. Telephone. Now we need to do some configurations regarding aims to failure of the first one is what is called the datum of the glass in the base. In our case would be the same. But let's put here. We need to import this library, not the notations dot schema. So now I am telling that this class that in my product is called library. In the database instance framer can find the same stable called Library. And this one here, ID will be our primary key. And the name will be required. Property. Here's one here. Required is the same as not know. If we see here, this is the same thing in our key. That notationally we just put key is the same as B, k. So let's container. Name will be required. Address will be also required, and the telephone will not be required. For this. For this example, I'll just use this learned that notation we have. That is much more that we can use to say how much, how many characters we can put the address in our database. We can see that the limit is 50 and 100 and 15 for this class, these properties, I can also put this one here, the minimum. The maximum. If I want, I can put a regular expression as well to say how I want this name to be inserted in our database. So let's just keep it simple. Just reproduce properties. So that's it. Now we have our model created in our solution and just read in the property ID, our primary key is not necessarily required because GIS information here, we will automatically be populated, incremented by h. So now let's just create another folder hearing a model called the 0. That means data transfer objects. And let's put disclose here whether northwest inside this one. Now we need to come together the name of this glass in the data contexts in here, great DB library and the name UB Libraries, get and set. Okay, so just to give a bit more of a clarification, just one. The app data contexts is the class that will directly access our database. That means rewritten our entity in our case with the library, to update the context. And update contexts will be accessed by library service. So basically. For each entity will have, we need to have a library service. And in this library serves we have our, our methods configured here, like ads, the delete, search, and just glass here, you access data context, that database. When we create in our product, this DB set, it means that for this class here, I want to associate database table. And which database table? If we click here, it will be this one here. So let's create our serves library service. And then here, the first thing that we need to upgrade is our constructor. In our constructor, we need to receive that data. For this, we need to create our meshgrid is variable with the context. Let's call it contexts. All right, now let's create the methods that we want to access the database. At this point. We will not do the fluid limitation. We just create the methods, right? Just a skeleton. So let's create our first marriage, but then we have another map. My name is case where you will see the name. Our methods to include one entity that the base, or at least we will receive that. There's a barometer. And the same thing for updates. And also for right. Now we have our interface, we Dowling for implementation, but we have the interface that we will use. Now what we need to do is to right-click here or here. And then struct interface. We use the same name I Library. We don't need these properties, just the methods. No heavier also the interface. Why do we need this interface infrequent here in our diagram? As we discussed previously. Because of this dependency injection, library controller cannot access the library service directly to the controller. You access the library service interface using dependency injection container. So for this we need an interface in here. So if we return to our project, we now we need to create to add this dependency injection. So what we do is pretty much the same as this method here when we discussed about liveness injection. But in this case, we'll tell the library service. So every time that this interface will be necessary, then dependency injection container, we return the library service. And in our next lecture, we will implement the metal. And we will see how did they throw database framework. And our controller. 13. 13 Creating GET method Entity Framework: Hi, In this lecture, we will implement them. So let's come to our project. And in library service, in the Met get 0, 2. We use a context and that is our AppData contexts, that is declares that directly access our database. We'll say contexts, dots. Libraries. That is a class, that is a property that represents our library table to list. So when we the math to list, at this point, only here, we ain't framework. We, you execute the query in our database and we written all the data inside the library. And two tests, it will use our weather forecasts controller the same way that we use for to explain about dependency injection. So let's talk about Get a Library. And in here we will return a list or library. But first we need to come here in our constructor and say that I need a glass interface library service. So let's declare a variable slit. Here. We'll call that method and let's put a breakpoint in the application. So let's configure our connection string, string. String, in this case, to access Windows authentication. And now we come in programs here. We replace this by dot, get connection string, the name of our connection string. Before we can execute our application, let's come to our database. And if we select all the rows, that is not here. So let's put some data in this table. Let's put a label now, right-click Select. And then we have some data in our table. Nurse to keep our project organized, I will create here a folder called SQL. And then here I will create a file to save our script. The script here, we can create our table directly eat SQL, just one here we can insert. Now let's return to the controller and our obligation. Now we're clicking fetch data that will come to the weather forecasts controller in the get. And then here we execute this instruction. And then we can see our data retrieved from our database. Let's now implement the get by name. Now let's return to our library service and implement this method. We will use that is acquired since that's where we can use in CSR, CTR. Here we will declare a variable called link. When is it good? For now, it's not going to the database and just creating the query, but we doubt, is it tilting square? So now we check and we have this parameter. Then. What we do is in the link include what is our own nation. And we got to this point, the query will be executed. So let's put one breakpoint here to see the code running. In here. Let's do the cutover. Now fetch data, get my name. We enter, then we can see our firm. This is our link. And if you have this fall under, then we include the extra condition and we return our data. So now we have only one. 14. 14 Creating ADD method Entity Framework: In this lecture, we'll create the metal courage he named framework. So let's come to our solution. Here. Let's create the name will be best. 5, 6, 7, 8, 9. Now, we will call our library service Save and New Age. Right now Let's configure our method saved in our libraries. In our labor service. Let's go to the break point. And in here you say libraries, library, and then context dot save changes. And so what we are doing here, we are putting our, we are adding our entity e to the z, be set for library, and then we are saved in the chains. When we do this framework, we'll get to this element here. We are going database and then you include using in our database. So now let's test this solution. Let's return to the controller and our breakpoint here. Let's first come to our database and then go and select Library. So now we don't have any agents here. Well, let's execute our code. Let's click and fetch the data. Now, we are creating this new agent. To note that when we create, by default the ID is 0. Just when we add this in our database, then these ID will be automatically incremented, let's say FL1 to enter the method. Now we are adding the idea is to 0. Now we save the chains. And then the idea is 21. Note now that the ID Screen1, because when a saved the chains, it saved to the database that the base has constraint. That means we automatically increment this ID primary key to be unique. Because as a primary key shouldn't be our unit value. Then in this entity after that. So that's why we can see here this number 21. So that's it. Five to finish. Now if you come to our database and then breaths as a cookie scope, then you can see here our entity. For next class, let's implement the method update. 15. 15 Creating UPDATE method Entity Framework: Hi, In this lecture, we'll implement the method update. So in here in our weather forecasts controller, let's start. First thing you do when you retrieve the library that we want to update from our database. So let's get by name. First. We need to put the first-order full because if we come in our library serves the metal gate by name, returns a list of library. So in our controller, I just want one. That's why we put here first are the four. So now I am retrieving our test library. Will update the name, its name to whoever. And then I'll call our eye level service dots. Let's put a breakpoint here, and then let's increment. Let's implement our method updates. So in here, the update will be a bit different from the same. So first thing that we need to do is to retrieve GSA entity from our database, again, without the modifications that we did here, because in our controller we change the name. So we got this H from our database. We change its value and then we send to the method update button here. We need first to retrieve designs as it is now in our database. For this contexts. Libraries. First, where my ID from the database is the same as the ID from here goes as the ID is a primary key, it means that it is the most relevant information that I can use to retrieve images into our database. So now I have the ancient enough for my database without a change. And then I come here, let's say context in the Lyapunov 2s1 here. So contexts, metal here, entry provides access to the change tracking information. So when I put this entity here, It's framework, we'll start monitoring what information was changed from this one in three gods. Current wearables, search VR Library. So now I'm getting this data from the database. And I say, I am asking to arrange framework to look at these library and then update the value to the values that I just received here from our parameter and then contexts. And we return the integer. Let's return now to our controller and then run our code vector data. Now we retrieved from our database the name, your address. And now I am today to protest library update. What I'm calling the microplate. Can hear Jesus the same one from the database without them. Then including saving. And then we have here our library database with the name Pompeii dated. And then let's put a five. And then we've come to our database. We can see here the name was updated properly. And for our next class, let's implement the method delete. 16. 16 Creating DELETE method Entity Framework: Hi, In this lecture we'll implement the method deletes. So in our controller will start. The library. First thing that we need to do is to retrieve it this industry from our database. And then we call our service, delete this information. Now let's implement the Met delete in our service. And our service. We go complex entry stage, stage. And then low setting here we are using the same information that we use here, dot. So interworking start monitoring this entity here. But different from the previous method update, where I need to use the H from the directly from database and then build a set of variables. Here I'm just change the state of reduce overuse injury in our database to the stage deleted. And then I'm saying two framework to save this change. And this point will be deleted from our database. So now let's return to our controller. Let's put a breakpoint here. And then in our database here. Perfect. Now let's execute our publication. Now. In three. And then in our database. This register is not here anymore. So now we have implemented in our library service all the necessary methods. That is the create, read, update, and delete. Now for our next lecture, Let's talk about, Core Web API. 17. 17 Introduction to ASP: Hi, In this lecture, we talk about Core Web API. Core Web API supports creating a RESTful service, also know as web APIs, using C Sharp to handle requests. For this, the WebP I use controller. If we come in our solution. Just an example, this welfare Cass is our control that all of our inputs and methods. And then this controlling most derived from controller base. If we remove the base, just as controller, then just will not work because JS means that there is expecting for every method here to handle as well web pages, just as in a normal MVC project. So that's why we India, we just need to say derived from uncontrolled base. So every metal here, we're not written a page, but we return data if necessary, to our controller written both data and pages and web pages, then just derived from controller. And then some chains will be necessary in our solution. We want to do, we are not written any web page, just date. And so this will be a completely Web API controller without returning pages. So let's just derived from petroleum-based inlet. It as it is in our controller, we can see some API attributes. These are necessary to specify the behavior of the proper behavior from this expected API. So in here, for example, have the met yet, and then we should put the HTTP verb as HTTP GET. So in here is how we can describe and look properly the documentation of our EPI. And just to explain a bitumen about this project here, when we talk about back in, we're just talking about our Web API. The Web API is the piece of the solution that we received the request from our UI. Then we use requests. The web API will handle your butt to change the date, to delete the entity, and then you send it back to the UI. All just part that is known in the back. It's handled by the way we PI. And then the, basically the entry points for our web API is a controller. In our case, we're using the wet for guests. But then in his model you create and you control for how to handle all the methods that we create in the model. The previous model, that is the create, read, update and delete. And then you also derive from controller base. In here you can see uses the controller and our front-end, basically, it's everything, every file that is inside the client. So now let's create our controller in the next lecture. 18. 18 Creating API controller and configuring: Hi, In this lecture, we'll create our library controller. Why we pay projects in when you installed swagger as our documentation to. So in also ocean. Right-click controllers and nucleus in hearing API. And we select Controller. And let's call library And Visual Studio makes our very easy to create a Web API as we don't need to configure anything else. So by default, the road is here. In our case, we just include one more parameter that is the action. We'll talk about this later. But basically, in our root, when we call this controller, we need to send api slash or Control and in this case would be library. We don't need to put in our request the word control, because by default, this framework, the web API framework will handle this. You identify that DCIS, our controller en slash action, and our action is our metadata. We will implement later on in this model. So for now our controller is created. It is our control derived from control ways. And then let's create our property or variable i library service that reuse later on in our API. And in here I, I call this. Here. We need great our constructor. In our constructor we receive this level service. As we discussed previously. The dependence container. We'll inject the concrete glass for our lab reserves in here that we have to do is prompt here until our control this gradient. So now let's install swagger, those NuGet package for solution rows. And then in here we find four. These are Swagger Tools for documented APIs. Let's select the project that we want this to be installed and then install. Now it is installed, we need to configure in our program CS. So in here. So in here I am adding the service or Swagger. The data that we appear, you'll be Core and the version would be v1. As just as the swagger documentation for API. Whenever we need to change our API version, we just can come here and put one dot one or two. So now in here we just include the service and now we need to include some extra configuration. So after this file, let's call F dot. Now in here we define the endpoint is slash swagger. So in our group, when we run the application, we can put a slash swagger. And before running our obligation, let's compete and delivery controller and create one. Yes, we're still seeing this in our documentation. Alright, now let's run our app. Now we can see our swagger just by quoting is less. But please note that 50 to just put here is the Brock. Where can we see this in our solution? If we right-click here init file, we can see that Brooks URL is 5, 0. This is the port that we can see here when our application is up and running. But the real part that is behind this Brooks, we can find here properties launch such as JSON, as we are using HTTPS requests in our URL. Jesus, the re-import that is run five O one. So for us to see the swagger, why we are running locally, we need to put. And now we can see swagger. And here we can see all the controllers that we have in this case library, well, for request and which method would have here only we have get, but after we implement boasts, an OT and delete. And then we were able to see here, if we click, for example, the weather forecast, we can see that this metal here doesn't receive any parameter. So if we come here weather forecast, we are not receiving any parameter here. And we can try out and simulate these requests. And in here we can see the response. For our next lecture when you implement the get method. 19. 19 Configuring GET method API: In this lecture, we will implement in our controller. So let's change gears parameter. Here we return lists of library service. Okay? We will also implement as part of a two to get another called search. Search string parameter with the name of the library that we will search in our database. And then in here, we change this by, get my knee in, we're doing for our barometer. Now let's run our application and see. So in here, if we change the port to the backend for re-application, not the proxy that we discussed in the previous lecture. And we put Swagger. Now we can see both methods in our library. Let's test. The first one gets 0. It is working and is returning the age sworn our database. Now let's test the method search. Now we can say that is a parameter name required for this one. And then let's try with any here we can see the response. In our next class, we implement the method update. 20. 20 Configuring UPDATE method API: Hi, In this lecture, we'll implement the method copy date. So in our controller, let's create the mantle. The reverb for update is a library. And then we return our library after the update in collimated library dot update. This is our update method. Now let's run in here open Swagger. Now we can see the put method here. Try this one is a bit different because we need this with JSON. So first let's come here, insert a lens. This is the JSON. For. Now we come back here. And I would change this name for I just included one word here, the same port, address and execute. And here's the response. Now let's test again in the search to make sure. Now this is correct because acute and it is here copy data. So our update method is, Let's just change this back. Density again. And in our next lecture, we'll implement the end Kuwait matter. 21. 21 Configuring CREATE method API: Hi, In this lecture, we'll implement the create method in our web API. So let's open our solution. And then in here in our library controller, let's create our create method. The create a to B. I call it save, my entity. And then you return, okay? My Library Service dot save. So this is our method to create a library. Let's run our application and test it uses swagger. And now we can see the new momentum here. Let's test. It is expect JSON use in the backend will be converted to the object. So any here, we don't need to inform the ID because as we discussed is will be incremented automatically in our database. So the name, let's just call this library. There. There's just address and the telephone, 1, 2, 3. Okay, that's good. And in our response we can see the idea here now is 22 and others is here. And if we come to our search, then we try to search for tests. Then we can see it here, our library. And in our next lecture, we implement the method delete. 22. 22 Configuring DELETE method API: Hi, In this lecture we implemented the metal delete nor controller. Let's put the actual results. Delete the same parameter here. Then I call our library service. Delete. Okay, in response. So does our mental delays in our web API. Now, let me stop this one here, save and run it again. And let's test this. So in here I am expecting a JSON. So let's search for our library desk. This is the JSON. Let's come here, delete. And that's it here. And the code is 200, it means success. Now, if we come here and try to find, to search for this one again, then it's not here anymore. It was deleted successfully. And now we have finished our, our Web API configuration. Now in the next lecture, Let's talk about reacting. 23. 23 Introduction to React: Hi. In this lecture, we will talk about React. React just JavaScript library for building fast and interactive user interface. Library was created in 2011 by Facebook. And as we can see in the Google Trends, reacts is still dominating the space for libraries to build user interface. Some companies that uses reacts, Facebook, Instagram, Netflix, Uber, and much, much more. The heart of React application is a component that in summary, is a piece of the UI. So in this example, website and the web page, just sort of scripture is a components folder signal. Every component, every piece of the UI works independently from the component before and after. So at the end of the development, we have a bunch of components that forms our page. Every React application has one main components that's called is the root component. And this component represents the Daniel application and container or the child components. And one child component can have on the child that can have other child's. And he just models we're talking about much, much more topics regarding reacts gives us drops, stage refs. So in our next lecture, we'll talk about JSX. 24. 24 JSX: Hi, In this lecture, we're talking about JSX. Jsx stands for JavaScript XML. Jsx is a JavaScript syntax explanation for that allow us to combine both HTML and JavaScript code in the same file is not required but strongly recommended as it makes lot either develop our React applications. So in here we have two examples. The first one is using JSX. So in here, inside these elements, we can put an HTML tag directly in a variable. And then we can just attach this verbal in our document by using React DOM. Without using JSX, we need to manually create these elements, as we can see here. So by using JSX, we can make our code much more clear and festivals for us to develop our applications. The browsers don't understand JSX syntax. So in order for our code, our React code be compiled, run in a browser. We need medulla, something, some component in the middle to compile JSX code to JavaScript. And that's what babble does. But there is a JavaScript compiler that compiles JSX JavaScript. So if we come in the Burberry website, in here we can see an example and we see if we click here, try it out. We can see that this code use JSX code is compiled. It will create HTML elements. So G is the result after the completion. And in our next lecture, we will talk about virtual DOM. 25. 25 Virtual DOM: Hi, In this lecture, we will talk about virtual DOM. To talk about this concept, first, we need to understand what is done. Dom stands for Document Object Model. Isn't programming interface for web documents that basically represents the page, the web page and allow us to handle, manipulate its components. And that example is just three components that is represented by the document. The root element is a document. Inside it, we can have all the HTML tags. Like a tree. Beautiful dome is a programming concept where virtual representations of the Y is kept in memory and then synchronized with the real DOM via libraries such as reacted on. Virtual DOM is a strategy to update the DOM without having to redraw all components. It also allows a faster UI change manipulation. Once we are not touching the dawn by itself directly, by changing our in-memory don't end in our next lecture, we'll talk about components. 26. 26 React Component: In this lecture, we will talk about component. A component is one of the core building blocks of React. Everything in a web page is a continent. The header, the footer, the main content, each piece of the UI. In React, it's called components. We use CDs in more details when we start developing our beach. Basically we have the root component that's called app. And then under this component will have the child components where each child can have as well another child. So everything is a tree of components with the main one app. We can create a component using two different syntax approach. One is the functional approach that returns are plain JavaScript function. As we can see here, in only five lines, we can return on component. And the second one is competent approach. That basically is a JavaScript class that extends React component. Inside the matter render. We return our component. There are pros and cons in both approach. I not go deep in this discussion, but in this course, we use the functional component approach as it allows us to develop shorter components in a simpler way and in our product, let's create this two-component to see the difference. So inside the client app folder. And then I start creating our components. And the first thing we need to import and export class. We need to extend this class. And then in the method render, we should return HTML. This is our first component, Don using the glass combined approach. Now to put this one to show just run in our 0, Let's come showed the JS. Let's create one. For JUCE components. We use say that the rule to access my class components. And now we need to assign Gs. You are L here to a component for JSON, each come up JS. And then whenever it called US, here, we should return our. And then we need to select this component and say that for this, beth here, show News components. Let's run our application. And then here, if we click here, we can see our components displayed in our interface. Let's return to our products and close my glass component. And let's create our functional components. So instead of my compound script, and then we'll create our function. Call. Basically the same thing that we are here. So we are creating our function. We are, we need to explore. So does our functional components. Now we need to come in the mouth and do the same thing. And then in our pep JS, we assign this role to my functional component. You'll be my functional components. Note the difference when we are important, a class component and a functional component. Let's now run our application. Now we have our inquiry functional component. In here. We have the same returns telling our functional component is up and running. And in our next lecture, Let's talk about ropes. 27. 27 React Props: In this lecture, we are talking about prompts. Prompts is transform properties and use a special keyword in React that's used to pass information from a component to another component. So in this diagram, we have some components and the way that we can send information through them between them is using crops. In this example, we are declaring coconut cook, welcome. And we have seen the property name as a tang. Let's hope grubs are used in affirmative of HTML tag. So we send this block named Sarah and then cite the component. We receive the props that can have more than one. And we say in brackets, crops dot. In our solution. Let's show our functional components inside the fetch. So let's come here. And then in here, let's declare our and run our application. Now in our foo, in our fetch. We can see here our functional component. The concept of component means that you can use it in any other place you're in. Slide is an independent. So of course that we can reuse inside other components. So in our case, just to see how props work, I put this functional component inside, the weather forecasts components. And then in our code, send a parameter name. Alex. Inside our functional components. Say that I received the props. And then in here, just show the name. If I have this information, the entire show that arise, I shall we say. And then in our UI we can see the name Alex. Alex is they wanted to be sent from the components for today's weather forecast. Now if we come in our functional component, that name is John, because Jesus name here, we are not receiving from another component, but in here we are receiving from another company. And in our next lecture, Let's talk about effic, hook and lifecycle methods. 28. 28 React Effect Hook and LifeCycle Methods: If I took or React, is a new feature introducing the reactive version 16 dot that allows developers to use state and life cycle methods inside functional components. We can use lifecycle methods to execute actions when our components is being created, we can hook juice. Moment when our complex created the touristic good. Some actions such as fetch data for now our database to display in our UI. And also we can do some actions when our component is we destroyed. We can hook both moments during a component lifecycle. So let's go into our solution. And in here, Let's create our first function that will be the components. Then we'll display the message to render. Let's create another function for the components. And then in here, I'm leaving the company. So just function will be executed when our component is being creative and use other when our combined is being destroyed in order for us to use to inject these two functions into their lifecycle of the component. We need to use. The effect hook for days when you come here and say Use effects. When we do this automatically, we can see these are important. So use effect. In any case. Miles. Return. Here's the syntax for assumes both components, reacts life-cycle. So now we should come here. And let's run our application. And any here, if I click the function components, I can see the component is rendered. Any failure. I consider message limited component. The same applies even if its scope plant is being rendered inside another component. That is the case of the fetch data, where we put our functional component inside, use other components. Here's the same thing. Component Rainer is here. And if we live, we can say the same message leaving the components, react to have some hoax. One of, one of them is the fact that this is a cuter when as part of a side effect of a change. So for example, when the complainant mount the sound effect is true as you go to this event. When the complexity is leaving, when we are leaving the component or we are destroying. Then executed use or the metal here as the side effect. Then the other very popular hook is the statehood that we'll discuss in the next lecture. 29. 29 State and Mutability: Hi. In this lecture, we will talk about stays in a state we can define as a group of observable properties that control the behavior of the component. It's an object that holds some information that may change over the lifetime of the company. And whenever reacts detects a change, it calls the render method to render the UI. It's important to understand the difference between moods, ability, immutability, state, and prompts. Mutability means that appropriate can be changed. The value of this property can be changed during the lifetime. Immutability is the opposite. Also, we assign a variable or a variable, we cannot change anymore. State is notable because in the lifetime of state, a lot of different values will be assigned to it. So you actually reacted, can detect this change and then render the complex again. Props. The other way round is not mutable. We received a prop from an external component and we don't change information anymore. So just to be a bit more clear, inside a component, we have a state that as we discussed, there is a group of variables that are observable. And whenever a change is detected, then the render function is called probes. We received from an external inside the company. And the result of the component is an HTML element. Now let's go to our project and see how it works. So inside our components, first thing when you declare a mistake. And this is the syntax to declare a state where we put a boat in abuse, COPD, the eight. So let's create I state that will hold information about age. Produce, reuse the US State. And when you declare the initial state. So when we put here, it automatically comes in the input. How does this work? Here's the name of our state property, and this is the method that we need to use another short date, the stage. Well, obviously, we cannot update in other way, in a different way other than age for the rise, react to want. That text is changed. So we need to use this method. Let's start. So when you put inside our components, the formation of the age, I also wanted to increase and the decrease this information. So regret when working to increase or to decrease that. We are calling inside the metal, the metal set to update the state. Now let's see our page. So in here, we can say the state aid and we can increase our degrees. And in our next lecture, we will talk about event handling. 30. 30 Event Handling: Hi, In this lecture, we will talk about handling event handlers, determine what actually should be taken whenever an event in the UI is fired. Just going to be a button click or a change in our text inputs. Essentially, even headers are what make it possible for users to interact with our application and hold this event handling work in React. So we have our application, React application. In between our obligation and the top, we have our IPO Don. So whenever a user does a change in the way, it changed the React DOM that we change the dawn by itself. And then they're done. We'll return the event to the virtual DOM. And in our application, we can handle this event. Let's show this behavior in our code. So in here, we'll put our age information that we create in the previous lecture inside an input x. That way you create events to handle this change. So in here, we put the value because one here, great unevenness to handle this. Now let's run our application and see. So in here, if I press the number 1, I can see the alerts age has changed. But note that these information here was not changed. Why? Because when we change it as informational, now, we have, we are calling this method here, but we are not updating the state of g is information. We are updating or just when we click the button. Then in here we can see the set age, but not when we are handling chain. So in order for j's information should be updating the UI properly. We needed to in here, age in our element by the user be a string. So first we need to convert. Let's just fix this tag here. Save. And then in our page, if we change here, now this information is changed it properly the same if I click this button, note that the alert is just displayed when we change our input here, but not when we change in here. That's because when we click this button, we are not changing this component. We are just changing the stage of disinformation. But when we do here, when we change here, then we're manipulating these components. And now let's manipulate the handling event onclick. We have some extra parameters. Let's create here. It goes about our data in here, or you receive a parameter just as an example. And then I explained using the string interpolation syntax. So display name we are at. So if a is not empty, then splayed, otherwise. We just received. In our long-term. We'll put these events in our click Save. And then in our page. If we click Show Details, we don't see the telephone because we are not passing this property to our show details. As we know the truth. We need to come here. And then in here, in each group. And the number, this would be this number. And now if we refresh our page and click here, then we can see the name, the age and the telecoil. If we change the age, we can see here, as we all know next lecture, Let's talk about conditional rendering. 31. 31 Conditional rendering: In this lecture, we talk about conditional rendering. Our project. Let's write the first approach to use conditional rendering. The first approach we will be using if else. So in here, let's create momentum. And if it's higher than 25 elements, hi. So in this function we return 1 p elements that will be different based on the age. So in here, we'll call this method. If you say, if we open our page here, we can see Joan have spread years or less if we change 26. As modern bad news is the first approach to use conditional rendering. Now let's see another approach using ternary operator, similar as what we did before. But in here, I will say that if the 25 then returns something, otherwise, we're done. Another thing here. Here. I can see in this example here as well. Working, working fine. Now let's see another example. Using a very common way to use conditional rendering is short-circuit operator. Let's see. Here I say if the age is higher than 25 is the green part. Just because I say that if this is the second part. So in here, I am checking for the John has more than 25 years. If it is true, then I would go something. This is seen as an if statement. But without the else here have only one to undo shop and one possible return. So if we want to do the same word, if is less than 25, The arrogance. And if we save this condition here, or trying as well. Now, the last example is using immediately where we can use switch. Great. Well, now if we see in our page we have the conditional rendering then is also working as expected. Again, in our next lecture, Let's talk about iterations and how to manipulate a list of objects. 32. 32 Iterations: In this lecture, we're talking about iterations and how to manipulate a list of data objects. So in our project, the first thing that we do is to create. Business. Users. Have the following day. So does our list them here. We're create a list. First example, use a list of elements that we create a goal. So here I create this list. At least. You select my list dot. Now you map the items of this list, and for each item, I would call generic user. And for each user, then you do something. And what you do is this element and the key organiser elements. So in reaction, for each iteration, each item, I need to have a key. So in order to identify which element is this. So in here my Q dots and then released. We're in here for each user. I am creating one list item with disinformation. And this is how we can create a list of elements. And then in here, in our iteration, the first example, I will just show this list. And I say, and then in our page, I can see our list here. Now let's do using a different approach. It isn't duration that we are doing here. You're doing say, our return codes without having to create another variable. So in here, dot map, It's my first save and return to our page. I can see here the same list. Now, let's talk about forms. 33. 33 Forms: Hi. In this lecture, we are talking about Forums. Forum is a container of elements that allows users to enter information, to enter data that is then sent to a server for our back-end for processing. So in our project, Let's start creating some data here. And in our example, we create a form where the user can enter his or her name and then click the button, Submit and messaging you appear simulating processing. We use inflammation. So the first thing we need to create a variable called username will be a States. So I need to do the initial David creates on matters that we will allow the user to change this. You create that will simulate the Submit when the user clicks the button to send data. Now, we'll create the form by itself. Form has one very specific tag that is triggered when the user clicks a button weekday, superior it. So in this case will be handle, submit, a label, the state, username, and the chain will be handled by our use. And other inputs. We looked at. Supplements tend to be the name of the button. Save and run our application. Here, functional component. Now we can see our form. We did the full name is David. We can indeed. And when I click Submit, we are simulating our back-end processing. In this case we're just showing the method from some omitted variable, David. So this is how we can, hello, you can use for insights, reacting. And in our next lecture, Let's talk about refs. 34. 34 Refs: Hi, In this lecture, we'll talk about reps. Reps stands for references. Reps provide a way to access the React elements created in the render method, and then we can execute some specific actions with it. So in our product, what we will do to explain this concept is when you create joy inputs, one for name or the telephone. And then Clear button, where you clear the contents of each input n When you give focus to the first input. So let's start. There should be more clear. So in our page, we can see that no two inputs here that the name telephone, we can't change because we are not using state here, so that's fine. But the question is how we can click here, clear, this information from US imports, news import, and give focus to genes element without using the state. This is all we can use refs. We can create one reference to these inputs, introduce other inputs in when we click it here. Then recall the clear, we can remove the cortex of both inputs with both elements. So no product. Let's create first, the first great reference for the name. Reference. Initially it will be no. Great another reference. And then in here you create a method that nuclear reference fields for this element. Knowing here, we will say that it isn't both the reference, the reference in. When we click. In this clear, let's confirm if the US is here, is not here. So let's save and then let's CRP. Okay. Now, if I put something here named telephone, when I click, the Clear fields is removed and the focus automatically assign the previous element. And this is the main purpose of using reps. So we can assign the reference reports and then change its behavior and information. So in our next lecture, Let's start designing our library page. While our library single-page application and installing x was tremendous, HTTP requests. 35. 35 Adding Axios and designing the page: In this lecture, we will start creating our library. And then you add the extra library to handle HTTP requests that we use in the next lectures. So in our project, Let's hear components, my combines. Let's create a new component called Library assigned to it. And then in our nav Menlo, we need to assign a name to respect in our homepage. So in here will be the road that this link will call. And let's see if you're all in run our application. Okay, Now we have our re-entry and when we click here we can see level. Perfect. Let's continue a designer page. That's great. The search area. Let's start. The space to include library. Okay. Okay, let's see here. Space. Now let's create a place where you see there. And perfect, Now we have our space to show our libraries. When we click Search. And just to talk more about your scores. In here, I use Bootstrap that was already installed when I, when we create our project. Here instead of version and not go Gb in Bootstrap. It's a huge subject. But in here, I can see that I'm using Bootstrap to organize our elements. So for example, in this part here we have one row with two columns. We can see it here. We have one row with two columns. One column responsible for the search. And the other further new library. Here I'm used for the search for columns. And in here eight columns. This is called grid system. And we can see, and we can learn more about it in the Bootstrap website. In here, we can see much more information about what it is, how, what else we can use. Now let's install. Use the library that we use. So tricky here. Let's stop here. And then just need to know next lecture. Let's talk about cross-origin requests. 36. 36 Cross Origin Requests (CORS): Hi, In this lecture, we'll talk briefly about course. Course. It stands for Cross orange requests. End is a security mechanism that defines our way in which a browser, a server, both can interact to determine whether it's safe to allow the access from differential or these different orange and also is called as cross-origin requests. When the security mechanism is allowed, we can see just sort of message. It means that this address, the request to reduce address these requests can be in order to retrieve an image. So media, the requests to this endpoint here to this address has been blocked with cross points. So what does it mean? We are accessing a page. This page is hosted in a domain, a corn for example. And just page is trying to get some resource. Some agents on emerged from a differential domain. In this case it's simple domain V. Course, we'll check if the origin is the same. In this case is not the same, then you block these requests. Genes, you not be allowed us. This basically is what it stands for to allow just same origin requests. If in domain B, we configure properly the course policy to allow Jesus or even requests from this orange. Then this will work. Then the requests will be allow it in our application. If we want to do this, then we need to come in the problem sets. And then in here, we should allow specific specify which will allow in the method specific requests for. And specifically, we want to allow any sort of request regardless what is the orange, then we can just come here. And by doing this, we are allowing access from any header. So that's how we can configure this in our application if it's needed. In our case, we will not be needed. N Low. Next lecture, we'll connect to our back to get libraries. 37. 37 Implementing Get item in the websitet: In this lecture, we will implement this search mechanism, join data libraries for an hour, decades and splay them properly. So in our projects, first thing first, let's create a state that will contain the list of our libraries. And this is an example. Here, some fake data. Now in our table. Here we are remote. In our list. The key will be the name. Before running our application, we need to import the state using here. And I need to make this as array. Alright, let's run our application and database here we have one extra column, so let's return to our course. No, it's fine. Now we need to implement the search button here. First thing we need to sports information. I state the name. So here In our inputs name. Then we need to implement their own change in order for a shopping dates state. So in here, we need to add, Save and say, yes, that's working as expected. Now, let's create the method that we'll call our controller. Create a method called search items. You create variable L. So in this case is different. Otherwise, you call the method get. And then using excerpts, we will call them yet. So URL. And we'll set our library. Let's make sure that our course is the 0. And now let's search result. Then if you get any face some parameter here. And in our next lecture, we'll see how to update the library. 38. 38 Implementing Update item item in the website: Hi, In this lecture, we will allow the user to update the libraries. But before we introduce two concepts regarding JavaScript echo script development that we use in this lecture. The first is the spread operator. The spread operator allows you to spread out elements of interval objects, search array, or men, who in here I have Jue arrays to go actions. In this line, we are both neutral, one and D is the result. Do this without using the spread of variant. On the example you see using the spread operator, we need to put three dots before the array by doing this in the background is the same thing. Yes, if we are using one called Chu column three, and then the result is the same. But what is the problem when we do this? In this case, I'm creating, I have one array with three elements, and then I am truly a new array. And I didn't do is assign labels. Array. Is array as a specific space in memory. A-site is arrange my array. This second array is the studios and the same space in memory. So both are the same. And react. This, even if we change one information here we glutes, Let's say comma D react to a lot, gets changed because the object is the same or reacts. Change in an object means our new objects and home. Can we do this by using spread operator stack above, assign the object to the new array and sharing the same space memory. We can just use this spread operator to get all elements on the previous array and add a new array. Have the same results in this screen, the same elements, but react and understand that DES is a chain. Then there was a change in the news over the years. And the second concept is the surface right? Array elements. The first and the second n. When we use the surgery, we can get information from the array without having to explicitly say what we need for each property. So this throat really allows you to extract information from arrays. Very simple way. So in this case I am extracting Chu, Chu elements from this array. And then I am signed. Then introduce new variables here, firstname and surname. When we build this in the background, dense that the arrays 0 will be for the first element, in this case firstname and the array one. That is, when we go to the second round to hear certain thing and when we explain this variables in the spring, like jump, sweet. So JSR that drew concepts that we use in our lecture. And now we know a goat. And the first thing we need to include one extra information now our library, in order for us to identify which are the items that the user is changing at the moment. So we need to approach called is a teaching in each library and how can we include this information we need to go. I just met them showing here forcing the We'll map and say that she's never approach. That will be called is you have the pair, well, false. So when we do just really creating this new property, way to develop false. And then we are saying to the state, but we know how we can identify. Then in here. Here we'll add a button. So in here, we will display just we have the flag. Isn't teaching. Okay, now let's run our application working library search. And we have our option here. Because we put in here, We went to see if our conditional rendering. I said Jesus, should not appear. But let's say a stock. We are here. It's fine. It's working as expected. Let's say. Will you include each information here inside input text? So now our information is here. But we cannot get it because we cannot handling change information and our state. So for this we need to handle the change. So in here, Let's tweak this method. In here. I get all my libraries using spread operator, the index of these elements that I'm using. So just distribute this button here. I use all that to any change in any property here. What specific metric for each? So you want to do is change the library in Python. And then I am saying that item, this element here, it is metal, loads that for each element, each in MOOC we have one extra information called name. And Jesus, Oh, what is a change between the tool update we need to get? This case is the name causes properties provided again, there, there is a telephone. So in here, intro the index of the element in our list. I am guessing that this change it. Here. I get our HTML element in here and get the name of the changes. Using the structuring element. I have to information here called name of discernment, destroy, destroy other. And editing here. I will say that in my list, my new list, either in this position, now will be a new object. We have the same information item that I received. But Jay-Z formation is changed. Here's the specific property. And then we take our list. Now if we save and knows screen. Let's refresh and LH, which will be able to index. Because the index isn't changing, is false. That's why we can see the button. So now let's create our method to allow for items that we received by you say that this prompt is it useful? And again, we need to send is this vector. This method, these are teaching in our, in our application. Let's refresh search. And if you click in here, now we get a ditch and the block is about one visible. Now let's create a button to see obvious book on sale. I just went there but I do to spot all the way round. This class. You create a method called confirm up-to-date. Let's create this method here. We're using Access dot these elements here and a lower response. If we come in our controller, you can see that the update method, we are looking at aging, just sending you updates is pretty much similar. But we are not doing this anymore. We saved users with the information. So if we save and we'll draw page search and changes address two of my life research again, it's here, it's Changes. Refresh and search. In our next lecture, Let's implement the pads. 39. 39 Implementing Insert item item in the website: In this lecture, we'll implement the functionality to add. However. So we know our code. We will create states to hold the information of this object. That later on when you click Save, we'll sent to the controller. So in here, get the full value will be the same properties that we can find in the object library. Because this object, we use same to demanded. Save any here what do we are receiving is the object's weight, so great. Now, I stayed with the same groping so that we can see here that I don't need it. Okay, now I will use JS state. No over it. Note that each inputs we have already the property name, the deck. We will use to handle their own change. Right now let's create our numerical. Let's create new Smith, let the states. So in here, using the structural feature script, I am getting the name and the value of GZ books. So I'm getting this information here and the input of l by itself. And then I create a new refers to this state here. And I'm updating what I need. And I am updating the state again. Let's save and see if it is working. Yes, it is working. Now let's create the method that will be called when we click the Save button. We will use our library to it. That is the state. So in here, I am sayings in our library to the controller in a matter of safe in their response. I am getting a new reference for our list of letters. And then I'm pushing our library or new library side to this list. I'm including this object. There's no ever in our list of libraries. And then I need to update our state of live births. In any here I am clearing our objects to add. So let's put news sites the button. And let's see. Then it's here. And this object was cleared in our soap notes here. So if I click search all the libraries we are, including, the library that we have just created. Then I can indeed as well. Let's just create a button here to cancel if I don't want this anymore, just to, just to make our UI more clear. So in our method, pledge change to the library, and also if this library has been edited, and let's just change it here. And then here in our AD tubercle, we call status. We'll pass our library and also the flag. In this case, yes, is it should allow that scope this button, cancel. The opposite. Call, the same method, but in this case, false. Let's see. Search engine here and 10, so, well right now our UI is better. And in our next lecture, led simply means the delete functionality. 40. 40 Implementing Delete item item in the website: Hi, In this lecture, we will implement the delete functionality. So in our code, up to the bottom, save, let's create another button to delete. The onclick. We call the method deletes whoever implements the class. So here we see our library. Then we'll call our library. In their response, we should remove this for now our list. So that's good. Lab released as a reference. Let's find the index of these libraries that we are in the meeting. And in this index. We remove slavery index. And then in this list, remove one item from this index. Then we update list. Let's save and refresh search. Again. So let's create here. In our libraries here, then it ends not working. And the reason is because we cannot send this information as we did in the post deals with coma. In object. In here we need to send in using this syntax Data NPR library. So let's save and do it again. Yes, Now it's working as expected. In our next lecture, Let's add. However redraw show modifications friendly for the user's code. Switch. 41. 41 Adding SweetAlert for notification: This is Lecture installed, sweet alert notification. So this is the library that we use though reaction bootstrap. Sweet. So let's click here. And then in our project, all right, It was installed. So we know our library. Let's import this library. Ending here. We will create one stage, one state. If a message shouldn't be displayed or not. In this case, you create a notification to show when the library is included with success. So in here, let's create our stage show alert. The initial girl. Can then in here, if this is true, success, This message will be item successfully. Confirm worker will change the state. That is true, true, false. Message that site. Extra. Show other. So now we need to use just said show alert. When we finish, including library scope of this method. Here Let's add a score for btn. Bsd style is the name. So let's go to this one here. And then in the confirm, save it the radar application. And here let's Library and click Save. And now we have our notification displayed. The message that we put the title in the butter, confirm that we hear based style of this message. If I put here, if you change the same for danger, this success means this icon here to put warning for danger. So we can change this property here as we wish. So let's return here and click. Okay. And the library was successfully included in this component. Sweet alert. We have a demo. We've all the options that we can see and you can use to call this. One interesting alerts is the message we cancel and confirm callbacks. So the user can confirm if he really wants to or not. So it is the documentation of this library, a very interesting library. And then in our next lecture, Let's handle euros in the front end. 42. 42 Handling errors in the Front End: Hi. In this lecture, we will see how to handle errors in the front end. So in our project, Let's first create one error message. Here you create property in our state. Any state of having a fixed set message are you create as well? State stage news for the message error message. Now let's create our state error. Error message. Strings, string empty. Now, we have to include a try-catch in every transaction that we are using, requests to get or sends data to our back-in. So let's start the search item. So in here, if neutrons are quite successfully, needs to be executed, otherwise, you include a catch block. And then in the catch block or you set the to explain what is the exception. And then you search for news, you display our urine. We just message here. Now, I will cope use one. Are you put in the concurrent update? In the insert as well? So whether you clicked okay, these alerts, you'll see we've set swells. And as Lead for Docs right here, the catch error message. And let's stop our application and simulate an exception. So in our library control and in that method, let's say update. Let's throw exception. Let's run our application. In our application as well. Let's change in here. Let's create one exception is a library search. Then now when we click into it, we can see that the message that appear here is because we put the index is minus one, doesn't exist. So this is the message into try-catch. Let's remove this message. Call the update method. So let's change J22. Want to save. An exception was triggered in our backend. Any tools displayed as we are in our UI. And this is how we can handle some exceptions and errors in our phones in a friendly way. Now in our next lecture, Let's publish our solution in IIS. 43. 43 Publishing the solution in IIS: In this lecture, we will publish our solution in IIS locally. So what is, IS, IS, is our web server solution from Microsoft that once in Windows operational system and accepts requests from clients and then returns the appropriate response. So when we access our website, this website is going in. Iis is hosted in a server using our web hosting solution, in this case IS. And in here, the application you access all the players like UI, web based database. So I asked is where we host our application. For this, we need to make sure we have the following components installed in our machine server, including true not net core components. So let's do this change is installation or IAAS in Windows. If you type turn Windows features on or off, genes window will appear. So in here, Let's find IIS, Internet Information Service. And then in web management tools, we must select and any application development. Additional developments, footnotes or endnotes, justice and application security. Features. Inflammation serves. No, we need to restart. Let's do this now. All right. I guess is now installed. That's the coconut core SDK. And the runtime. Let's now install the SDK hosting runtime. Okay, now let's restart again our computer just to make sure of the change took place. Now everything is installed and if yes, then shouldn't be able now to see IIS Internet from it and Service Manager. We create a site, should deploy our solution. But first in our solution, Let's do is light chains. So in here we remove the HTTPS and you let just 82 to the door. The port 5000. The same for this input is one and this one. And just run. Okay, Now let's save and publish our solution. So in here, right-click, publish, folder. Finish. Now we have just create one published profile. We're just following settings. Then we click publish. The application was published. Here. Then we can see the files of our application. I put this in, my right side, will go up these files. And then I have created this folder IS deployment. Inside this folder, I created this other folder. Any here, I test this file here. Now the files on here. So let me put here, I create a website, the name of your website, or you use as the name of our application. And the physical UB j is one here. We can define that we have just deployed here. I put here and the port, or you put 5 thousand, 0, 1, and you start website immediately. Now if I click here and I browse, I can see my application running perfectly. And here we can see local host because in our buying options. So if you click here bindings, in here, I put the IP address of sine. If I want to use my personal ID, then I select here close restarts and roles. And then the application will run with this specific API that I have selected to avoid extra configuration regarding course policy, meet refugees as along the sign, restart and rows here. But first, we need to come in our application pools, ASP NET Core. We react when we create a website here, automatically the apple will be created with the same name. All right, so do the application is running inside disco. Disco means that there are a lot of configurations that can be used by one or more application. In this case, this application is inside this pool and inside this bone here, we need to right-click. Calming adolescent searches are just click here and it wasn't settings. And in this option here, identity, we need to select and change to use our account because our database is using windows of education by default when we create our website. This option here is selected by the full mute in account. This account has more access to the database that we have just created. Because the base is we have access using Windows authentication. So we need to come here and set. Our user can inform the same user that we're using to login in the computer. Otherwise, our application, we will not have access to the database. So rectangle in here, search all the data we appear here. If we filter called a date, we appear here as well. If I create one library, then it's here. And also working and delete as well. And this is how we can deploy it locally.