Create your first spring / react application
Tags: spring, react, mysql, docker
Published: 2021-09-18 13:49:08

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](https://start.spring.io/)
and chose the dependency we want as define in the next picture :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxphu0dm7lsvgdeb8dec.png)
._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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfd13kqkbo6nf6rtgyug.png)

#Let's create our classes : 
##Entity
As we know , we want to create a todo list application so we will create a class Todo :
```
@Entity()
@NoArgsConstructor()
@AllArgsConstructor()
@Getter
@Setter()
@ToString()
public class Todo {
    @Id()
    @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;
    }
}
```
##Repository
The repository is Interface implement JpaRepository and have many fonction for persisting data .
```
@RepositoryRestResource
public interface TodoRepository extends JpaRepository<Todo, Long> {
}
```
##Service 
The service represent service layer that contains the application proccessing
```
@Service
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) {
        todo.setId(id);
        return todoRepository.save(todo);
    }

    public Todo addTodo(Todo todo) {
        return todoRepository.save(todo);
    }

    public void deleteTodo(Long id) {
        todoRepository.deleteById(id);
    }

}
```
##Controller
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 = "*")
@RestController
public class TodoRestController {
    private final TodoService todoService;


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

    @GetMapping("/listTodos")
    public List<Todo> getAllTodos() {
        return todoService.getAllTodos();
    }

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

    @PutMapping("/updateTodo/{id}")
    public Todo UpdateTodo(@PathVariable("id") Long id, @RequestBody Todo todo) {
        todo.setId(id);
        return todoService.UpdateTodo(id, todo);
    }

    @PostMapping("/addTodo")
    public Todo addTodo(@RequestBody Todo todo) {
        return todoService.addTodo(todo);
    }

    @DeleteMapping("/deleteTodo/{id}")
    public void deleteTodo(@PathVariable("id") Long id) {
        todoService.deleteTodo(id);
    }

}
```
##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* .
```
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/SPRING_DB
spring.datasource.username=root
spring.datasource.password=root
```
##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 :

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7bgvry4zzzhcr6nnt97.png)

###update todo :

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj2i8842mwvhcak3mz8m.png)

###List of todo :

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyw3fgcremwvmo9u8vue.png)

###Delete Todo :

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9z1xffm2tq2pivacxzc.png)
 
for more details :
[Github repo](https://github.com/Abdelouahedd/spring_react_todo)