Saturday, March 23, 2019

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


Application.java

ApplicationController.java

Start the spring boot application. You can test it using below url it should return 'Hello Java'
http://localhost:8080/sayhello?name=Java


Step 2 -
Install NPM (If not installed)

Step 3 -
Create and start react application using below commands, click here for more details.

npx create-react-app my-app
cd my-app
npm start

Edit App.js as shown below. You may also need to install axios package to run this example.
Output - 
http://localhost:3000/