Example with React, Redux and Axios API

In previous article we have seen a simple react with redux example. In this article we will add Axios api to it. Axios is used for Promise based HTTP client for the browser and node.js. To know more about axios package, click here.

In this example we will get input name from user and hit a hello world rest endpoint. For running this example you may need to install below packages -

• redux
• react-redux
• axios
• redux-thunk

App.js

Spring Boot + ReactJS hello world example

Spring Boot is designed to get you up and running as quickly as possible, with minimal upfront configuration of Spring. To know more about spring boot, click here.

ReactJS is a JavaScript library used for building user interfaces. To know more about react, click here.

In this example spring boot will exposed our business logic using rest endpoints and reactjs is used as frontend user interface. Point here to be noted is unlike a traditional web application where java codes + web code (HTML + javascript + css) are residing in same project here spring boot and reactjs will be in different project. The main advantage of this type of setup is to have a loose coupling between your UI and business logic. Tomorrow if you feel to replace reactjs with anjularjs or vuejs you can very well do it without touching business logic.

Step 1 -
Create a spring boot application, click here for more details.

pom.xml

Implementation of Restful Webservice with image

In Java EE 6, JAX-RS provides the functionality for Representational State Transfer (RESTful) web services. REST is well suited for basic, ad hoc integration scenarios. RESTful web services, often better integrated with HTTP than SOAP-based services are, do not require XML messages or WSDL service–API definitions. Before proceeding please read this article, Developing RESTful Web Services with JAX-RS.

Also please have look at the tutorial about "JAXB marshalling and unmarshalling", as it would be helpful to understand Restful Webservice.

For running this example, below mentioned particulars are used.

• Tomcat 7.0.11
• JDK 1.5
• MyEclipse 8.6.1

1. Create a new Web Service Project, File -> New -> Web Service Project