How to Seamlessly Build a React App with a Java Backend

1. Install Node.js and npm:
   • Download and install Node.js from the official website.
   • Verify installation (Use below commands).

   node -v
   npm -v
   

2. Set Up a New React Project:
   • 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:
   • Start the development server (Use below commands).
   • Your app will open at http://localhost:3000.
4. Explore the Project Structure:
   • Open project in VS Code or any code editor.
   • ‘public/’: Contains public assets.
   • ‘src/’: Contains source code (index.js, App.js).

• Install Java:
1. Download the JDK:
   • Visit the Oracle JDK download page.
   • Choose the appropriate version for your operating system 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-xx).
   • 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 apt install openjdk-11-jdk

3. Set Up Environment Variables:
   • Windows:
     • Open the Start menu, search for "Environment Variables," and select "Edit the system environment variables."
     • In the System Properties window, click "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-xx).
     • Find the Path variable, click "Edit," and add %JAVA_HOME%\bin.
   • macOS and Linux:
     • Open a terminal.
     • Edit the .bashrc, .bash_profile, or .zshrc file (depending on your shell) to add the following lines:

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

     • Replace /path/to/jdk with the actual path to your JDK installation.
     • 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 indicating the installed Java version.
• Select a Java Framework: Popular Java frameworks include Spring Boot, Java EE, and Quarkus. Choose the one that best fits your project requirements.
• Use Spring Boot if:
  • You need a mature and robust ecosystem.
  • Rapid development and microservices are priorities.
  • You want strong community support and extensive documentation.
• Use Java EE (Jakarta EE) if:
  • You are building large, enterprise-scale applications.
  • You need a standardized platform with vendor neutrality.
  • You are experienced with traditional enterprise Java development.
• Use Quarkus if:
  • You are targeting cloud-native or serverless environments.
  • Fast startup times and low memory usage are critical.
  • You are building microservices and need strong Kubernetes integration.
• IDE Setup: Like React, select an IDE for Java development. IntelliJ IDEA is a popular choice.

With your development environment ready, you're all set to start building your React and Java backend application. In the next sections, we'll delve deeper into each aspect.

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.

Creating RESTful APIs

The backbone of modern web applications, RESTful APIs, enable your React front end to communicate with the Java backend. Designing and implementing these APIs is a crucial step in your project. Let's create a RESTful API in Spring Boot

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.