My Second General Assembly Project

Components. Props. JSX. Hooks. How’d you React?

Image 1: ‘Popular’ page

What is React?

React, like jQuery, is based upon JavaScript. Similar to jQuery, React is a library meant to help build dynamic and interactive UI. The key difference is — this is important — React is component-based. This means React is modular, and because of that, updates to the DOM are made dynamically and efficiently rendered/updated. JSX syntax is used to describe what the UI should look like in JavaScript. It is technically not necessary when developing with React, but makes code easier to understand. JSX extends the JS syntax so it is not a new language by itself.

What is React based on?

Language: JavaScript! The JSX is compiled into vanilla JS with Babel (some open source voodoo magic). I don’t exactly fully understand how it works, but definitely something I need to check out in the future! One of the quirks about React is that HTML, CSS and JS can all live in one component, which seems to go against the idea of separation of concerns, but… it’s an idea you kind of get used to. Heck, if you use a React CSS Framework it is possible to make an app without a custom styles.css file! (a good thing? a bad thing? what do you think?)

const Hello = ( props ) => {  return <h1> Hello World! My name is {props.name} </h1>;
}

Why filmtrek

I decided upon filmtrek for three simple reasons: 1. Applying a new language/library/framework learnt on a fun project makes the work much more enjoyable 2. I love films. 3. I love music. That’s it really. I didn’t go out trying to solve world hunger, sometimes starting small is how you get over the fence from the theoretical to the practical. Let’s get into it!

How does filmtrek work?

Filmtrek is a frontend project, and was inspired by letterboxd which is an amazing site if you watch a lot of movies. Check out my crappy profile here! It’s a straightforward app, and allows you to find movies based on what’s popular, genre, and perform searches for specific movie titles. Along with the movie results, an album search is also executed which returns a list of soundtracks for the movie (if any). You may also add/remove your favourite movies to a watchlist!

What’s unique about filmtrek

Filmtrek was an attempt to combine the aspect of movies and soundtrack discovery into one app. This was because most movie applications or databases are really good at the former, but have little focus on the latter. So why not have both in one?

Image 2: Search Results

Challenges Faced

Challenge One:
Dealing with empty arrays and objects before data retrieval from API — The issue with working with APIs is that it takes some time (even if it is milliseconds) for the request to hit the endpoint and for the server to respond with data. Components which render said data face the issue of trying to find information in arrays/objects that wereundefined as they had not yet been updated in React state. I kept running into errors until I realised that there was a simple solution which you’ll use more often than not: Conditional rendering! Very simply, it looks like this:

{filmObj && <h1>{filmObj.title}</h1>}

Areas for Improvement

There are definitely parts of this project I’d like to improve. Here are some which I feel are important to take note especially for React.

  1. Improving reusability — React is all about modularity and reusability. I had some constants like endpoints and reducer actions which I hardcoded into the code. Extracting them into their own files would certainly make the code cleaner and adhere to the DRY mantra.
  2. Preloading data — As mentioned, the API calls take some time respond, which causes reflow issues on the UI as elements are loaded. This causes the UI to be janky and while minor, can be a little off putting from a UI perspective (as I was told, sorry UI folks!). Preloading some data would solve this issue.

Conclusion

Unit 2 and project 2 was a fantastic learning experience. React was a fair jump from jQuery and really pushed me in terms understanding novel concepts and coding best practices (i.e functional thinking). It was meant to be a fun project to put what I had learnt to the test, but I am quite satisfied with how this turned out! React forces anyone learning it to think and code in a certain way, especially with regards to code reusability, and has no doubt made me a better developer.

A Singaporean perspective. Sometimes I write. Sometimes I code. Mostly I watch lots of movies.