We will start this module by seeing what React is, then we will see what SB.NET Core is. Later we will prepare the development environment by installing Node, create React app, Visual Studio, Visual Studio Code and the latest version of.NET. Finally we will create the application on which we will work throughout this course.
So let's answer the question, what is React? React defines itself as a library for building user interfaces. This refers to the main task of React.
However, when we add the ecosystem of available tools, React is a complete solution for the development of applications, whether it is for the web, mobile, desktop, and even virtual reality. In this course, we will focus on React for the web. With React, we program using a component paradigm.
The idea is that we can divide our application into small reusable parts. These components can have UI, which is user interface, logic, which is behavior, and we can also add specific CSS for that component. This means that we can style the user interface of the component by using CSS if we want to. We can send information to a component and receive data from it. React also supports libraries that help us with day-to-day application development tasks such as routing, animations, forms, automatic tests among others.
React is a very famous library for the features it has that make it stand out from other options. One of them is that it is progressive. When we talk about a progressive library, We mean that we can adopt it incrementally in our existing developments. That is, we can use React in a small part of a web application, without touching the rest.
Thus, if we have a website that works with jQuery, and then we want to modernize it, we can do it step by step. We can start with something as simple as a button, and from there progressively migrate our site. React also offers us flexibility. React does not make assumptions about the tools you should use for your development.
You are free to choose a tool for making HTTP requests, a tool for unit testing, a tool for routing, etc. This is attractive for development teams comfortable with the JavaScript ecosystem, as they have the freedom to choose the tools they like for each task. Another advantage of React Over other libraries is the fact that it has a company like Facebook behind it Facebook is the company that created react and as such they use it a lot for their solutions They use it so much that they have thousands of react components running on production This means that it is very likely that for the next few years Facebook will continue to add new features and update react You are not going to see React simply abandoned as has happened to other projects in recent years. React's efficiency is also very powerful.
React uses the virtual DOM for efficient application UI updates. This makes updating the UI of our web application really, really fast, without wasting resources, redrawing elements that have not changed. We will talk more about a virtual DOM in the future.
Due to how widely it is used, React has a huge community of developers. This means that probably when you have a React question, you can google it and quite possibly find an answer. Just at the time of recording this video, the ReactJS tag from StarCover Flow tells us that there are more than 280,000 questions asked.
This widespread use of React also translates into high salaries. According to Udacity.com, in San Francisco, California, the average salary for a React developer is over $100,000 per year. In Germany, it is $53,000 per year, which is a good amount of money.
This means that it is productive to invest your time in learning React to aim for better salaries in the future. In this course, what we are going to do with React is to program the front-end. end, that is the part that the user sees, the one that runs in his browser, the part that the user interacts with directly. We are now going to talk about the technology that we will use for the back end. Espironet Core is the evolution of the Espironet framework.
With Espironet Core we can develop modern web applications ready to run in the cloud that can run on different platforms such as Windows, Linux and Mac OS that are easy to test with automatic testing, that are high performant and of course whose framework receive updates every year. When we talk about Espironet Core running in the cloud We mean that it lends itself by default to work in high demand environments, where horizontal and vertical scaling can occur. A horizontal scaling is when we add more servers to process information.
A vertical scaling is when we improve the characteristics of the existing servers, for example adding more RAM. The high performance of Speedo NetCore makes this framework lend itself to multi-tenancy solutions. One of the fundamental characteristics of Espiro Netcore is that the applications made in this framework can run on different operating systems, such as Windows, Linux or macOS. The Espiro Netcore architecture is designed to allow you to develop applications that are easy to test with automatic testing.
Espiro Netcore allows us to do dependency injection in a very simple way, as it comes with a dependency injection system by default. In the past we were forced to use a library for this purpose or create our own solution. Although from.NET 5 they kind of rebranded themselves and they kind of want to drop the core.
So it is called.NET 5 and not.NET Core 5. Nevertheless, ASP.NET is still called ASP.NET Core 5. So keep in mind that when I talk about.NET Core. I am also including.NET 5 and onwards. So we have.NET Core and.NET Framework.
The question is which one should you use? In general you should use.NET Core. You should use.NET Core if you are going to create microservices, you are going to use docker containers, you need multi-platform capabilities, you want to use a modern development framework, you need a command line to automate processes related to the development, testing, or publication of your applications in a simple way.
In general, between using.NET Framework or.NET Core, you should choose.NET Core for new developments unless you have a good reason to choose.NET Framework. Some of the reasons why you should use.NET Framework are, you will use a technology which is not supported by.NET Core, such as Windows Communication Foundation or Web Forms. You need to use Windows specific APIs, since.NET Core is cross platform, it does not assume the operating system where it will run.
Or there are.NET functionalities that are not yet available in.NET Core. Although as years go by, this is less likely to be the case, since.NET Core should be able to do everything that.NET was able to do in the past. In terms of versioning, .NET Framework goes from 1 to 4.8 and.NET Core which is the evolution of.NET Framework goes also from version 1 to 1.1 to 2.1 3.3.1 and then they skip 4 and they went for.NET 5 as we just mentioned and after that they will bring.NET 6,.NET 7,.NET 8 and so on.
Now that we have covered the basics Let's set up our development environment. In this video we are going to install Node.js. With Node.js we are going to be capable of running javascript code in our machine and not only that but we will have access to the npm or node package manager which will allow us to install libraries that we are going to use in our applications.
So in order to install node go to google and write node here and the first page is going to be nodejs.org I will click on here and here you have to install the LTS version please install this version and not this one because sometimes this one have errors with react so I will click on this one and I will download this version and I will click on here in order to install nodejs in my machine and we need to run through this wizard and we're going to do that really quickly we can leave all the default options and click on install And this is done. Now what we are going to do is that we are going to go to a command line. For that I can press window key R.
And here I can write cmd. Press enter. And in this console I can write node dash dash version. And as you can see we have the version of node that we just installed. So we have node in our machine.
In this video we are going to learn how to work with React in an application. The idea is that we can either add React into an existing website or we can create a new web application from the ground up using a command line tool. So for that let's go to reactjs.org and let's go to docs and let's go to here to try React and in here you can see that we have this option add react to a website and I can click on here and this will open some instructions on how to add react into an existing project. You go to step two and here you will see some script tags that you can add to your website and then after that you can use react in your application as they demonstrate in this example.
The idea is that as we mentioned before react is a you progressive library which means that you can adopt it incrementally in your application you can start with something as simple as a button and then start migrating your react application on your site now we're not going to do this actually what we're going to do is that we're going to create a web application from scratch so let's go back to this tab and in here you will see that we have created a new react app which is what we want so let me click on here on learn how and let me open this up and let's go down here and you will see that if we come down here we have create react app what is create react app this is basically a tool that will allow us to create react applications that are already configured to be used so we're not going to invest too much time in configuring react but we are going to use this tool to create an application that will be already configured to work with react so that we can focus on developing our application as you can see there are some requirements we need to have node version greater than 10.16 and npm greater than 5.6 we did that in a previous video so we're good to go and as you can see the only thing that you need to create A React application is to open a terminal and write npx createReactApp and the name of the app and that would be it. With that we get to create our React application. Now we are going to do that in a future video.
In this video I just wanted to show you the two ways in which you can have React in an application. Either you add it through scripts like this which is great for applications that already exist. Or you can create a new application from zero from scratch and go from there. In this video we are going to install Visual Studio. With Visual Studio we will be able to develop.NET applications, though Visual Studio can do more than that.
With Visual Studio we can develop Python applications, Node.js applications and so on. But in our case we are going to use it for.NET development. So let's go to Google and write Visual Studio here and open the first page visualstudio.microsoft.com which I have it here and as you can see we have Visual Studio for Windows and Visual Studio for Mac.
So if you are using macOS you can definitely use Visual Studio. If you are using Linux or you want to use Visual Studio code you can definitely download it from here. We are going to install Visual Studio in another video.
In this one we are going to use Visual Studio. You can come here and download the Community Edition. The Community Edition of Visual Studio is a powerful edition which is free, which you can use to develop all kind of applications.
In our case we are going to use this one, the Community 2019, so after downloading and installing that, you should be presented with the Workload Screens. We are going to go to that screen in just a minute, but in my case I already have Visual Studio installed so what I will do is that I will open the Visual Studio installer and here we have the Visual Studio installer and here I have my version of Visual Studio 16.8 this is the minimum version that you have to use in order to take this course. Now I will go to more and then I will click on modify and here we are presented with that workload screen which I just mentioned you.
If this is the first time you are installing Visual Studio you will be presented with this page from the get go. In your case you need to install this workload the asp.net and web development workload which is going to allow you to use speed.NET Core in development. Now as you can see you have several other workloads like python or node.js and with these tools you can use visual studio for for example node.js development. If you want to use.NET Core for building cross-platform applications you can also select.NET Core cross-platform development workload from here. Then after that you have to click on here which there will be and install button and do the installing in my case because I already have all of this installed I don't have to install anything so I can close this and I can close this and now I want to see that we have.NET Core in our machine for that we can go to a command line like cmd and I will write here.NET dash dash version I will press enter and as you can see I have version 5.0 in my machine Now if for some reason you don't have this version or you don't have the latest version you can always come to.net.microsoft.com and go to download and then here you're going to have the latest version of.NET in this case it is.NET 5 and then you can download the SDK which is what you need for developing.NET applications you can also go here and see all the choices that you have or we can click on here and as you can see you can also download the SDK for macOS, Windows or Linux.
Again of course in my case I already have all of this installed so I am good to go. In this video we are going to install Visual Studio Code. Visual Studio Code is a modern lightweight text editor that allows us to code in a comfortable manner for different technologies.
Visual Studio Code is really famous especially for building front-end applications although while not limited to use it only for front-end we can definitely use it for back-end stuff like Node.js, Svito.net Core and so on. So let's go to visualstudio.microsoft.com and here as you can see we have Visual Studio Code. and of course Visual Studio Code works for Windows, Linux and macOS. We can go here and as you can see we can download it in whatever OS we have, in my case I already downloaded and installed it so I will open Visual Studio Code. Here I have Visual Studio Code and something that I want you to do is to come here to extensions and I want you to install the following two extensions I want you to install the Angular Language Service extension.
You may not have it here, so you may have to write here Angular Language Service and then you will have it here. You can click on here and you will be able to install it. In my case I already have it installed. Another one that I want you to install is the C-sharp extension.
This will make it easy for you to develop.NET applications with Visual Studio Code. There are definitely other extensions that you can use but in our case this should be enough so let me delete this from here and now I want you to open a terminal and you can do so in Visual Studio Code so let's open here let's click on new terminal and here I have a command line from Visual Studio Code and I can write something like.NET dash dash version in my case I have version 5 if instead you get an error it means that you don't have the.NET SDK installed here I am trying to use the.NET CLI which is installed automatically when you install the.NET SDK so for that we can go back here to Google Chrome and let's go to.NET.Microsoft.com and let's go to download and here as you can see we have.NET 5 for Windows or we can have it for Linux, macOS or an image for docker if you want in my case I will use windows and I can choose to download the.NET SDK it is really important that you choose the SDK and not just the runtime so after you click on here you will see that the download starts but again in my case I already have this installed so I don't have to install it but after downloading it and installing it you will be able to come back here write.NET version and in that case you will certainly have.NET Core installed and the.NET CLI available for you