MySQL + Spring Boot + React = Full Stack

In this tutorial, we will learn how to create a full stack application using React for the front end, Spring Boot for the back end, and MySQL for the database.

Before we get started, make sure you have these tools installed:

• Node.js for React development
• Java Development Kit (JDK) for Spring Boot development
• MySQL server for the database

Step 1: Generate a new React app

Open your terminal and run the following command to generate a new React app:

npx create-react-app frontend

This will create a new folder called frontend with all the necessary files for a React app.

Step 2: Create a new Spring Boot app

Create a new Spring Boot app using your preferred IDE or from the command line. You can use the Spring Initializr website to generate a new project with the following dependencies:

• Spring Web
• Spring Data JPA
• MySQL Driver

Step 3: Set up MySQL database

Create a new database in MySQL using the following command:

CREATE DATABASE mydatabase;

Then, create a new table called users with columns for id, name, and email:

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255),
    email VARCHAR(255)
);

Step 4: Connect Spring Boot to MySQL

Add the MySQL database configuration in the src/main/resources/application.properties file:

spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase
spring.datasource.username=root
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update

Step 5: Create API endpoints in Spring Boot

Create a new package called controller in the Spring Boot project and add a new class called UserController. Add the following code to create API endpoints for getting all users and adding a new user:

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

    @Autowired
    private UserRepository userRepository;

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

    @PostMapping
    public User addUser(@RequestBody User user) {
        return userRepository.save(user);
    }
}

Step 6: Create a User entity in Spring Boot

Create a new package called model in the Spring Boot project and add a new class called User with fields for id, name, and email.

Step 7: Install Axios in React

Install Axios for making HTTP requests in your React app by running the following command in the frontend folder:

npm install axios

Step 8: Create React components

Create a new folder called components in the React app and add components for displaying all users and adding a new user.

Step 9: Make API calls in React

Use Axios to make API calls to the Spring Boot backend from your React components. Make a GET request to fetch all users and a POST request to add a new user.

Step 10: Run your application

Start the Spring Boot application and the React app by running mvn spring-boot:run in the Spring Boot project and npm start in the React app. Visit http://localhost:3000 in your browser to see the full stack application in action.

Congratulations, you have successfully created a full stack application using React, Spring Boot, and MySQL! Feel free to customize and expand on this tutorial to suit your specific needs.