Selecting the Java Spring Boot React technology stack can build stable and efficient full-stack web applications, suitable for small and medium-sized to large enterprise-level systems. 2. The backend uses Spring Boot to quickly build a RESTful API. The core components include Spring Web, Spring Data JPA, Spring Security, Lombok and Swagger. The front-end separation is achieved through @RestController returning JSON data. 3. The front-end uses React (with Vite or Create React App) to develop a responsive interface, uses Axios to call the back-end API, React Router manages routing, combines useState or Redux Toolkit for state management, and uses Tailwind CSS or Bootstrap to beautify the interface. 4. During the joint debugging phase, the cross-domain problem is solved by configuring CORS or React to configure proxy proxy through Spring Boot, ensuring that front-end requests can be correctly forwarded to the back-end service. 5. Authentication adopts the JWT scheme. After the user logs in, the token is generated by Spring Security, and the front-end stores it and carries the Authorization header to complete the authentication in subsequent requests. 6. The recommended project structure is an independent directory separated by the front and back ends, which facilitates clear responsibilities and independent deployment. 7. Deploy optional solution 1: Spring Boot is packaged as a jar, and the React build static files are hosted by Nginx and reverse proxy API requests; or Solution 2: Put the React build product into the Spring Boot's static directory and is served by the backend, suitable for small projects. The technology stack is mature, has a perfect ecosystem and is active in the community. The key is to master the REST communication, state management, JWT authentication and Nginx deployment mechanisms, and efficiently build enterprise-level applications.

If you want to build a complete web application with a modern technology stack, Java Spring Boot React is a very robust and widely used option. This combination combines backend stability with enterprise-level features (Java/Spring Boot) and front-end responsive user experience (React), and is suitable for developing applications from small and medium-sized projects to large enterprise systems.

Below is a practical full-stack development route covering key steps, technical points and best practices.

1. Backend: Spring Boot (Java)

Spring Boot simplifies Java backend development, automatic configuration, embedded servers, and rich ecosystem make REST API development efficient.

Core Components:

• Spring Web : Build a RESTful interface
• Spring Data JPA : Database operations (supports MySQL, PostgreSQL, etc.)
• Spring Security : Certification and Authorization (JWT Common)
• Spring Boot DevTools : Hot deployment improves development efficiency
• Lombok : Reduce boilerplate code (getter/setter/constructor)
• Swagger/OpenAPI : API Documentation Generation

Example: A simple user API

 @RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAll();
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userService.save(user);
    }
}

Database connection (application.yml):

 spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydb
    username: root
    password: password
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

Tip: Use @RestController to return JSON, and the front and back ends communicate through JSON.

2. Front-end: React (Vite or Create React App)

React provides componentized UI development and improves construction speed with modern toolchains (such as Vite).

Commonly used technology stack:

• React JSX : Build a user interface
• Axios : Send HTTP request to Spring Boot backend
• React Router : Front-end routing
• State Management : useState/useReducer, complex projects can be used with Redux Toolkit or Context API
• Tailwind CSS / Bootstrap : Quickly beautify the interface

Example: Get the user list

 import { useEffect, useState } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8080/api/users')
      .then(response => setUsers(response.data))
      .catch(err => console.error(err));
  }, []);

  Return (
    <div>
      <h2>Users</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

Note: Cross-domain issues require CORS to be configured in Spring Boot, or to use a proxy.

3. Front-end joint debugging and deployment

Solve cross-domain in the development stage

Add in the Spring Boot main application class or configuration class:

 @Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE");
            }
        };
    }
}

Or use a proxy ( package.json ) in React:

 "proxy": "http://localhost:8080"

In this way, the front-end request /api/users will be automatically proxyed to http://localhost:8080/api/users .

4. Authentication and Security (JWT Example)

Typical process:

1. User login (POST /login )
2. Backend verification password, generate JWT Token
3. Front-end storage tokens (localStorage or cookies)
4. Authorization: Bearer <token>

Spring Security JWT Key Points:

• Customize UserDetailsService
• Generate and verify Tokens using JwtUtil tool class
• Add JwtRequestFilter to intercept requests and parse tokens

React login example:

 const handleLogin = () => {
  axios.post('/api/login', { username, password })
    .then(res => {
      localStorage.setItem('token', res.data.token);
      // Jump or update status});
};

5. Project structure suggestions (front and back end separation)

Recommended project directory structure:

 myapp/
├── backend/ <- Spring Boot project│ ├── src/main/java
│ └── pom.xml
├── frontend/ <- React project│ ├── src/
│ ├── public/
│ └── package.json
└── README.md

Advantages: Separate responsibilities, can be deployed independently, and clear teamwork.

6. Deployment plan

Solution 1: Front-end and back-end separation deployment

• Spring Boot is made into a jar package and run on the server (such as a cloud host): java -jar app.jar
• React build static files: npm run build
• Use Nginx to host the front end and reverse proxy API requests to the backend

Nginx configuration fragment:

 server {
    listen 80;
    root /var/www/myapp-frontend;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

Solution 2: Embed front-end (optional)

Put dist file built by React into Spring Boot's src/main/resources/static , and the service is provided by the backend. Suitable for small projects.

Summarize

This technology stack is mature, rich in documents and active in the community, and is very suitable for building enterprise-level full-stack applications. The key is to understand the communication mechanism (REST JSON), state management, authentication processes and deployment methods that are separated from front and back ends.

Basically all is it, not complicated but it is easy to ignore details.

The above is the detailed content of Full-Stack Web Development with Java, Spring Boot, and React. For more information, please follow other related articles on the PHP Chinese website!