Yeay!! Two weeks have gone since I started this initiative. I can proudly say that I have worked almost daily for learning React. It has been a great adventure. And now I am wondering maybe 100 days is a bit too much. I believe I can learn this JS library in 50 days as I have covered half of my course in just 15 days. Let’s see if I decide to do this. ๐Ÿ˜‰

Now let’s talk about what I did in the last two days. Unlike my previous blogs, I will not divide the stuff which I did in Days; instead, I will explain everything I did in headings one by one. So let’s jump in!

๐Ÿ“ฆ table body and header

As I am learning new things in React, I am also implementing them in my Vidly application. One thing which I learned when I was starting this course was modularity. Modularity keeps your code clean. It helps the developers to make reusable components. Also, it helps big time while creating a new version of the software.

All that said, I introduced two more components in my Vidly app โ€” TableBody and TableHeader. Their purpose was simple. To make my code clean. So for that, I copied everything that was in <tbody> tag from MoviesTable component into TableBody and <thead> into TableHeader. Then I made the necessary changes in both of these components to make them perfectly functional. ๐Ÿ‘จโ€๐Ÿ’ป

Here is what my TableBody code looks like now:

Here is what my TableHeader code looks like now:

Now, as they are separate componentsย  I can easily import them in my MoviesTable. And then use them as tags. This has made my code more clean and readable as you can see: ๐Ÿ‘Œ

๐ŸŽฉ Sort Icon

The day before yesterday, I introduced a new sorting feature in my Vidly app. The user needs to click on the headings, and the app will automatically sort the movies. Now I have improved the UI by adding a new sort icon. You can now click on this icon and sort your movies. ๐Ÿ’ฏ

Sort Icon - msaaddev

๐Ÿ“„ getpagedata method

The sole purpose of this method was also to improve my code’s readability. I wrote the logic behind how the movies should display on pages in the render method. So to make my code more readable, I cut this logic from the render and pasted it into a new function โ€” getPageData.

๐Ÿ” Routing

As React is a simple front-end library, it is only responsible for rendering the view of your webpage. So when we need to connect pages or add routing, we have to install a new library โ€” React Router Dom.

๐Ÿš€ For installing it, open up the terminal and type:

npm i react-router-dom@version

React Router DOM - msaaddevYou can then import this library at the top of your Index.js file. And then, all you need to do is enclose <App/>ย  with BrowerRouter tag.

I did a few other things related to this React library but I will not go into many details. I will write again tomorrow. Till then, cheerios. ๐Ÿคž