Moview

By far, the most important React related information I learned was dealing with the lifecycle of a react component. There has been nothing more frustrating than updating state or props of a component only for the changes to not be reflected in the component.

This project came about because I was having so much trouble on a larger project with moving information around and getting it to display. I needed something smaller so I could focus on these tidbits. They seem small but they are the bread and butter of React and I gained a lot from Moview!

Load time has never crossed my mind much. Most projects that I have worked on were small landing pages with very few images. I did not go into this project thinking about load time either, but it became apparent that I would have to start thinking about it more and more on my upcoming web apps.

This site uses a lot of images and css hover effects with animations and, boy oh boy, was it slow in the beginning. Luckily, I didn't have to change much to get it to load faster. I looked around and found a already created LazyLoadComponent that wrapped around other components to load them only when they are needed. There is still a noticable loading of some images, but it has improved immensely with that quick change. I'll be thinking about load times from now on...

Carousels. So useful to display information and pictures. So frustrating when you don't read how to use premade ones. I used SwiperJs for this project because it was pretty easy to use before in regular JavaScript. Since I had used it before, I thought I knew what I was doing, but I never thought how the Swiper was initialized.

This was the first time I asked a question on StackOverflow. I thought that, somehow, by using the map method to create movie cards to display movies that it was breaking the Swiper carousel. I did not receive much help online, but I kept editing my question until I figured out on my own that the carousel was initialized with zero slides then more slides were added after the fact.

This might not seem like a big deal but it broke the carousel. All movies were shown but you couldn't peruse through them. The carousel would not budge! This leads me to my next bit of unplanned learning experience...

You should only try to load something if you have all of the information and, with async methods, you need to be careful! I discovered that to get the carousel to initialize properly, I just needed to make sure I didn't try to load it until I had the array of movies filled. The ternary operator was a life saver for this project whether I was loading an image or populating my movie carousel. Once I found out about conditional loading, the project was a breeze and everything came together.