#100DaysOfMERN - Day 16

#100DaysOfMERN - Day 16

·

6 min read

The past week has been pretty frustrating. I had planned to learn how to read and write to local JSON data, and I could make some parts of it work as I wanted, but I kept hitting walls. As an example, it's difficult to fight a CORS error if you don't even know what that is and where it's coming from. I'm still following the Open University fullstackopen course, but the learning curve is almost vertical at the moment. So I'm taking a step back again to wade through fundamentals.

✏ What is a REST API?

Starting with definitions:

API = Application Programming Interface

REST = Representational State Transfer


API

Deconstructing this further into its components:

An application in this context is something that provides functionality or information. In order to tell the application how I want it to function or what information I want from it, I need an interface (endpoints) that my program can communicate with.

REST

A REST API is an API that follows certain guidelines and a certain structure. You could probably write whole books about this topic, but I don't see much sense in diving too deep into it. The most important thing to remember is that a REST API offers endpoints that are accessible through a URL, and return a resource. This resource can be a webpage, or it can be a JSON data object.

It offers a list of HTTP methods to interact with these endpoints. The most relevant are:

  • POST: Sending information --> CREATE data
  • GET: Retrieving information --> READ data
  • PUT: Editing information --> UPDATE data
  • DELETE: Deleting information --> DELETE data

These four HTTP methods form another acronym: CRUD - which describes the four basic functions that are necessary to handle and store data.

A REST API also makes use of different standardised status codes, the most common being

  • 200: OK
  • 404: Resource not found
  • 500: General internal server error

Endpoints/Routes

An example for an endpoint would be the following URL:

https://my-booklist.com/api/books

This endpoint would be used for:

  • GET requests (retrieve the list to display it)
  • POST requests (create a new book entry and add it to the list)

Another route would offer the possibility to work on one specific data entry:

https://my-booklist.com/api/books/3

This endpoint could be used for:

  • PUT requests (update the book with id=3)
  • DELETE requests (delete this book)

I've already explored HTTP (GET) requests on Day 9 and Day 11, although I was more focussed on the actual code when making a XMLHttpRequest, and how to process the response with either callbacks or promises. What all requests have in common is that I have to define the method I'd like to use. Looking at the example routes above, they're the same for GET and POST requests (and also the same for PUT and DELETE requests). Defining the method is necessary to tell the server what it should do with my request, and how it should respond to it.


✏ Recap

I've learned

  • the characteristics of a REST API
  • API endpoints/routes
  • different request methods

✏ Next:

  • setting up a server with Express
  • making a GET request

✏ Thanks for reading!

I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subsribe to my newsletter. Until next time 👋


✏ Previous Posts

  • Day 1: Introduction, Node.js, Node.js in the terminal
  • Day 2: npm, node_modules, package.json and package-lock.json, local vs global installation of packages
  • Day 3: Create a React app without create-react-app, Webpack, Babel
  • Day 4: npx and cowsay
  • Day 5: npm vs. npx, npm audit, semantic versioning and update rules
  • Day 6: Call stack, event loop, JavaScript engine, JavaScript runtime
  • Day 7: Call stack and event loop in Node.js, setImmediate()
  • Day 8: setImmediate(), process.nextTick(), event loop phases in Node.js
  • Day 9: Network requests with XMLHttpRequest and callbacks
  • Day 10: Promises
  • Day 11: Network requests with XMLHttpRequest and Promises
  • Day 12: React Quiz App part 1
  • Day 13: React Hangman
  • Day 14: FullStackOpen course 1: details of GET and POST requests, request headers
  • Day 15: React Hangman: Trigger fetch with click event callback vs useEffect