Spring Boot and React as a Door to Full-Stack Development
Written by:
João Gens
Back in 2016 while finishing my master’s studies in Biomedical Engineering I got a position in a bank to be trained as a back-end developer. Thanks to the Computer Science skills acquired through my studies I quickly caught up on Java 8, Spring, and SQL’s new features. From then on, I have been working on the back-end side, designing and improving applications. I am here to tell you about my journey from back-end to full-stack development and show you how to get started yourself.
Back-end developers make web apps render server-side and develop services that process business logic and access other resources such as databases, file servers, and cloud services. Front-end developers are “the artists” that make applications render on the client-side and make sure everything is pretty. While I believe you should focus your expertise on one side, my experience has proven that knowing both back and front-end provides you extra skills that are valued in software development circles and can better help you contribute to the common good.
My last project presented the need to develop an administration app used to manage machine learning models that were predicting the implied volatility of options and futures in the financial markets. We did not have any front-end developer on the team, so the question became, “who is going to make this?” As a challenge, I decided to volunteer and leap into full-stack development.
This is a simple application that lists Growinners.* Let’s try to create it!
*Growinners is what we call to the people who work at Growin.
Back-End REST Service with Spring Boot 2.3
Spring Boot is an extension of the Spring framework which eliminates the boilerplate configurations required to set up a Spring application. To start our applications, navigate to start.spring.io and select the following dependencies:
Group: com.growinner.developer
Artifact: listofgrowinners
Dependencies: Spring Data JPA, H2 Database, Spring Web, Lombok
Ps: Make sure you select the Java version you have installed on your machine.
Spring Data JPA is a framework that provides an abstraction over the data access layer using Java Persistence API. H2 Database is a lightweight Java database that can run in memory. Spring Web includes web utilities for core HTTP integration and Lombok is a Java annotation library that helps to reduce boilerplate code.
First of all, let’s create a Growinner with fields id, firstName, lastName, and email. As we included Lombok in the dependencies, we can just add @Data to generate constructors, getters, and setters for the fields. By adding @Entity we map the object to a database and @Table(name = “growinners”) specifies the table we want to create. Additionally, we need to define a primary key @Id and define a generation strategy @GeneratedValue. Finally, we add @Column annotation to map the columns.
package com.growinner.developer.listofgrowinners;
import lombok.Data;
import javax.persistence.*;
@Data
@Entity
@Table(name=“growinners")
public class Growinner {
@Id
@GeneratedValue (strategy= GenerationType.IDENTITY)
private long id;@Column (name=“first_name")
private String firstName;
@Column (name= “last_name")
private String lastName;
@Column (name= “")
private String email;
public Growinner() {
}
public Growinner(String firstName, String lastName, String email)
{
this.lastName = lastName;
this.email = email;
}
We have just completed our Growinner class. Now let’s create an interface GrowinnerRepository that extends Spring’s JPA repository. JPA repository comes with the most common database query methods. When we extend the JPA repository we need to set the type of our Entity, Growinner, and the type of the Id field, Long. For the repository, we don’t have to use an annotation since Spring automatically looks for interfaces that extend spring data interfaces.
package com.growinner.developer.listofgrowinners;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
public interface GrowinnerRepository extends
JpaRepository
}
Next, we create a Controller for the REST API. @RestController tells spring that we want this class to be responsible for HTTP requests. @RequestMapping is mapping the web request to the class. @Autowire is automatically injecting the repository field and @GetMapping maps the HTTP GET request onto the getGrowinner method.
@CrossOrigin sets the origin port that spring boot is requesting, in this case from react app localhost:3000.
package com.growinner.developer.listofgrowinners;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@CrossOrigin(origins = “http://localhost:3000")
@RestController
@RequestMapping(origins = “api/")
public class GrowinnerController {
@Autowired
GrowinnerRepository GrowinnerRepository;
@GetMapping(origins = “growinners")
public List getGrowinners() {
}
Finally, we insert a few records in the growinners table and we are up to test the REST API by typing http://localhost:8080/api/growinners in the browser.
package com.growinner.developer.listofgrowinners;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ListofgrowinnersApplication implements CommandLineRunner {
public static void main(String[] args) {
SpringApplication.run(ListofgrowinnersApplication.class, args);
}
@Autowired
private GrowinnerRepository growinnerRepository;
@Override
public void run (String… args) throws Expectations {
this.growinnerRepository.save(new Growinner (“Luís", “Mateus", “luis_mateus@growin.com"));
this.growinnerRepository.save(new Growinner (“Maria", “Santos", “maria_santos@growin.com"));
}
You are expected to get a JSON response from the server:
At this point, we have successfully created and exposed a REST endpoint using Spring Boot capabilities. Now it is time to create a React application to consume this endpoint for the client work.
Front-End with React Library
React is a JavaScript library for building user interfaces. To create a React project we need to run the following in the terminal:
npx create-react-app frontend
The newly created app has the following folder structure:
node_modules has all the packages installed by npm; public folder has index.html file, which the React application uses to render all the components; src folder has all the components we develop; src/App.js is the root component of the application; src/index.js is the top render file of our React application; and Package.json contains all the JavaScript dependencies.
Now let’s install bootstrap css library:
npm install bootstrap –save
and import bootstrap in index.js
import ‘bootstrap/dist/css/bootstrap.min.css’;
Finally, we need to install axios, a library used to make API requests from the browser:
npm install axios
Ok, we are ready to create a GrowinnerService that will use axios to get all the growinners from the back-end:
import axios from 'axios';
const GROWINNERS_REST_API_URL = 'http://localhost:8080/api/growinners';
class GrowinnerService {
}
export default new GrowinnerService();
Then we create a GrowinnerComponent that has a constructor where we initialize the state of our list, a render method that returns JSX with our table, and a componentDidMount life cycle method to call the REST API. Once we get the data we store it in the growinners array and display it in the table.
import react from 'react';
import GrowinnerService from '../services/GrowinnerService';
class GrowinnerComponent extendes React.Component {
this.state = {
<table className = “table table-striped">
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<tbody>
this.state.growinners.map(
<tr key = {growinner.id}>
<td>{growinner.firstName}</td>
<td>{growinner.lastName}</td>
<td>{growinner.email}</td>
}
}
export default GrowinnerComponent
Finally, we need to add our component in App.js:
function App() {
}
We are done with the implementation so it is time to run it. To start the back-end, run the ListofgrowinnersApplication as a spring application. Then run npm start in the frontend folder. You should see our app as shown in the introduction at localhost:3000.
Key Takeaways
Congratulations! You have now successfully managed to:
– quickly create a Restful Web Service with Spring Boot 2.3 with no need of boilerplate configurations, and
– get started with React.JS library and create a simple UI to visualize a list of Growinners.
Resources
https://reactjs.org/docs/create-a-new-react-app.html
https://www.npmjs.com/package/axios/
https://spring.io/guides/tutorials/react-and-spring-data-rest/
About the Author
João Gens
I am an IT consultant with Java and Spring experience. Recently I threw myself into React.JS and it has been funny. Music, Sports, Friendship, and what are you up for?
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Nice work, João: the world needs more takes like this one. Cut to the point, simple, concise. It takes a lot of searching / studying from other online materials to appreciate what you have put together in this post. Thank you.