DEV Community

Cover image for Create your first spring / react application

Posted on • Updated on

Create your first spring / react application

In this post, we will learn how to create your first web application todo list using spring boot and react js with mysql as database and deployement with docker.
Before begin we should have java 11 or 8 with nodejs installed in our machine.

First we create back end app :

For creating our spring application we can use the web site to init our project : Link
and chose the dependency we want as define in the next picture :
.Lombok :
for use the annotion to create getter,setter and constructors.
.Spring web :
for building a REST FULL api.
.Spring data JPA:
for persisting data to sql using JPA
.Mysql driver :
for connection to database MYSQL

Open the project in our IDE :

I use Intellij IDE , if you want to use eclipse it doesn't matter, just after dowlnload the zip file, extracted and open it in IDE that you use.
After that create 3 packages :

  • Entitie : adding the entities that will be use to persist data
  • Repository : adding repository
  • Service : create our services
  • Controller : create the controllers for the end point.


Let's create our classes :


As we know , we want to create a todo list application so we will create a class Todo :

public class Todo {
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String task;
    private boolean isCompleted;

    public Todo(String task, boolean isCompleted) {
        this.task = task;
        this.isCompleted = isCompleted;
Enter fullscreen mode Exit fullscreen mode


The repository is Interface implement JpaRepository and have many fonction for persisting data .

public interface TodoRepository extends JpaRepository<Todo, Long> {
Enter fullscreen mode Exit fullscreen mode


The service represent service layer that contains the application proccessing

public class TodoService {
    private final TodoRepository todoRepository;

    public TodoService(TodoRepository todoRepository) {
        this.todoRepository = todoRepository;

    public List<Todo> getAllTodos() {
        return todoRepository.findAll();

    public Optional<Todo> getTodo(Long id) {
        return todoRepository.findById(id);

    public Todo UpdateTodo(Long id, Todo todo) {

    public Todo addTodo(Todo todo) {

    public void deleteTodo(Long id) {

Enter fullscreen mode Exit fullscreen mode


The controller represente the web layer of application, the class annotaded with @RestController to tell spring container to init the class as class contains the end point for the application .

@CrossOrigin(origins = "*", allowedHeaders = "*")
public class TodoRestController {
    private final TodoService todoService;

    public TodoRestController(TodoService todoService) {
        this.todoService = todoService;

    public List<Todo> getAllTodos() {
        return todoService.getAllTodos();

    public Todo getTodo(@PathVariable("id") Long id) {
        return todoService.getTodo(id).isPresent() ? todoService.getTodo(id).get() : null;

    public Todo UpdateTodo(@PathVariable("id") Long id, @RequestBody Todo todo) {
        return todoService.UpdateTodo(id, todo);

    public Todo addTodo(@RequestBody Todo todo) {
        return todoService.addTodo(todo);

    public void deleteTodo(@PathVariable("id") Long id) {

Enter fullscreen mode Exit fullscreen mode

Config data Source

The most popular adventege of spring is autoconfiguration thatway for connecting to the database we must implemnt the properties in application.propertie .

Enter fullscreen mode Exit fullscreen mode

RUN application

If you use maven in terminal you can run your application using this commande :
mvn spring-boot:run but first create your instance of mysql

Test the application :

For testing our application we can use postman as client :

Add todo :


update todo :


List of todo :


Delete Todo :


for more details :
Github repo

Top comments (0)