Using ReactJS With The Movie Database API

Aaaaaaand we’re back! Here’s another round! So we here at Black Mutt Media really love movies. I mean we REALLY love movies. And we love learning new things. Like ReactJS, a really impressive JavaScript library from Facebook. So what are we going to do today? We’re going to learn about a great combination of these two things!

So first off, I didn’t learn this the right way. I’ve got a site that I’ve been working on for some self-directed Ruby on Rails and Foundation Framework learning. I’ve had a couple ideas for sites kicking around in my head for a while. So the way this worked? I started off with a standard jQuery UI Autocomplete for searching movies using The Movie Database APIThe Movie Database vs IMDb vs Letterboxd … that’s a whole different story. The first two actually have APIs for this exact purpose, Letterboxd uses The Movie Database, which is what a lot of people use for synchronizing library data for Plex or Boxee on HTPC systems … something that seems to be quickly losing relevance in the world of Roku, FireTV, Chromecast, and countless alternatives. But this isn’t about that, is it? This is about ReactJS and The Movie Database … well … so … the user can search for a film in an autocomplete and it will show a dropdown with posters and names … oh, hell, like this …

The Movie Database Dropdown

Because, as anyone who knows me already knows, with me it’s always about the Coen Brothers. So yeah, I had this set up with jQuery. But that wasn’t good enough. No. This needed done with ReactJS. Why? Well, because REACTJS IS AWESOME! Well, maybe I didn’t know that at the time, but I did know that I wanted to learn it, so that’s a good enough reason for me. So how did I do this? Good question!

Well, first things first, I was using Ruby on Rails so I needed to add the following to my Gemfile in order to use the react-rails gem.

This should come as a shock to anyone who’s ever used Rails … ever … so … that’s set up! Next up … setting up a search box!

Before we continue, I feel I should repeat this: I went about this the wrong way. Facebook’s React documentation has a great section called Thinking in React that documents the entire process of breaking up your application into parts, which should then reflect the structure of your React classes. They’re dead on. I didn’t follow it. Sometimes, when I’m exploring, I just take something and replace it little by little. For one, this helps me to run into (and fix) problems, which means I’ll be better prepared for that next time. Also … it’s just how I like to learn. Goof around a bit at first just to figure it out. If I were really doing something from scratch again, I’d follow that post. Properly. But this time …

Like I said, I already had the Autocomplete set up. It was functional, but needed cleaned up. For now, though, I just created a React class that basically spit out a textbox that would use the existing code.

Complicated, huh? So how did I make this work in my view? Well, initially …

This is a little ugly, though, so I used the react data tags instead

This wouldn’t actually properly get the Autocomplete code to work, as it wasn’t rendered prior to the autocomplete call. So what did I do? I used componentDidMount. Although, it still didn’t work at first … so … what I had to do was actually use the getDOMNode() method in order to properly implement the autocomplete.

But that’s not very pretty, is it? Well, there are a few things we could do about that! For one, I wanted to break this down into parts. One of the main parts with logic is all of that image stuff. So … I created a couple of functions to handle the null or whitespace logic as well as getting the thumbnail path.

Arguably, this isn’t the place to check for null or whitespace, but hey … what does a double check hurt? A lot if you program it wrong. Anyhow … I then created a function for getting the image tag.

Well, that broke everything. What’s the problem there? Here’s the error:

XJS value should be either an expression or a quoted XJS text

Hmmm … oh yeah! Curly braces!

So that did the trick. Alright, so everything’s working, we’re good! We’re all done! Wait, but this isn’t how React is supposed to work, is it? There shouldn’t be a function returning a tag. There should be another react class or two. So let’s work on that! First, what are they? Well, here are a couple …


We’ve got that item and the image, then, right?  Good. That’s a start. Well, let’s start working on that SearchBoxItem because, now that we want to do one thing right, we should go from the top down. (Let’s be clear, though, this should all have been planned out ahead of time). First we need the render:

Perfect, then! It should work and we can make a ton of money! But wait, what is item in this context? And do we really need the full item or just the thumbnail image and the formatted title? Well … I think you know the answer … and we’ll set up the properties for those.

Oh, man … those are looking good … “But wait, Scott,” you ask, “does it work??” Well, almost. I had an issue when trying to add the item to the UL element. You remember this line of code? 

Alright, we’re getting closer, but that needs to be rendered first, right? I can’t just append it directly since it’s an instance of a React class? Correct. So I looked for a while. And I asked for help. I needed to render it to a string first.

and on the receiving end …

But you know what happens there? I could be wrong about this, and please let me know if I am, but it seems as though React renders the object as the string representation. You know the syntax – [object object]. So I had to actually create the element, then add it to the ul (like above), but then I had to grab it after the append when it was more than just a string and add on that data attribute.

There we go. It’s all set up and working just like before! I’ve made no progress! Really, I’ve learned quite a few things along the way. 

So help me. Take a look at everything. Let me know what works for you, what doesn’t, what I should change, what you like, what you don’t, and which movies to search for. Until then … 

Please like & share:

Be the first to leave a comment. Don’t be shy.

Join the Discussion


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">