React.js SPA with .NET Core 5

Hello fellow readers. In the previous article, we made backend application using .NET for our server technology and MongoDb for our database of choice. We also had a JWT Authentication, which is one of the most common ways to authenticate a user to a system. So definitely check that out 👉 here.

In this article we will use React.js library to make a nice, simple but quite handy example of how React and .Net can work together, but of course those concepts will work with basically any combination of technologies.

Prerequisites

Before we start, we need to make sure that we have few things installed on our machine.
So open your favorite terminal, and type: node -v. You should get a currently installed version of node on your machine.

My version is 14.15.0, and chances are that, at the time you are reading this, the version of it will be higher, however that won’t be an issue.

Moving forward we’ll check if NPM is installed as well. In your terminal type: npm -v.

Again my version is 6.14.8, yours might be higher. Now that we have all we need, it’s time to make a new React application.

I will use npx, but if you find it more appropriate you can always install “create-react-app” on your local machine and use its cli.

So open your terminal and type: npx create-react-app yourAppName. After application is crafted and is ready to use, open it in your favorite code editor.
I am using vs-code. You should get something like this:

We are starting our React application by executing script: npm start. Your browser will pop up, and you should see this page:

Let’s start building our interface. I will use Material UI as css library, which is very popular in frontend world. Once again you can use any other library such as: Bootstrap, Tailwind Css, Bulma…

So let’s do: npm install @material-ui/core. We will also install material ui icons which we will use later. For that we’ll do npm install @material-ui/icons.

Most of our application lives in src folder, so we will spend most of our time in it as well. :)
So navigate to src and create folder components. This is where our components will live.
Now let’s create our first React component. Inside components folder add another folder Auth and there we will have a new file called Login.js .

Why another folder? Well as you can imagine, as application grows, components folder will be flooded with components of different type and different kind, so it is a good practice to keep components inside of corresponding module folder.

Creating first React Component

Now back to our Login.js, we’ll create a so-called function component. In my mind, that kind of component is much easier to understand and then maintain. Also, in my personal opinion, React creators tend to navigate developers towards function components.
Function component is nothing more than a usual javascript function which returns some sort of html, also known as JSX.

So put this in your file:

You can of course do your export on the bottom of the file, if that is what you prefer.
Now how do we see this? Simple enough. Go to your App.js file, and call our Login component like so:

Simple enough. If you get back to your web browser, this is what you’ll get.

Quite simple, centered form. Moving on, we will make an api call to our server, and try to get data back from our database. For this purpose we will use Axios library, but you can always do a good old Fetch.

So, in terminal execute: npm install - - save axios.
We will also take advantage of React’s state hook, which is nothing else than a function which allows you to use State inside function component.

It will be much more clear in a minute. :)
So we will add few things to our Login component. First, above mentioned hook.

What is going on here? We have a user object which will hold our email and password, basically this is what is inside useState(). Next parameter is setUser, which is function that will set email and password of user object with values that we are going to type in our form fields.

Now let’s see this in action.

We added value property to our fields and it takes email and password from user object above. At first, fields are empty and that is why we have React.useState({ email: “ ”, password: “ ”}).

We also have onChange event, and as I said before, when that event occurs, it will call our setUser function with key : value pair. So as we type in our fileds, value of user object will change accordingly.

One more thing is unclear at this point, and that is …user ➡ spreading user object.

Reason for this is that whenever we start typing in one of the fields it will change state of one property in user object, but as soon as we jump on the second one, it will “reset” the state and it will set previous one to its default state, which is an empty string.

By spreading the user object, we are “saving” what we were typing. Now that we have our component state all set up, we are ready to make api call to our server.

For this we will make a function which will accept the event, and perform axios call.

I called my function login(), you are free to call it whatever you like. In real world you would probably keep this function in some sort of a dedicated file. If you come from Angular world, you are familiar with famous Angular services. :)

For testing purposes, we are just logging the response in our console. This function will be called when we submit the form.

We are adding onClick event, in which we call our function.
From previous article we had a test user in our database. Let’s make a test.

Start up backend application and try to login. And we get our data back from server.

This is nice, now logging in console is not much of a work done. For simplicity, let’s make a profile page with user’s data. We will redirect user to this page if he passes login. In order to have any redirection we should have routes.

Let’s install two things: react-router and react-router-dom. Easy enough, now we will create that user profile component. In components folder create folder User and inside it Profile.js

To make this event prettier, let’s have a navbar on top, with our route links in it, you know, like it’s a professional SPA. :)

I like to keep this inside shared folder, because navbar should be present all the time. So let’s make those.

Nav.js

Profile.js

These props (phone, address…) are for demonstration purpose, of course you will build your User object however you like on backend side.

We also have to add a redirection in our login method, so we can switch after we get data from server.

As you can see we are redirecting to “/profile” with user object that we had before. We are of course sure that we will get response from server, as this is just demonstration. In real life you will have error handling trough state, and render some sort of error component.

What we also need to modify is App.js

We are putting everything that should be a subject of routing inside Router.
Next since the Nav is shared component, it goes above Switch, and inside it we have our routes. Again as application grows number of routes would grow as well, so in real world you’d keep these in dedicated routes file.

Let’s now test one last time! :)

So Login page:

And after login, we will be redirected to Profile page:

And this is it! We covered few important things like state hooks, function components, sending props from one component to another, api call, routing.

In one of my next articles, I will cover Redux usage and show how this kind of application can take advantage of that library in handling Login, Logout, token expiration etc.
So stay tuned! :)

If you like this article, you can support my work and buy me a ☕😊

Please share your thoughts, and until next time happy coding!