React With Java Backend Example

Welcome, Spring community.

This section shows how to get a bare-bones Spring Data REST application up and running quickly. Then it shows how to build a simple UI on top of it by using Facebook's React.js toolset.

Step 0 — Setting up Your Environment

Feel free to grab the code from this repository and follow along.

If you want to do it yourself, visit https://start.spring.io and pick the following dependencies:

• Rest Repositories

• Thymeleaf

• JPA

• H2

This demo uses Java 8, Maven Project, and the latest stable release of Spring Boot. It also uses React.js coded in ES6. This will give you a clean, empty project. From there, you can add the various files shown explicitly in this section and/or borrow from the repository listed earlier.

In the Beginning…​

In the beginning, there was data. And it was good. But then people wanted to access the data through various means. Over the years, people cobbled together lots of MVC controllers, many using Spring's powerful REST support. But doing over and over cost a lot of time.

Spring Data REST addresses how simple this problem can be if some assumptions are made:

• The developer uses a Spring Data project that supports the repository model.

• The system uses well accepted, industry standard protocols, such as HTTP verbs, standardized media types, and IANA-approved link names.

Declaring your domain

Domain objects form the cornerstone of any Spring Data REST-based application. In this section, you will build an application to track the employees for a company. Kick that off by creating a data type, as follows:

Example 1. src/main/java/com/greglturnquist/payroll/Employee.java

                    @Entity                                            (1)                      public class Employee {  	private @Id @GeneratedValue Long id;                                            (2)                      private String firstName; 	private String lastName; 	private String description;  	private Employee() {}  	public Employee(String firstName, String lastName, String description) { 		this.firstName = firstName; 		this.lastName = lastName; 		this.description = description; 	}  	@Override 	public boolean equals(Object o) { 		if (this == o) return true; 		if (o == null || getClass() != o.getClass()) return false; 		Employee employee = (Employee) o; 		return Objects.equals(id, employee.id) && 			Objects.equals(firstName, employee.firstName) && 			Objects.equals(lastName, employee.lastName) && 			Objects.equals(description, employee.description); 	}  	@Override 	public int hashCode() {  		return Objects.hash(id, firstName, lastName, description); 	}  	public Long getId() { 		return id; 	}  	public void setId(Long id) { 		this.id = id; 	}  	public String getFirstName() { 		return firstName; 	}  	public void setFirstName(String firstName) { 		this.firstName = firstName; 	}  	public String getLastName() { 		return lastName; 	}  	public void setLastName(String lastName) { 		this.lastName = lastName; 	}  	public String getDescription() { 		return description; 	}  	public void setDescription(String description) { 		this.description = description; 	}  	@Override 	public String toString() { 		return "Employee{" + 			"id=" + id + 			", firstName='" + firstName + '\'' + 			", lastName='" + lastName + '\'' + 			", description='" + description + '\'' + 			'}'; 	} }                  

1	@Entity is a JPA annotation that denotes the whole class for storage in a relational table.
2	@Id and @GeneratedValue are JPA annotations to note the primary key and that is generated automatically when needed.

This entity is used to track employee information — in this case, their names and job descriptions.

Defining the Repository

Another key piece of a Spring Data REST application is a corresponding repository definition, as follows:

Example 2. src/main/java/com/greglturnquist/payroll/EmployeeRepository.java

                  public interface EmployeeRepository extends CrudRepository<Employee, Long> {                                        (1)                    }                

1	The repository extends Spring Data Commons' CrudRepository and plugs in the type of the domain object and its primary key

That is all that is needed! In fact, you need not even annotate interface if it is top-level and visible. If you use your IDE and open up CrudRepository, you will find a collection of pre-defined methods.

Pre-loading the Demo

To work with this application, you need to pre-load it with some data, as follows:

Example 3. src/main/java/com/greglturnquist/payroll/DatabaseLoader.java

                  @Component                                        (1)                    public class DatabaseLoader implements CommandLineRunner {                                        (2)                    private final EmployeeRepository repository;  	@Autowired                                        (3)                    public DatabaseLoader(EmployeeRepository repository) { 		this.repository = repository; 	}  	@Override 	public void run(String... strings) throws Exception {                                        (4)                    this.repository.save(new Employee("Frodo", "Baggins", "ring bearer")); 	} }                

1	This class is marked with Spring's @Component annotation so that it is automatically picked up by @SpringBootApplication.
2	It implements Spring Boot's CommandLineRunner so that it gets run after all the beans are created and registered.
3	It uses constructor injection and autowiring to get Spring Data's automatically created EmployeeRepository.
4	The run() method is invoked with command line arguments, loading up your data.

One of the biggest, most powerful features of Spring Data is its ability to write JPA queries for you. This not only cuts down on your development time, but it also reduces the risk of bugs and errors. Spring Data looks at the name of methods in a repository class and figures out the operations you need, including saving, deleting, and finding.

That is how we can write an empty interface and inherit already built save, find, and delete operations.

Adjusting the Root URI

By default, Spring Data REST hosts a root collection of links at /. Because you will host a web UI on that path, you need to change the root URI, as follows:

Example 4. src/main/resources/application.properties

spring.data.rest.base-path=/api

Launching the Backend

The last step needed to get a fully operational REST API off the ground is to write a public static void main method by using Spring Boot, as follows:

Example 5. src/main/java/com/greglturnquist/payroll/ReactAndSpringDataRestApplication.java

                @SpringBootApplication public class ReactAndSpringDataRestApplication {  	public static void main(String[] args) { 		SpringApplication.run(ReactAndSpringDataRestApplication.class, args); 	} }              

Assuming the previous class as well as your Maven build file were generated from https://start.spring.io, you can now launch it either by running that main() method inside your IDE or by typing ./mvnw spring-boot:run on the command line. (mvnw.bat for Windows users).

Touring Your REST Service

With the application running, you can check things out on the command line by using cURL (or any other tool you like). The following command (shown with its output) lists the links in the application:

$ curl localhost:8080/api {   "_links" : {     "employees" : {       "href" : "http://localhost:8080/api/employees"     },     "profile" : {       "href" : "http://localhost:8080/api/profile"     }   } }

• _links is the collection of available links.

• employees points to an aggregate root for the employee objects defined by the EmployeeRepository interface.

• profile is an IANA-standard relation and points to discoverable metadata about the entire service. We explore this in a later section.

You can further dig into this service by navigating the employees link. The following command (shown with its output) does so:

$ curl localhost:8080/api/employees {   "_embedded" : {     "employees" : [ {       "firstName" : "Frodo",       "lastName" : "Baggins",       "description" : "ring bearer",       "_links" : {         "self" : {           "href" : "http://localhost:8080/api/employees/1"         }       }     } ]   } }

At this stage, you are viewing the entire collection of employees.

Along with the data you pre-loaded earlier, a _links attribute with a self link is included. This is the canonical link for that particular employee. What is canonical? It means "free of context". For example, the same user could be fetched through /api/orders/1/processor, in which the employee is associated with processing a particular order. Here, there is no relationship to other entities.

Links are a critical facet of REST. They provide the power to navigate to related items. It makes it possible for other parties to navigate around your API without having to rewrite things every time there is a change. Updates in the client is a common problem when the clients hard-code paths to resources. Restructuring resources can cause big upheavals in code. If links are used and the navigation route is maintained, it becomes easy and flexible to make such adjustments.

You can decide to view that one employee if you wish. The following command (shown with its output) does so:

$ curl localhost:8080/api/employees/1 {   "firstName" : "Frodo",   "lastName" : "Baggins",   "description" : "ring bearer",   "_links" : {     "self" : {       "href" : "http://localhost:8080/api/employees/1"     }   } }

Little has changed here, except that there is no need for the _embedded wrapper since there is only the domain object.

That is all well and good, but you are probably itching to create some new entries. The following command (shown with its output) does so:

$ curl -X POST localhost:8080/api/employees -d "{\"firstName\": \"Bilbo\", \"lastName\": \"Baggins\", \"description\": \"burglar\"}" -H "Content-Type:application/json" {   "firstName" : "Bilbo",   "lastName" : "Baggins",   "description" : "burglar",   "_links" : {     "self" : {       "href" : "http://localhost:8080/api/employees/2"     }   } }

You can also PUT, PATCH, and DELETE, as shown in this related guide. For now, though, we will move on to building a slick UI.

Setting up a Custom UI Controller

Spring Boot makes it super simple to stand up a custom web page. First, you need a Spring MVC controller, as follows:

Example 6. src/main/java/com/greglturnquist/payroll/HomeController.java

                  @Controller                                        (1)                    public class HomeController {  	@RequestMapping(value = "/")                                        (2)                    public String index() { 		return "index";                                        (3)                    }  }                

1	@Controller marks this class as a Spring MVC controller.
2	@RequestMapping flags the index() method to support the / route.
3	It returns index as the name of the template, which Spring Boot's autoconfigured view resolver will map to src/main/resources/templates/index.html.

Defining an HTML template

You are using Thymeleaf, although you will not really use many of its features. To get started you need an index page, as follows:

Example 7. src/main/resources/templates/index.html

                <!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head lang="en">     <meta charset="UTF-8"/>     <title>ReactJS + Spring Data REST</title>     <link rel="stylesheet" href="/main.css" /> </head> <body>      <div id="react"></div>      <script src="built/bundle.js"></script>  </body> </html>              

The key part in this template is the <div id="react"></div> component in the middle. It is where you will direct React to plug in the rendered output.

You may also wonder where that bundle.js file came from. The way it is built is shown in the next section.

This tutorial does not show main.css, but you can see it linked up above. When it comes to CSS, Spring Boot will automatically serve anything found in src/main/resources/static. Put your own main.css file there. It is not shown in the tutorial, since our focus is on React and Spring Data REST, not CSS.

Loading JavaScript Modules

This section contains the barebones information to get the JavaScript bits off the ground. While you can install all of JavaScripts command line tools, you need not do so — at least, not yet. Instead, all you need to do is add the following to your pom.xml build file:

Example 8. The frontend-maven-plugin used to build JavaScript bits

                <plugin> 	<groupId>com.github.eirslett</groupId> 	<artifactId>frontend-maven-plugin</artifactId> </plugin>              

This little plugin perform multiple steps:

• The install-node-and-npm command will install node.js and its package management tool, npm, into the target folder. (This ensures the binaries are NOT pulled under source control and can be cleaned out with clean).

• The npm command will execute the npm binary with the provided argument (install). This installs the modules defined in package.json.

• The webpack command will execute webpack binary, which compiles all the JavaScript code based on webpack.config.js.

These steps are run in sequence, essentially installing node.js, downloading JavaScript modules, and building the JS bits.

What modules are installed? JavaScript developers typically use npm to build up a package.json file, such as the following:

Example 9. package.json

                {   "name": "spring-data-rest-and-reactjs",   "version": "0.1.0",   "description": "Demo of ReactJS + Spring Data REST",   "repository": {     "type": "git",     "url": "[email protected]:spring-guides/tut-react-and-spring-data-rest.git"   },   "keywords": [     "rest",     "hateoas",     "spring",     "data",     "react"   ],   "author": "Greg L. Turnquist",   "license": "Apache-2.0",   "bugs": {     "url": "https://github.com/spring-guides/tut-react-and-spring-data-rest/issues"   },   "homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",   "dependencies": {     "react": "^16.5.2",     "react-dom": "^16.5.2",     "rest": "^1.3.1"   },   "scripts": {     "watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"   },   "devDependencies": {     "@babel/core": "^7.1.0",     "@babel/preset-env": "^7.1.0",     "@babel/preset-react": "^7.0.0",     "babel-loader": "^8.0.2",     "webpack": "^4.19.1",     "webpack-cli": "^3.1.0"   } }              

Key dependencies include:

• react.js: The toolkit used by this tutorial

• rest.js: CujoJS toolkit used to make REST calls

• webpack: A toolkit used to compile JavaScript components into a single, loadable bundle

• babel: To write your JavaScript code using ES6 and compile it into ES5 to run in the browser

To build the JavaScript code you'll use later, you need to define a build file for webpack, as follows:

Example 10. webpack.config.js

                var path = require('path');  module.exports = {     entry: './src/main/js/app.js',     devtool: 'sourcemaps',     cache: true,     mode: 'development',     output: {         path: __dirname,         filename: './src/main/resources/static/built/bundle.js'     },     module: {         rules: [             {                 test: path.join(__dirname, '.'),                 exclude: /(node_modules)/,                 use: [{                     loader: 'babel-loader',                     options: {                         presets: ["@babel/preset-env", "@babel/preset-react"]                     }                 }]             }         ]     } };              

This webpack configuration file:

• Defines the entry point as ./src/main/js/app.js. In essence, app.js (a module you will write shortly) is the proverbial public static void main() of our JavaScript application. webpack must know this in order to know what to launch when the final bundle is loaded by the browser.

• Creates sourcemaps so that, when you are debugging JS code in the browser, you can link back to original source code.

• Compile ALL of the JavaScript bits into ./src/main/resources/static/built/bundle.js, which is a JavaScript equivalent to a Spring Boot uber JAR. All your custom code AND the modules pulled in by the require() calls are stuffed into this file.

• It hooks into the babel engine, using both es2015 and react presets, in order to compile ES6 React code into a format able to be run in any standard browser.

For more details on how each of these JavaScript tools operates, please read their corresponding reference docs.

Want to see your JavaScript changes automatically? Run npm run-script watch to put webpack into watch mode. It will regenerate bundle.js as you edit the source.

With all that in place, you can focus on the React bits, which are fetched after the DOM is loaded. It is broken down into parts, as follows:

Since you are using webpack to assemble things, go ahead and fetch the modules you need:

Example 11. src/main/js/app.js

                  const React = require('react');                                        (1)                    const ReactDOM = require('react-dom');                                        (2)                    const client = require('./client');                                        (3)                                  

1	React is one of the main libraries from Facebook used to build this app.
2	ReactDOM is the package that serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package.
3	client is custom code that configures rest.js to include support for HAL, URI Templates, and other things. It also sets the default Accept request header to application/hal+json. You can read the code here.

The code for client is not shown because what you use to make REST calls is not important. Feel free to check the source, but the point is, you can plugin Restangular (or anything you like), and the concepts still apply.

Diving into React

React is based on defining components. Often, one component can hold multiple instances of another in a parent-child relationship. This concept can extend to several layers.

To start things off, it is very handy to have a top level container for all components. (This will become more evident as you expand upon the code throughout this series.) Right now, you only have the employee list. But you might need some other related components later on, so start with the following:

Example 12. src/main/js/app.js - App component

                  class App extends React.Component {                                        (1)                    constructor(props) { 		super(props); 		this.state = {employees: []}; 	}  	componentDidMount() {                                        (2)                    client({method: 'GET', path: '/api/employees'}).done(response => { 			this.setState({employees: response.entity._embedded.employees}); 		}); 	}  	render() {                                        (3)                    return ( 			<EmployeeList employees={this.state.employees}/> 		) 	} }                

1	class App extends React.Component{…​} is the method that creates a React component.
2	componentDidMount is the API invoked after React renders a component in the DOM.
3	render is the API that "draws" the component on the screen.

In React, uppercase is the convention for naming components.

In the App component, an array of employees is fetched from the Spring Data REST backend and stored in this component's state data.

React components have two types of data: state and properties.

State is data that the component is expected to handle itself. It is also data that can fluctuate and change. To read the state, you use this.state. To update it, you use this.setState(). Every time this.setState() is called, React updates the state, calculates a diff between the previous state and the new state, and injects a set of changes to the DOM on the page. This results in fast and efficient updates to your UI.

The common convention is to initialize state with all your attributes empty in the constructor. Then you look up data from the server by using componentDidMount and populating your attributes. From there on, updates can be driven by user action or other events.

Properties encompass data that is passed into the component. Properties do NOT change but are instead fixed values. To set them, you assign them to attributes when creating a new component, as you will soon see.

JavaScript does not lock down data structures as other languages do. You can try to subvert properties by assigning values, but this does not work with React's differential engine and should be avoided.

In this code, the function loads data through client, a Promise-compliant instance of rest.js. When it is done retrieving from /api/employees, it then invokes the function inside done() and sets the state based on its HAL document (response.entity._embedded.employees). See the structure of curl /api/employees earlier and see how it maps onto this structure.

When the state is updated, the render() function is invoked by the framework. The employee state data is included in the creation of the <EmployeeList /> React component as an input parameter.

The following listing shows the definition for an EmployeeList:

Example 13. src/main/js/app.js - EmployeeList component

                class EmployeeList extends React.Component{ 	render() { 		const employees = this.props.employees.map(employee => 			<Employee key={employee._links.self.href} employee={employee}/> 		); 		return ( 			<table> 				<tbody> 					<tr> 						<th>First Name</th> 						<th>Last Name</th> 						<th>Description</th> 					</tr> 					{employees} 				</tbody> 			</table> 		) 	} }              

Using JavaScript's map function, this.props.employees is transformed from an array of employee records into an array of <Element /> React components (which you will see a little later).

Consider the following listing:

              <Employee key={employee._links.self.href} data={employee} />            

The preceding listing creates a new React component (note the uppercase format) with two properties: key and data. These are supplied with values from employee._links.self.href and employee.

Whenever you work with Spring Data REST, the self link is the key for a given resource. React needs a unique identifier for child nodes, and _links.self.href is perfect.

Finally, you return an HTML table wrapped around the array of employees built with mapping, as follows:

              <table>     <tr>         <th>First Name</th>         <th>Last Name</th>         <th>Description</th>     </tr>     {employees} </table>            

This simple layout of state, properties, and HTML shows how React lets you declaratively create a simple and easy-to-understand component.

Does this code contain both HTML and JavaScript? Yes, this is JSX. There is no requirement to use it. React can be written using pure JavaScript, but the JSX syntax is quite terse. Thanks to rapid work on the Babel.js, the transpiler provides both JSX and ES6 support all at once.

JSX also includes bits and pieces of ES6. The one used in this code is the arrow function. It avoids creating a nested function() with its own scoped this and avoids needing a self variable.

Worried about mixing logic with your structure? React's APIs encourage nice, declarative structure combined with state and properties. Instead of mixing a bunch of unrelated JavaScript and HTML, React encourages building simple components with small bits of related state and properties that work well together. It lets you look at a single component and understand the design. Then they are easy to combine together for bigger structures.

Next, you need to actually define what an <Employee /> is, as follows:

Example 14. src/main/js/app.js - Employee component

                class Employee extends React.Component{ 	render() { 		return ( 			<tr> 				<td>{this.props.employee.firstName}</td> 				<td>{this.props.employee.lastName}</td> 				<td>{this.props.employee.description}</td> 			</tr> 		) 	} }              

This component is very simple. It has a single HTML table row wrapped around the employee's three properties. The property itself is this.props.employee. Notice how passing in a JavaScript object makes it easy to pass along data fetched from the server.

Because this component does not manage any state nor deal with user input, there is nothing else to do. This might tempt you to cram it into the <EmployeeList /> up above. Do not do it! Splitting your app up into small components that each do one job will make it easier to build up functionality in the future.

The last step is to render the whole thing, as follows:

Example 15. src/main/js/app.js - rendering code

                ReactDOM.render( 	<App />, 	document.getElementById('react') )              

React.render() accepts two arguments: a React component you defined as well as a DOM node to inject it into. Remember how you saw the <div id="react"></div> item earlier from the HTML page? This is where it gets picked up and plugged in.

With all this in place, re-run the application (./mvnw spring-boot:run) and visit http://localhost:8080. The following image shows the updated application:

You can see the initial employee loaded up by the system.

Remember using cURL to create new entries? Do that again with the following command:

curl -X POST localhost:8080/api/employees -d "{\"firstName\": \"Bilbo\", \"lastName\": \"Baggins\", \"description\": \"burglar\"}" -H "Content-Type:application/json"

Refresh the browser, and you should see the new entry:

Now you can see both of them listed on the web site.

Review

In this section:

• You defined a domain object and a corresponding repository.

• You let Spring Data REST export it with full-blown hypermedia controls.

• You created two simple React components in a parent-child relationship.

• You fetched server data and rendered them in as a simple, static HTML structure.

Issues?

• The web page was not dynamic. You had to refresh the browser to fetch new records.

• The web page did not use any hypermedia controls or metadata. Instead, it was hardcoded to fetch data from /api/employees.

• It is read only. While you can alter records using cURL, the web page offers no interactivity.

We address these shortcomings in the next section.

woodregave1949.blogspot.com

Source: https://spring.io/guides/tutorials/react-and-spring-data-rest/

Share this post