Reminder APP with REACT and JSON server.

react is library that allows you to create interactive UIs. React efficiently updates and renders your application when data changes. react is also declarative and is thus easy to debug and your code is predictable

Component based

React components manage their own states. React allows passing down props. props are like inputs passed in a function. react elements describe what should be returned. props are passed in a component which is defined as a function. When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

Major components (App, Task and Tasks components)

The task component displays single task, and inherits task, onDelete, onToggle props from the task lists which is named tasks. the tasks or task list component populates the tasks using the map array method. App.js is the parent of both components and display both elements. App.js also defines the onDelete method, the onAdd method passed down as props. it uses the useEffect hook and fetch method to fetch data from the server. App.js also carries the routing logic which redirects to the different elements

JSON Server (Installing JSON server)

JSON server is available as a NPM Package. the installation is done using node.js package manager. to install run the command

$ npm install -g json-server

db. json file

{
  "tasks": [
    {
      "id": 1,
      "text": "Doctors Appointment",
      "day": "Feb 5th at 2:30",
      "reminder": true
    },
    {
      "text": "a new task",
      "day": "friday",
      "reminder": true,
      "id": 4
    },
    {
      "text": "Pending Assignment",
      "day": "friday July 24",
      "reminder": true,
      "id": 5
    },
    {
      "text": "Assignment",
      "day": "31 July 2021",
      "reminder": true,
      "id": 6
    }
  ]
}

GET, DELETE and POST request.

the application makes get, post and delete request to our mock API. this is done by using the useEffect hook combined with the fetch method using the API URL to make the request. the get and post requests are displayed below.

The delete and post request use useState to keep track of our state before and after form submission. we parse the data into string using the stringify method. the delete request is shown below. it uses the filter array method to delete tasks.


const deleteTask = (id) => {
  fetch(`http://localhost:5000/tasks/${id}`, {
    method: "Delete",
  })

  setTasks(tasks.filter((task) => task.id !== id))
}

Download and run task or follow link to deployed site.

clone or download a zip file and extract the contents. to run server run the command. ```npm run server

and to start the application run the command 

```npm start

the following screen will be displayed and start setting reminders.

follow the link to deployed site reminderjsonapp.herokuapp.com

weather map