Introduction 

ReactJS is one of the major libraries used in building a single-page web application and simple mobile application development. React was developed by Jordan Walke, a software engineer at Facebook; the framework is currently maintained by Facebook. In this article, we will learn how to create user registration and login pages using ReactJS and Web API.

This article covers:

  • Create a database and table
  • Create a Web API Project
  • Create React Project
  • Install Bootstrap and React strap
  • Add Routing

Prerequisites

  • Basic knowledge of React.js and Web API
  • Visual Studio
  • Visual Studio Code
  • SQL Server Management Studio
  • Node.js

You may also like: 
CRUD Operations Using ReactJS and ASP.NET Web API

Create a Database and Table

Open SQL Server Management Studio, create a database named Employees, and in this database, create a table. Give that table a name like EmployeeLogin.

Create a Web API Project

Open Visual Studio and create a new project.

Creating a new project

Creating a new project

Change the name as LoginApplication and Click ok > Select Web API as its template.

Selecting Web API template

Selecting Web API template

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Adding new item

Adding new item

Click on the “ADO.NET Entity Data Model” option and click “Add.” Select “EF designer” from the database, and click the “Next” button.

Adding entity data model

Adding entity data model

Add the connection properties and select database name on the next page and click OK.

Selecting database name

Selecting database name

Check the table checkbox. The internal options will be selected by default. Now, click the “Finish” button.

Image title

Adding image title

Now, our data model is successfully created.

Next, we add a new folder named “VM.” Right-click on it and add three classes — Login, Register, and Response. Now, paste the following code in these classes.

Login Class

Register Class

Response Class

Right-click on the Controllers folder and add a new controller. Name it as “Login controller” and add the following namespaces:

Create two methods in this controller to insert and log in. Add the following code in this controller:

Now, let’s enable Cors. Go to Tools, open NuGet Package Manager, search for Cors, and install the Microsoft.Asp.Net.WebApi.Cors package. Open Webapiconfig.cs, and add the following lines:

Create the React Project

Now, create a new ReactJS project by using the following command.

Open the newly created project in Visual Studio Code, and install Reactstrap and Bootstrap in this project by using the following command.

Use the following command to add routing in React.

Now, go to the src folder and add three new components.

  1. Login.js
  2. Reg.js
  3. Dashboard.js

Now, open the Reg.js file, and add the following code:

Now, open the Login.js file, and add the following code:

Open the Dahboard.js file, and add the following code:

Open the App.css file, and add the following CSS classes:

Open the App.js file, and add the following code:

Now, run the project by using the npm start command, and check the results.

Checking results

Checking results

Enter the details and click on the create an account button:

Enterring details

Entering details

Enter Email and Password and click on the login button.

Further Reading

Consuming REST APIs With React.js

Add User Authentication to Your React App



Source link

Write A Comment