React is an awesome JavaScript (JS) library. It is mixed with features which help big times while developing the frontend. Its virtual DOM feature has significantly decreased the page’s load time. The components can be reused in multiple applications. Thus, saving the developers from writing the same code again if the feature has already been developed before. πŸ‘Œ

πŸ–€ Like icon

Every movie app should have a like button which shows if the user likes the movie or not. In my pursuit of learning React, today, I added a new Like icon in my Vidly application. If you are not sure what Vidly is, you can read my blog on my 5th day of React. There I have described everything about it in details. 🀞

vidly application - msaaddev

You can see that there is a heart right next to Rate. When you click this heart, it becomes total black showing that you liked the movie.

vidly app like button in action - msaaddev

πŸ€” So, how did I do it!? First of all, I created a new JSX file for Like component. Then I added a like property in my external JS file from where I picked the data. Next thing was displaying the heart icons. For this, I used a library β€” Font Awesome.

I then developed a logic to toggle between two heart icons β€” the simple heart icon and the full black heart icon. The logicΒ is also setting the value of like property in the external file to true if the heart is entirely back. Thus, making necessary changes in the database.

πŸ“„ Pagination

After successfully creating this like component, I started my course on React. Today’s lecture was about pagination. While learning it, a thought came in my mind. Why don’t create pages and show only four movies per page in my Vidly app!? It was a nice idea considering my entire webpage was full of movies. πŸ˜…

So, I created a new JSX file for creating pagination component and started brainstorming on how to make these pages? Within half an hour, I started building up a logic.

It is still incomplete but I believe I am going somewhere with it. I will do more tomorrow. I hope it will not be much difficult. But until then cheerios!! 🀞