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. 💯
📄 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.
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
You 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. 🤞