Project React REST API

[haydanu]

@lighteagle @iqbalmmm @robyafrizal

[haydanu]

Task

• Create project-rest-api-react in your local using npx create-react-app project-rest-api-react
• Push to your GitHub repository and deploy to Netlify

Install dependencies needed to support this project

• axios
• react-router-dom
• and anything you need

Rules

• CRUD using REST API
• Use This API
• React Styling

API Endpoints

HTTP	Routes	Description
GET	/	to get all todos
GET	/:id	to get each todo
PUT	/:id	to update specific todo
DELETE	/:id	to delete specific todo
POST	/	to post new todo

USAGE

Please install axios first before using it

• GET TODOS

axios.get(`https://cobacoba-hayepe.herokuapp.com/`)
      .then(result => console.log(result))
      .catch(error => console.log(error));
  };

• GET SPECIFIC TODOS

// id = todos id
axios.get(`https://cobacoba-hayepe.herokuapp.com/${id}`)
      .then(result => console.log(result))
      .catch(error => console.log(error));
  };

• ADD NEW TODOS

// just need to pass todo to body
// id, isEdit and status is set to default

axios.post(`https://cobacoba-hayepe.herokuapp.com`, {
    todo: your_todo // your todo value
})
      .then(result => console.log(result))
      .catch(error => console.log(error));
  };

• UPDATE TODOS

// have to fill body with your todo and status

axios.put(`https://cobacoba-hayepe.herokuapp.com`, {
    todo: your_todo,
    status: your_todo_status // 0 for false and 1 for true
})
      .then(result => console.log(result))
      .catch(error => console.log(error));
  };

• DELETE TODOS

// id = todos id to be deleted
axios.delete(`https://cobacoba-hayepe.herokuapp.com/${id}`)
      .then(result => console.log(result))
      .catch(error => console.log(error));
  };