Sunday, August 7, 2016

Integrate ReactJS Frontend with GoLang API

In my previous post we created todolist api using Gorilla web toolkit. In this post we will integrate that with the ReactJS TodoList application which we created earlier.
First will add TodoListAppContainer.js file.
Then change App.js file accordingly.
In TodoAppContainer.js file, will add constants for api url and headers for api endpoint.
In the componentDidMount lifecycle method, will do data fetching action. For data fetching, will use window.fetch function, which is easier and handle responses than using XMLHttpRequest. However, most of the browsers are not support this feature. Therefore will use whatwg-fetch node package. Install whatwg-fetch package and change TodoAppContainer.js file accordingly.
In browser you will see an output like below.
Next we need handle toggle event of checkbox. First we need to pass itemId and itemIndex values accordingly from TodoList.js file.
Now we need to update values accordingly within toggleItem function. However, when we work with array manipulations, we must remember in javascript arrays and objects are passed by reference. To make our life easier, ReactJS has provided a helper called update. We need to install react-addons-update node package. And also for Object manipulation we can use babel-polyfill node package. First we need to import above packages. Then will write toggleItem function.

1 comment: