Saad

Front-End Developer | Computer Scientist

Menu Close

πŸš€ 100 Days of React – What I Did on Day 31 to 35

I have not been writing for a couple of days. More than a couple. The thing is I have been so indulged in some things that I couldn’t find the time to blog about my progress in React. My sophomore year is starting next week. And as it begins, I know this for the fact that I won’t be able to keep writing. That is why I have decided that after this blog, I will write again on Sunday, and then after five days interval β€” Friday. And then again on Sunday. This is how I will keep writing when my university starts. ✨

There are so many things I have to write in this piece. I will try to keep this blog short. If you have read my last blog, you would know that at the end of it, I have mentioned a component that I was building β€” MovieForm. So let’s start from there. πŸ™Œ

πŸ“¦ MovieForm component

I will not try to explain the code because it is too complicated for me to explain. But you can check it if you want. It’s available on GitHub like always. Writing this code was one of the toughest challenges so far.

πŸ‘¨β€πŸ’» Although I am not explaining you the logic, I should definitely tell and then show you what this component does. I have added a New Movie button at the top. If you hit this button, you will be taken to a new form. You can use this form to add new movies in your Vidly application. I have set some validations like rate of the movie should be in between 0 to 10, and the number in stock should be in between 0 to 100.

There is also one other thing that I have programmed in this component. I can also edit existing movies. I can change its name, its rate, genre, and its number in stock. Pretty slick, right!? 😎

editing movies - msaaddev

πŸ” Search Box

After creating MovieForm component, I started working towards building a search box. As the name suggests, it will search all the movies in the database for the entered movie. Again, I will not explain the code. Although following is only a small piece of code that I wrote for this search box. It doesn’t contain any logic.

I will show you the output because without it, how would you guys know what I have created. πŸ₯‚

search box - msaaddev

πŸ“ž Calling Backend Services

For being called a react developer, I need to know how to connect my React applications to the backend. As I am not focusing on the backend right now, I am using a fake backend called JSON Placeholder.

JSON Placeholder is a fake online REST API. This website provides a bunch of endpoints that are publically accessible over the internet. I can send HTTP requests to these endpoints to get, create, update, and delete data.

json_placeholder - msaaddev

πŸ‘“ Axios

As you folks know React is a simple, lightweight library for building User Interfaces. All it cares about is rendering the view and managing the DOM. So to send HTTP requests, we use libraries like jQuery AJAX, Axios in React. We can also use Fetch API for this purpose, but I am sticking with Axios for now.

πŸš€ Install this library in your React app by running the following command in the terminal:

npm i axios@version

axios - msaaddev

πŸ“¦ After this, add it at it in your application by inserting this piece of code at the top:

import axios from "axios";

🌐 Getting Data

When I was done with installing Axios in the new React app I created for practicing calling backend services; I learned how to get data from the server through it. For this I usedΒ axios.get() method. The first argument of this function is the URL from where you need to fetch data. In my case, it was from here. I will not explain the further things I did, but here is the code for getting the data via Axios.

Earlier in my course, I learned that when we need to fetch data from the server, we do this in componentDidMount. If you see the above code, I have got the data from the server and then update my state. πŸ’―

Following is the before adding the above code in my app and after adding it:

getdata - msaaddev

πŸ“¦ Creating Data

If you see in the above GIF, you’ll see an Add button at the top of the application. The purpose of it is to add a new data entry in my application, both at the frontend and the backend. I can easily update the frontend. But to update the backend, I used axios.post() function.

Following is the code of what I did:

And this is what this code does:

add button - msaaddev

 

I also learned about the life cycle of a request, but I will not discuss it here.

⚑ Updating data

What if we want to update a specific part of the data? I can do this by using Axios. It has a method for it β€” axios.put().

πŸ’₯ Deleting data

In an application, we often build a delete button. That delete button only updates the frontend. It doesn’t do anything to the backend. We can update the backend using axios.delete().

Let me show what the delete button does now:

delete button - msaaddev

I learned many things other than the one I have written about in this blog. I was using asynchronous JavaScript without realizing I was using it. After publishing this article, I will dive into this area of JS. And I will start with this article written byΒ  Sebastian LindstrΓΆm.

🧐 I also learned about Optimistic and Pessimistic updates, how to handle expected and unexpected errors. And finally about the Axios Interceptor. I will not discuss them here, but here is what my code looks like after implementing all of these features.

I will write again on Sunday. Till then, cheerios. 🀞

© 2020 Saad. All rights reserved.