Building my first React Project

a snapshot of my project

I recently completed my first ever project with React. The parameters Academy Xi (my course provider) gave for the project were:

  • Your app should have one HTML page to render your react application
  • Your app should use multiple components in a way that keeps your code well organized.
  • There should be 3 routes
  • The Application must make use of react-router and proper RESTful routing
  • Your app must incorporate API data. This data can be from a public API or from a GitHub JSON file you create
  • Your app must persist some data using a JSON server as a mock up backend
  • Your application should have some minimal styling

Project Overview

The project I built was very straightforward: it was styled after sites like Netflix or Hulu, and offered some of the same features including:

  • a search feature
  • the ability to add/remove movies to a ‘to watch’ list
  • different movie sections (which were made using components)
  • hovering over a movie would bring up a movie-synopsis

The app referenced The Movie Database API. I found it difficult to use at first, but once I figured it out, I thought it was a great API to use.

What I learned

I first started trying to build the app with class components. I felt a bit more familiar with them than function components, and that is why I started out by using them. However, as I got deeper into the project, I started to realise how much easier using function components would make everything. After getting familiar with them, I rebuilt the project using function components and I never looked back.

I appreciate that this project helped me to practice using props and states. It was a prop heavy project, that’s for sure. I passed down props to other components, but in some instances, I also had to pass down callback functions so that I could pass data up the chain.

I also appreciate that I got to learn a lot about hooks. Hooks are fantastic. I especially appreciate the UseContext hook, and how much easier it makes it to pass information between different components.

I think this project taught me the importance of breaking complex tasks down step by step. When I look at my final product, sometimes I can’t believe all the code I wrote and that it actually works! I think the only way I was able to accomplish any of this was to just focus on one challenge at a time, and then build upon the next one. Github helped manage this process.

Challenges

I faced a ton of challenges during this project. Often, they were due to typos and syntax. I would often have the right idea, but would forget to include a ‘.props’ tag, or include curly brackets. I think this is still a weakness of mine. I would often arrive at the correct solution by using trial and error, doing research, or asking for help.

Getting the favourites section working is perhaps the trickiest thing I have accomplished with my code in this course so far. Getting it working involved everything we had been studying with react: useState, useContext, useEffect, props…everything!

I still have features I haven’t been able to implement just because of the challenge involved. Not all of those features are React related! I had decided to do my own styling with CSS. Although my ability with CSS has improved, there are still many ways I could improve further.

Comparing building with React vs Building with JavaScript

When I compare both, I definitely prefer building sites with React. Components definitely make everything easier. Other things, such as adding event listeners, are also a lot simpler with React. Even though I thought that having to use routes would make React a lot harder than JavaScript, I was wrong. Using routes was pretty straightforward, all things considered.

Going Forward

I still have a lot I’d like to learn when it comes to react, and there are still features I would still like to implement in my project.

That being said, I’m happy with the progress I’ve made. I’ve learned to be a bit more patient with myself, and know that if I just keep on working hard, I’ll continue to get better with time.

I'm a human person with human problems.