I undertook 100 Days of React initiative because I thought it would be a great way to learn something new with consistency. I started blogging about it to keep track of my progress and most importantly, to hold myself accountable. Twelve days are gone, and I have learned a whole lot of new stuff. So, it is safe to say that my plan’s working. 😎

πŸ•Ά Yesterday was the 11th day of this initiative. But I couldn’t do much because my glasses broke. So I took the day off and gave my glasses to the optician. Today afternoon, after getting my glasses back, I immediately dug in into React without wasting any more time.

βœ… Pagination

In my earlier blog, I was working on a pagination component. So, I picked up from where I left and started working on it. After some time, when I couldn’t figure out more, I took help from my good friend β€” Google. She can get you anything if you know what to ask. πŸ˜‰

My search led me to a function which returns an array of a specific number of elements. I will not say more because I rewrote the function according to my needs.

The results were promising, and I got what I needed. I paginated my movies in Vidly. Let me show you:

vidly app pagination - msaaddev

✍ Type checking

Sometimes it can happen to us that the value of props we are passing is of another type than the one required. In this situation, React usually doesn’t give any kind of error. So to prevent that, we use type checking.

Before React v15, we used to have type checking as part of React’s library. But now it has become a different package which we need to install separately.

πŸ“¦ To install it, type following in your terminal:

npm i prop-types@version

πŸ— Now import this package in your app by writing following at the top in your application:

import PropTypes from 'prop-types';

This will import the prop-type package into your JSX file, and you can then start using it right away as I did.

As you can see, I have given every prop a specific type. This will give an error if data from another type is passed through it. Thus making your code efficient. πŸ’―


Pagination was a huge deal for me as I learned many things while making it. To take this Vidly app to the next level, I have started working on another component β€” Genres. Genres component will divide the movies in terms of their particular genres.

genre component - msaaddev

This is just the visual representation. I have yet to create the logic that will happen behind the curtains. I will do that tomorrow. Till then, cheerios. 🀞