Calling Rest API from React

The most important aspect of any front-end application is to interact with REST APIs to perform multiple actions like fetching data from database, to post data to database or to perform any business logic operations.

Now the question comes how can we call REST API from React?

How?????????

So, the answer is here to proceed with this we need to create two types of projects:

1)A web API project which will be returning list of data .

2)A React application to call this web API and display the list of data.

Creating web API:

So, we will be using ASP.net web forms for building the web API for IDE we will use visual studio 2015.

  1. Create a new project in VS, select ASP.net web application. Name it as ReactAPI or whatever you may like.

2.Select Empty from template and tick on web API.

3.once the Project has been created, got to models and create a class,name the class as Employee.(Employee.cs as in below diagram)

4. In this Employee.cs create properties like Id,Name,location and Salary.

5.Once this is done go to controllers and add a controller,select MVC 5 controller empty.

6.Create an employee list in the EmployeeController as below.Please note in order to allow any application to consume your web you need to enable the support of CORS which stands for cross-origin resource sharing.For that you need to go to references in your project and select “Manage Nugget packages” as you can see in the next diagram as blue and click on install.

7.Now go to “App_Start” and open “WepApiConfig.cs”

and open WebApiConfig.cs and to enable CORS(Cross-Origin resource sharing) call a method config.EnableCors() , as you can see below:

8.Now go to EmployeeController.cs file and top of Employee.Controller class write [EnableCors(“*”,”*”,”*”)] . As below diagram:

And your REST API is all Set to Rock!!!!

Next section is to create React API. So keep your spirits high. 🙂 . you can find the code solution for this web Api at https://github.com/VikasWilliam/Csharp/tree/master/ReactWebApi


Part 2: Creation of React Application which will connect to this web Api created above:

1.Lets begin by creating React Project.for that you need to open command prompt and navigate to your desired location using “cd” command and then create React project as below you can keep any name here the name is demoapi.

2.Once the React Project(demoapi) has been created,open the folder in Visual Studio code. go to index.js page in the src folder, create a class EmployeeComponent and extend it from React.Component, create a constructor and let this constructor excepts props as an argument and within this constructor create the base class constructor using the super keyword and pass the argument props to base class constructor.After this create a state object and add a property as employees and initialize this with empty array[ ].

3.)Proceeding forward to implement the render method, from this render method we will return a div container and within this div we will add our table.

4.Now within this table body lets iterate through the employee array of our state object using map function and passing a arrow function and for every element within this employee array let us create a table row and pass the key as in below diagram.

5. Next step is to call this component through an element and then render this element to out root container.

6.Save the changes navigate to browser and and go to http://localhost:3000/ . we can see that the table is displayed but it does not contain any data.

7.Now we need to write some code in our react application that fetches the data from the REST Api. whenever the employee component is rendered to the DOM,this is known as mounting in React,this type of codes or methods are called life cycle methods.One of such method is componentDidMount() within this method we will write an AJAX code to make request to our API. This can be done using any AJAX libraries some of the popular once which are used in live projects are : AXIOS, jQuery AJAX and the browser build in library windows.fetch. In this we will use fetch to get response from our API. In the fetch method we have to pass the request information and the web API Url and this fetch method will return a promise which is done by calling the then() method and then the values will be assigned to the employee array using setState method as below:

8.then we will run our Web API application as well as REACT application simultaneously and the output in the browser will be as below:

you can find the code for demoapi react application at:https://github.com/VikasWilliam/React/tree/master/apidemo .

Hurray!!!!!!! Project works:

if you like this post please comment and share!!!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Interesting Literature

A Library of Literary Interestingness

Discover

A daily selection of the best content published on WordPress, collected for you by humans who love to read.

The Daily Post

The Art and Craft of Blogging

The WordPress.com Blog

The latest news on WordPress.com and the WordPress community.

%d bloggers like this: