What CRUD means to a new Software engineer when dealing with JavaScript and React!

The title is deceiving, and might even need to be clarified to most. CRUD stands for CREATE, READ, UPDATE, and DELETE. To a new software engineer, it means one of two things. When talking about normal full-length javascript it's about using a long more intricate code to help send information where it needs to go or where it is being received from. For an example of the long code:

function choresForHome(){
fetch(“http://localhost:4000/chores”)
    .then(response => response.json())
    .then(chores => console.log(chores))
}

Now the second thing that would pop into a new software engineer head is the React version. Which is a much smaller code pulling from code that has already been put together by others. It shortens the amount of code needed to complete one task to another. For an example of the shorter code:

useEffect(() => {
    fetch("http://localhost:4000/chores")
    .then((r) => r.json())
    .then((items) => setItems(items));
}, [ ])

In javascript and React CRUD does the same things just in different ways. One way is shortening the code while using others' code to fill in the gaps like in React. Another way is laying out everything in front of you with javascript.

Each of the CRUD operations looks different but not by much. For example, if you look at both the examples that we already went over you will see the similarities. Both examples are known as the HTTP verb GET(better known as READ). It requests information from an outside API or from a created .json. Then it returns the promise of information which then is placed onto the front end of your app. The only true difference between the two codes is the useEffect.

The hook known as the useEffect is only used in React. If you attempt to use it as normal code without react you will run into coding problems. The useEffect hook tells react that your component has to do something after rendering. When using this hook you need to be careful of not creating a never ending loop. Even if you do create a loop it is simple to fix. In this example:

useEffect(() => {
    fetch("http://localhost:4000/chores")
    .then((r) => r.json())
    .then((items) => setItems(items));
}, [ ])

You can see brackets at the very end ([ ]). These brackets stop the continuous loop that would occur if you just used the operation. Now let's look at all the different operations of the CRUD acronym.

Since we have used the READ (better known as GET) in our example we will start with CREATE. CREATE (better known as POST) is a way to display information that was created. For example:

fetch("http://localhost:4000/chores", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(infoData)
    })
      .then(response => response.json())
      .then(data =>{
        history.push(`ChoreDetails/${data.id}`)
      })

This operation will take the information given to it and post it to a list or show you information from a form someone would complete.

Our next operation is an UPDATE which is also known as a PATCH and PUT. When using the UPDATE operation you will be using one of these HTTP verbs. An example of an UPDATE operation is:

fetch("http://localhost:4000/chores", {
   method: "PATCH",
   headers: {
       "Content-Type": "application/json"
   },
   body: JSON.stringify({ chore: { completed: true } })
})
   .then(r => r.json())
   .then(data => console.log(data.chores))

When using PUT or PATCH is not much different then using a POST but you need to be careful not to mix the two or you will be updating information when really you want to push some information.

Now last but not least the CRUD operation. Everyone knows what DELETE is. The operation DELETE is also an HTTP verb. It helps to delete information someone has messed up on or no longer wants. Software engineers would attach it to a button with an event listener so someone on the front-end server could delete information they didn't want. Here is an example of the final CRUD operation:

function handleDelete() {
       fetch(`http://localhost:4000/chores${id}`, {
           method: "DELETE"
       })
       onDeleteChore(id)
   }

It might seem hard to remember all the information that has been given to you. It might be extremely overwhelming to most, but one thing you need to remember is that you're not meant to remember EVERYTHING that is taught to you. Sure remember the CRUD acronym CREATE, READ, UPDATE, and DELETE but you do not have to remember how to create each one of them from scratch. So have fun with coding and try not to let it overwhelm you!