My First React Project
It is currently 1:12pm on October 1, 2020 and I just presented my mod 4 project along with my partner about an hour ago at Flatiron School. In mod 4, we learn React and the last week was a very jammed packed one to say the least. Needless to say, I didn’t have any time to write this blog that is due today at 4pm before now.
While trying to come up with a topic to write about, it popped into my head “Why not write a little about the project you just worked on for the last week?” This project is my first project using React. React is a Javascript Library used for building user interfaces. After coming off of mod 3 where we learned Javascript, I found React to be quite challenging.
React offers a whole new way to put things together and it really forced me to think outside the box. There are components that are used for rendering information onto the page which is held in state. These components can be reused and state can be changed when your data changes. The other part of this is that your code is still written in Javascript using JSX. My translation of JSX is that you can use it to bascially write your Javascript directly into your HTML tags. I really like this because it cuts out creating elements and finding them when you want to update the DOM.
Me and my partner decided to make a movie app where people can post movies as recommendations and add other users recommendations to their watchlist. I’ll just give a brief overview of what we did to create it and talk about some of the challenges we faced.
This project used Rails as a backend which was used as our API. Our backend had 3 models: users, watchlists and movies.
We seeded all the movie data ourselves for our initial movies and users. We created controllers for all the routes we needed and created a few helper methods in our models and controllers to fetch filtered data. Once all the routes were correct and associations were made properly, we started the front end.
The first state we set was for all the movies in our app. We wanted them to all be rendered to the page, so we used the componenetDidMount function for the first fetch.
Next we made functions for a user to be created and for them to login. We set a state to loggedInUser that would stay set throughout the users time on the site.
We then proceeded to make the rest of the functions for a user to use full CRUD actions in our app. We allowed users to add and delete a movie from their wathchlist, add a movie to the site (as their recommendation), delete their own posted movies, update the reviews they left for the movie, and like and dislike a movie. I won’t bore you with all the details on how this was achieved, but here are a few code snippets.
We used about 18 components including a sidebar, searchbar and movie card. I point these three components out because they were particulaly the ones that gave us the most problems.
The goal of the movie card was to display all the movies on the index page and there would be a trailer snippet that would play on a mouseover event. We tried numerous npm installations and functions to get this to work and had no success. We kept getting an error from Chrome called CORB Blocking.
After doing some research, I found out this is a new security measure that Google has put in place that can block certain events from happenig on websites befre user interaction. This was a very good learning experience because I had no idea about it. Our videos were being blocked on mouseover and we couldn’t figure out how to get around the problem because of CORB.
The sidebar component was another component that really gave me some insight into how React works. In Javascript, I was able to make a sidebar using the plain old HTML page. I couldn’t quite connect the dots here with making a collapasble sidebar using HTML in React. So I decided to install a sidebar using a npm install React components. About 5 to 6 different sidebars later, I finally found one that worked. The biggest problem I was having with using the React sidebars was that I just couldn’t figure out how to customize them. Thye came with their own node folders and css sheets which didn’t all seem user friendly. I will continue to search for one that’s customizable and learn how to better update the one I used.
The last challenge I want to talk about was getting certain components to only render to the page on certain React routes. In this case, we didn’t want the user to see the sidebar or the searchbar until they were logged in. We started with a ternary in the return statement in our app component that looked like this:
It worked, but the div it was put in completely altered our styling throughout our whole app. Fragment did the same. So we settled with putting the sidebar in another componet and letting the sidebar be seen on the login/sign-up page. I hope to find a solution soon.
All in all, my first React project really took me from “what the ‘blank’ is going on” to “oh, I think I can figure that out now”. The first few days of React were completey itimidating for me and I thought this experience helped me so much. Please check out the demo of the final project below.
