React JS: Lab#RE03-4

Developing a To-Do app with RESTful API integration, from monolith to several components and domains

Introduction

• Class notes: LINK
• useContext class link: LINK
• async link: LINK
• useContext hook link: LINK
• createContext API link: LINK

We’ll pick up where we left off in the Lab#RE03-3. We’ll refactor the ToDo application from a monolith into several components.

Getting started

Project creation

Create a new ReactJS project with the following dependencies:

• react-router-dom
• semantic-ui-react and semantic-ui-css
• axios
• uuidv4 for UUID generation. LINK

Mock API creation

Go to mockAPI and create a new API. Then, create several endpoints for each required transaction.

TODO: define them once the app is designed

Application design

TODO: Create a functional diagram of the application and pseudo-code

Layers

Services

TodoContext

TodoService

Components

TodoList

TodoAdd

TodoApp