How to integrate and deploy in the Java library in the react framework
React is a popular JavaScript library for building a user interface.Its component, high -performance and reusedability make it the first choice for many developers.In this article, we will discuss how to integrate and deploy the React framework in the Java class library.
1. Integrated React framework:
a. Create a Java project: First of all, you need to create a Java project that can use IDE (such as Intellij IDEA) or command line tools (such as Maven) to generate the project structure.
b. Introduction to React dependencies: Add REACT's dependencies to the project through Maven or Gradle.For example, add the following dependencies to the pom.xml file of the Maven project:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>react</artifactId>
<version>17.0.2</version>
</dependency>
c. Create React components: Create a React component in the Java project.You can use JavaScript or TypeScript to write components and save it in the appropriate position of the project.
script
// HelloWorld.js
import React from 'react';
function HelloWorld() {
return <h1>Hello, World!</h1>;
}
export default HelloWorld;
2. Deploy React framework:
a. Build React code: Use Webpack or Parcel to build tools, and pack the code of React components into static files that can run in the browser.This process can also use tools such as Babel for code conversion and compression.
bash
npx webpack
The above commands will automatically find the entrance files in the project and generate the packed file.You can specify the entry file and output directory in the webpack configuration file.
b. Integrated static resources: Copy the built react code file (usually a bundle.js file) to the resource directory of the Java project.This can be implemented by saving React's static files in the Web-INF directory under the Java class.
c. Configure the Java server: In the server configuration of the Java project, add the static file path of React to the resource processor of the web application.For example, add the following configuration items to the configuration file of the Spring Boot project:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**")
.addResourceLocations("classpath:/WEB-INF/static/");
}
}
This will allow the server to provide React static resource files from a specific URL path (eg/static).
d. Create page: Create a page or controller in the Java library to render the React component.You can use technologies such as JSP, Thymeleaf or Spring MVC to display the page and introduce React components in the page.
@Controller
public class HelloWorldController {
@GetMapping("/")
public String helloWorld(Model model) {
return "helloWorld";
}
}
html
<!-- helloWorld.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World Example</title>
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
In this way, when the user accesses the root URL, the server will render the HelloWorld.html page and load React components on the page.
At this point, we have learned how to integrate and deploy the React framework in the Java library.By building the Java project, integrated React, and deployment static files above the above steps, you can easily use React to build a user interface in Java applications.I hope this article can help you!
