Building my first React 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-routerand 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.