Full-Stack Development With React and Java (Spring Boot): Complete 2025 Guide

1. Install Node.js and npm:

   React relies on Node.js and npm (Node Package Manager) to run its development server and manage packages.

   • Download and install the latest version of Node.js from the official website.
   • Verify the installation by running the following commands:

   node -v
   npm -v
   

2. Set Up a New React Project:

   React applications are commonly initialized using Create React App, a boilerplate tool maintained by the React team.

   • Install Create React App globally (Use below commands).

    npm install -g create-react-app

   • Create a new React project (Use below commands).

    npx create-react-app my-react-app

   • Navigate into the project directory (Use below commands).

    cd my-react-app

3. Run the React Application:
   • To start your React application locally and see it live in your browser, run:

    npm start

   • By default, this launches the app at http://localhost:3000. You should see a welcome screen powered by React.
4. Explore the Project Structure:

   Open your project folder in VS Code or any preferred code editor. Key folders include

   • ‘public/’: Static assets such as the main HTML file and favicon.
   • ‘src/’: All the source code, including entry points like index.js and App.js.

Install Java JDK:

To build a backend using Spring Boot or Java EE, you’ll need the Java Development Kit (JDK).

1. Download the JDK:
   • Visit the Oracle JDK download page.
   • Choose the correct version for your operating system (Windows, macOS, or Linux) and download the installer.
2. Install the JDK:
   • Windows:
     • Run the downloaded .exe file.
     • Follow the installation instructions.
     • During installation, note the installation directory (e.g - C:\Program Files\Java\jdk-21).
   • macOS:
     • Open the downloaded .dmg file.
     • Drag and drop the JDK icon into the Applications folder.
   • Linux:
     • Open a terminal.
     • Use a package manager to install the JDK. For example, on Ubuntu:

       sudo apt update
       sudo sudo apt install openjdk-21-jdk

3. Set Up Environment Variables:

   Proper environment variables ensure your system recognizes Java commands.

   • Windows:
     • Search for "Environment Variables" in the Start menu.
     • Click "Edit the system environment variables."
     • Under System Variables, click "New" and add JAVA_HOME with the path to your JDK installation (e.g - C:\Program Files\Java\jdk-21).
     • Find the Path variable, click "Edit," and add %JAVA_HOME%\bin.
   • macOS and Linux:
     • Open your terminal and edit your shell configuration file (.bashrc, .bash_profile, or .zshrc), then add:

       export JAVA_HOME=/path/to/jdk 
       export PATH=$JAVA_HOME/bin:$PATH

     • Replace /path/to/jdk with the actual path to your JDK path.
     • Save the file and run:

       source ~/.bashrc

4. Verify Installation:
   • Open a terminal or command prompt.
   • Run the following command to check if Java is installed and the version (Run below command):

     java -version

   • You should see output displaying the installed Java version.

Choose the Right Java Framework

Your backend framework impacts scalability, performance, and development speed. Here’s how to choose the best one for your project.

• You need rapid development and microservices architecture.
• A large, mature ecosystem and active community are important.
• You prefer REST API-centric development with minimal boilerplate.

• You're building enterprise-grade, monolithic systems.
• You need portability across vendors and cloud providers.
• You are experienced with traditional enterprise Java development.

• You're targeting serverless or cloud-native Kubernetes environments.
• Fast startup times and low memory usage are critical.
• You value modern microservice architecture with reactive support.

1. src/main/java:
   • This directory contains all the Java source files for your application.
   • You will find the main application class here, which is annotated with @SpringBootApplication. This class serves as the entry point for your Spring Boot application.

     package com.example.myspringbootapp;
     import org.springframework.boot.SpringApplication;
     import org.springframework.boot.autoconfigure.SpringBootApplication;
     
     @SpringBootApplication
     public class MySpringBootAppApplication {
         public static void main(String[] args) {
             SpringApplication.run(MySpringBootAppApplication.class, args);
         }
     }

     Copy code snippet
     
2. src/main/resources:
   • This directory contains all the non-Java resources needed for your application.
   • application.properties or application.yml: Configuration files where you can set various properties for your application, such as database connection settings.
   • static/: Contains static resources such as HTML, CSS, and JavaScript files.
   • templates/: Contains template files for web views if you are using a templating engine like Thymeleaf or Freemarker.
3. src/test/java:
   • This directory contains all the Java test files for your application.
   • You can write unit tests and integration tests here to ensure your application behaves as expected.
4. pom.xml or build.gradle:
   • These files are the build configuration files for Maven and Gradle, respectively.
   • They contain information about the project and configuration details used by the build tool to compile, package, and run your application.
   • Dependencies: Lists all the dependencies your project requires. For example, Spring Boot starters, database connectors, etc.
   • Plugins: Lists the plugins used for various build tasks.

By understanding this structure, you’ll be better equipped to organize your backend code, debug issues faster, and scale your project effectively.

Creating RESTful APIs in Spring Boot

In any modern full-stack web application, RESTful APIs act as the communication bridge between the frontend and the backend. These APIs allow the frontend to send and retrieve data from the server, enabling dynamic user experiences.

1. Create a REST Controller Class:
   • In your src/main/java/com/example/myspringbootapp directory, create a new package called controller.
   • Inside the controller package, create a new Java class named HelloController.java. And Implement the Controller class.

     package com.example.myspringbootapp.controller;
     import org.springframework.web.bind.annotation.GetMapping;
     import org.springframework.web.bind.annotation.RestController;
     
     @RestController
     public class HelloController {
     
         @GetMapping("/hello")
         public String hello() {
             return "Hello World";
         }
     }
     

     Copy code snippet
     
   • Start the application, and then open a web browser or Postman. Send a GET request to http://localhost:8080/hello. You should receive a response saying 'Hello World'.

1. Add Database Dependencies:
   • Add Dependencies: Ensure that your pom.xml includes the following dependencies:

     <dependencies>
       <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-data-jpa</artifactId>
       </dependency>
       <dependency>
           <groupId>com.h2database</groupId>
           <artifactId>h2</artifactId>
           <scope>runtime</scope>
       </dependency>
       <!-- other dependencies -->
     </dependencies>

     Copy code snippet
     
   • Update application.properties:
     • In src/main/resources/application.properties, add the following lines to configure the H2 database:

       spring.datasource.url=jdbc:h2:mem:testdb
       spring.datasource.driverClassName=org.h2.Driver
       spring.datasource.username=sa
       spring.datasource.password=
       spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
       spring.h2.console.enabled=true

       Copy code snippet
       
2. Create a JPA Entity:
   • Create an Entity Class:
   • In src/main/java/com/example/myspringbootapp, create a new package called model.
   • Inside the model package, create a new Java class named Message.java.

     package com.example.myspringbootapp.model;
     
     import javax.persistence.Entity;
     import javax.persistence.GeneratedValue;
     import javax.persistence.GenerationType;
     import javax.persistence.Id;
     
     @Entity
     public class Message {
     
         @Id
         @GeneratedValue(strategy = GenerationType.AUTO)
         private Long id;
         private String content;
     
         public Message() {
         }
     
         public Message(String content) {
             this.content = content;
         }
     
         public Long getId() {
             return id;
         }
     
         public void setId(Long id) {
             this.id = id;
         }
     
         public String getContent() {
             return content;
         }
     
         public void setContent(String content) {
             this.content = content;
         }
     }

     Copy code snippet
     
3. Create a Repository Interface:
   • In src/main/java/com/example/myspringbootapp, create a new package called repository.
   • Inside the repository package, create a new Java interface named MessageRepository.java.

     package com.example.myspringbootapp.repository;
     
     import com.example.myspringbootapp.model.Message;
     import org.springframework.data.jpa.repository.JpaRepository;
     import org.springframework.stereotype.Repository;
     
     @Repository
     public interface MessageRepository extends JpaRepository <Message, Long> {
     }

     Copy code snippet
     
   • Explanation:
     • The MessageRepository.java interface is a crucial part of integrating your Spring Boot application with the database. Here’s why it’s essential and how it works:
     • Repository Pattern: The MessageRepository interface follows the repository pattern, which abstracts the data access layer and provides a more convenient and cleaner way to interact with the database.
     • Extends JpaRepository: By extending the JpaRepository interface, MessageRepository inherits several methods for working with Message persistence, including CRUD operations (Create, Read, Update, Delete) without needing to implement them yourself.
     • Spring Data JPA: Spring Data JPA is a part of the larger Spring Data family, which makes it easy to implement JPA-based repositories. The framework will automatically provide implementations for the methods inherited from JpaRepository at runtime.
4. Update the Controller:
   • Modify the Controller to Use the Database:
   • Update the HelloController to use the MessageRepository to save and retrieve the message.

   package com.example.myspringbootapp.controller;
   
   import com.example.myspringbootapp.model.Message;
   import com.example.myspringbootapp.repository.MessageRepository;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.PostMapping;
   import org.springframework.web.bind.annotation.RequestBody;
   import org.springframework.web.bind.annotation.RestController;
   
   import java.util.List;
   
   @RestController
   public class HelloController {
   
       @Autowired
       private MessageRepository messageRepository;
   
       @PostMapping("/hello")
       public Message saveMessage(@RequestBody Message message) {
           return messageRepository.save(message);
       }
   
       @GetMapping("/hello")
       public List<Message> getMessages() {
           return messageRepository.findAll();
       }
   }

   Copy code snippet
   
   • Result:
     • Now we have created two endpoints:
       • POST /hello: To save a message.
       • GET /hello: To retrieve all messages.
5. Test the APIs:
   • Start your Spring Boot application as before.
   • Use Postman or curl to send a POST request to http://localhost:8080/hello with the following JSON body to save the message in the database:

     {
       "content": "Hello, World!"
     }

   • Use a web browser or Postman to send a GET request to http://localhost:8080/hello.
   • You should see the stored message in the response.

1. Add Security Dependencies:
   • Ensure that your pom.xmlincludes the following dependencies:

     <dependencies>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>
          </dependency>
         <dependency>
             <groupId>io.jsonwebtoken</groupId>
             <artifactId>jjwt</artifactId>
             <version>0.9.1</version>
         </dependency>
         <!-- other dependencies -->
     </dependencies>

     Copy code snippet
     
2. Create a Security Configuration Class (Configure Security):
   • In src/main/java/com/example/myspringbootapp, create a new package called security.
   • Inside the security package, create a new Java class namedSecurityConfig.java.

     package com.example.myspringbootapp.security;
     
     import org.springframework.context.annotation.Bean;
     import org.springframework.context.annotation.Configuration;
     import org.springframework.security.config.annotation.web.builders.HttpSecurity;
     import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
     import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
     import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
     import org.springframework.security.crypto.password.PasswordEncoder;
     
     @Configuration
     @EnableWebSecurity
     public class SecurityConfig extends WebSecurityConfigurerAdapter {
     
         @Override
         protected void configure(HttpSecurity http) throws Exception {
             http
                 .csrf().disable()
                 .authorizeRequests()
                 .antMatchers("/hello").authenticated()
                 .and()
                 .httpBasic();
         }
     
         @Bean
         public PasswordEncoder passwordEncoder() {
             return new BCryptPasswordEncoder();
         }
     }

     Copy code snippet
     
   Explanation:
   • @EnableWebSecurity: Enables Spring Security’s web security support.
   • configure(HttpSecurity http): Configures HTTP security to disable CSRF and require authentication for the /hello endpoint.
   • httpBasic(): Uses basic authentication for simplicity.
   • passwordEncoder(): Defines a PasswordEncoder bean using BCryptPasswordEncoder.
3. Create a UserDetailsService Implementation (Implement User Authentication):
   • In the security package, create a new class named CustomUserDetailsService.java.

     package com.example.myspringbootapp.security;
     
     import org.springframework.beans.factory.annotation.Autowired;
     import org.springframework.security.core.userdetails.User;
     import org.springframework.security.core.userdetails.UserDetails;
     import org.springframework.security.core.userdetails.UserDetailsService;
     import org.springframework.security.core.userdetails.UsernameNotFoundException;
     import org.springframework.security.provisioning.InMemoryUserDetailsManager;
     import org.springframework.stereotype.Service;
     
     @Service
     public class CustomUserDetailsService implements UserDetailsService {
     
         @Autowired
         private InMemoryUserDetailsManager inMemoryUserDetailsManager;
     
         @Override
         public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
             return inMemoryUserDetailsManager.loadUserByUsername(username);
         }
     
         @Autowired
         public void initialize() {
             User.UserBuilder users = User.builder();
             inMemoryUserDetailsManager.createUser(users.username("user").password(new BCryptPasswordEncoder().encode("password")).roles("USER").build());
         }
     }

     Copy code snippet
     
   Explanation:
   • CustomUserDetailsService: Implements UserDetailsService to load user-specific data.
   • InMemoryUserDetailsManager: Manages user details in memory.
   • initialize(): Creates a default user with the username user and password password.
4. Test the Security Configuration:
   • Unauthorized case:
   • Open Postman
   • Create a New Request with request type as GET
   • Enter the URL http://localhost:8080/hello.
   • Send the Request
   • You should receive a 401 Unauthorized response, indicating that authentication is required.
   • Authorized case:
   • Open Postman
   • Create a New Request with request type as GET
   • Enter the URL http://localhost:8080/hello.
   • Go to the Authorization tab.
   • Select Basic Auth from the Type dropdown.
   • Enter ‘user’ as the username and ‘password’ as the password.
   • You should see a 200 OK response status and the response body with the messages from the database.

1. Install Axios (Use below command):

   npm install axios

2. Create Services for API Calls:
   • Create a Service File:
     • Inside the src directory, create a new folder called services.
     • Inside the services folder, create a file named apiService.js.

       import axios from 'axios';
       
       const API_URL = 'http://localhost:8080';
       
       export const getMessages = async () => {
           try {
               const response = await axios.get(`${API_URL}/hello`);
               return response.data;
           } catch (error) {
               console.error('Error fetching messages:', error);
               throw error;
           }
       };
       
       export const saveMessage = async (content) => {
           try {
               const response = await axios.post(`${API_URL}/hello`, { content });
               return response.data;
           } catch (error) {
               console.error('Error saving message:', error);
               throw error;
           }
       };

       Copy code snippet
       
   • Explanation:
     • By importing Axios library, which allows making HTTP requests from the client-side JavaScript code.
     • getMessages() function sends a GET request to fetch messages from the backend.
     • saveMessage(content) function sends a POST request to save a new message on the backend.
   • Create a Message Component:
     • Inside the src directory, create a new folder called components.
     • Inside the components folder, create a file named MessageComponent.js.

       import React, { useState, useEffect } from 'react';
       import { getMessages, saveMessage } from '../services/apiService';
       
       const MessageComponent = () => {
           const [messages, setMessages] = useState([]);
           const [newMessage, setNewMessage] = useState('');
       
           useEffect(() => {
               fetchMessages();
           }, []);
       
           const fetchMessages = async () => {
               try {
                   const data = await getMessages();
                   setMessages(data);
               } catch (error) {
                   console.error('Failed to fetch messages', error);
               }
           };
       
           const handleSaveMessage = async () => {
               try {
                   await saveMessage(newMessage);
                   fetchMessages();
                   setNewMessage('');
               } catch (error) {
                   console.error('Failed to save message', error);
               }
           };
       
           return (
               <div>
                   <h1>Messages</h1>
                   <ul>
                       {messages.map((message) => (
                           <li key={message.id}>{message.content}</li>
                       ))}
                   </ul>
                   <input
                       type="text"
                       value={newMessage}
                       onChange={(e) => setNewMessage(e.target.value)}
                       placeholder="Enter new message"
                   />
                   <button onClick={handleSaveMessage}>Save Message</button>
               </div>
           );
       };
       
       export default MessageComponent;

       Copy code snippet
       
   • Update App Component:
     • Open the App.js file and import the MessageComponent.

       import React from 'react';
       import './App.css';
       import MessageComponent from './components/MessageComponent';
       
       function App() {
           return (
               <div className="App">
                   <header className="App-header">
                       <MessageComponent />
                   </header>
               </div>
           );
       }
       
       export default App;

       Copy code snippet
       
3. Run Your React App:
   • Ensure your Java backend is running.
   • In the terminal, start your React app with the following command:

     npm start

4. Test the Integration:
   • Open your web browser and navigate to http://localhost:3000.
   • You should see the list of messages fetched from the backend.
   • Add a new message using the input field and save it. The new message should appear in the list, indicating successful integration with the backend.

1. CORS Issues Between React and Spring Boot

Problem: When your React app (running on localhost:3000) attempts to access a Spring Boot backend (localhost:8080), browsers may block the request due to CORS (Cross-Origin Resource Sharing) policies.

Fix: Configure CORS in Spring Boot with WebMvcConfigurer or use the @CrossOrigin annotation to explicitly allow your frontend's origin.

Example:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

Copy code snippet


Note: Use environment variables to set dynamic origins in production deployments.

2. State Mismatch Between Frontend and Backend

   Problem: React and Spring Boot may not always "speak the same language" when it comes to form state, validation, or data models. For example:

   • React may send null while Java expects a non-null value.
   • Java expects a Long, React sends a String.
   • Empty fields or default values can get misinterpreted or rejected by the backend.
   Fix:
   • Always mirror the backend model in your React form logic or DTOs.
   • Use schema validation tools like Yup (in React) and Bean Validation (Hibernate Validator) in Java (@NotNull, @Size, etc).
   • Handle optional/nullable fields gracefully.