Introduction 

In this article, we will explain how to implement Hooks in React. Hooks are a new concept that were introduced in React 16.8. Hooks are an alternative to classes. In this article, I’m going to create CRUD operations using React Hooks and Web API.

You can check my previous article in which we use class components to perform CRUD from the following link,

Prerequisites

  • Basic knowledge of React.js and Web API.
  • Visual Studio should be installed on your system.
  • SQL Server Management Studio.
  • Basic knowledge of React strap and HTML.

You may also like:
Thinking in React Hooks: Building an App With Embedded Analytics.

Create a ReactJS Project

Let’s create a React app 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 commands. Learn more about Reactstrap.

Now, open the index.js file and add import Bootstrap.

Now, install the Axios library by using the following command. Learn more about Axios.

Now, go to the src folder,  create a new folder, and inside this folder, add three new components:

  • Createemployee.js.
  • Editemployee.js.
  • EmployeList.js.

Add Routing in ReactJS

Install the react-router-dom package by using the following command:

Open the app.js file and import Router, Route (react-router-dom), and the three components

Add the following code in the app.js file:

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

 

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

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

Create a Table in the Database 

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

Create a Asp.net Web API project

Now, open Visual Studio and create a new project.

 Change the name to ReactHooks.

Make Web API the template.

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

Click on the ADO.NET Entity Data Model option and click Add.

Select EF Designer from the database and click the Next button. Add the connection properties, select database name on the next page, and click OK.

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

Now, our data model is successfully created.

Right-click the Models folder and add two classes — Emp and Response. Now, paste the following codes in these classes:

Emp class

Response Class

Right-click the Controllers folder and add a new controller. Name it “Hooks controller” and add the following namespace in the Hooks controller:

Now, add a method to insert and update data into the database.

Add the other three methods to delete and fetch data and fetch data by id from the database. 

Complete Hooks Controller Code

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

Now, go to VS Code and run the project by using following command Npm start and check the port that you have your application running on. 

Enter some data in the textbox and click on the Save button.

Click the Edit button to update values or the Delete button to delete the value. 

Summary

In this article, we learned about React Hooks and performed CRUD operations using Hooks and Web API. Hooks are a new concept that was introduced in React 16.8. Hooks are an alternative to classes.

Further Reading



Source link

Write A Comment