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?


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!!!!!

Uneven Pavement :-)

“A traveller should be happy not perfect”

Here I come with my new post after ages . So it was Saturday evening when I landed Heathrow airport ,my first every entry to a country, outside India . With all the goosebumps and adrenalin rush I entered the “The Great Wen“.With all the plans of travelling and seeing new cities had already made me very confused but I was lucky enough to visit the beautiful Oxford city the very next day.


Trust me it is a very beautiful place ,The city is home to the University of Oxford, the oldest in the English-speaking world, and has buildings in every style of English architecture. The first which I visited after having breakfast at McDonald’s (food is important) was “the University church of St Mary” , this church has been the official church of the oxford university since 1200s. the view from the top tower of the church is really amazing and you will get the view of the entire city ,don’t trust me?? see the below pics clicked by me…and and and just try to figure out if have viewed this scenes in Harry Potter movie 😛


View 4

View 5

The Bodleian Library is a working library which forms part of the University of Oxford. It is housed in a remarkable group of buildings which forms the historic heart of the University the pic is below:

View 3
The Bodleian Library

And Finally my journey was accompanied by a boat ride at “Magdalen Bridge Boathouse” and it was hell of a struggle for me but no regret as it has some beautiful views which were really soothing for my eyes.

view 8

So this was the first visit to Oxford will be visiting it again because it is really a beautiful place .Hopefully will be coming up with more posts and more in depth details of places.see you all soon.

.Net Basic

Dot Net Basics

Before the Existence of .Net we were developing application using VB 6 (Visual Basic),C++ etc.When we develop an Application that is  a non  .Net Application and compile that application using language compiler we know that an assembly gets generated which may be in .dll or .exe, This native code(.exe or .dll) is in native code(Machine code) as the operating system can understand only 0 and 1 that is the reason why compiler is used


This demerit of this application execution is that this Application code is native to only the specified operation system (The OS on which this application runs) If we try to run this on different Operating system it fails because this Machine level code (native code or object code)is native to that operating system on which it is compiled.

NOW lets see how a .Net Application Executes:

.Net supports multiple programming languages like C#,F#,VB, C++ others. If we have a compiler implemented we can use any language. When we use any of these language and develop a .net application and compile it we get an assembly (.dll or .exe) as well but this assembly does not contain native code it contains Intermediate Language(IL) this is the major difference between a .net assembly and pre .net assembly but operating systems can only understands 0’s and 1’s so if we run this IL directly over the OS it will not run that is why there needs to be some body  who will convert the Intermediate language to Machine language which OS can understand and this will be done by the run time environment CLR(Common language Runtime) when .net framework is installed two most important thing get installed one is Class libraries framework and CLR.

The IL does not run directly it executes within the CLR inside the CLR we have one more important component known as JIT Compiler(Just in time Compiler) and generates native code which can be understood by the OS. So the basic advantage is Portability( that is the application will run on any operation system which has a .net framework installed).


Trip to Tamhini Ghat(Pune)

Tamhini Ghat is a mountain passage located between Mulshi and Tamhini in Maharashtra, India. Situated on the crest of the Western Ghat mountain ranges, Tamhini Ghat is noted for its surroundings comprising scenic waterfalls, lakes and dense woods.

So it all beagan with a plan on Saturday 24th JUNE.IMG_20170624_135836793

As it is said “It doesnt matter how long the road is if you have a good company”

SO What is next?

awesome weather and awesome bikes and we were all set to experience some of the best views which nature displays in monsoon.

AS you will explore the roads you will discover cascades of numerous waterfalls with beautiful scenes.where you can click mesmerizing  photos.

If you have awesome friends and you like bike ride then this monsoon is the perfect time to explore the mountain terrain of Pune.


Interesting Literature

A Library of Literary Interestingness


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: