React S.P.A

As a project of mine for the web development course I am attending, I was tasked with creating a single page application, or SPA, with the help of React.

React, or React JS, is a JavaScript library, but commonly referred to as a framework due to its capabilities, that was created in 2013 and is maintained by Facebook. It is used to efficiently build user interface and is, for now, the most popular framework used in the web development field. User interface made using react can be run on a local server, increasing its load time, making it far more interactive, and any alterations to its functionality code can be seen on the web page immediately.

As part of the project, I was required to use an Application Programming Interface, or API, of our choosing to receive data from a database. An API acts as a medium between my application and the database I wish to receive information from. I’ll make a request known as a ‘fetch’ to the API saying what data from the database I want. The API will then read this request, get the data, and send it back to me.

For my SPA, I planned in implement a search option, which would then fetch data from an API and display up to 10 results, depending on what the user had input.

SPA-wireframe

When searching for a suitable API to use in the project, I was interested by an API provided by the Internet Game Database. It contained the relevant information that I needed, but as I soon discovered, a user could not make a search request to the database unless they were a premium member of the service. After some further searching, I found a much more open API to use, The Movie Database. The Movie Database, simply known as TMDB, provided a wide range of information on a huge number of movies, such as the movie’s title, release date, popularity, rating and many more. TMDB also provided clear instructions and how to make relevant calls to the API. With my wireframe and chosen API at hand, I went about creating the SPA using React.

components

I first created basic components for the SPA, such as a header and footer bar, a content area, an input bar and a search button, as well as TMDB’s logo in the footer and a simple image and H1 title in the header. A condition of using TMDB’s API was that I needed to include their logo on the page. There were several options to choose from, and I went with a long, narrow logo that read “Powered by The Movie DB”, as the logo fitted nicely into the footer. As the header and footer bar were the same width and height, I created a single component, name ‘headerfooter’, and reused it when implementing both.

headfoot

footer_js

header_js

In order to fetch the data that TMDB provided, I used a service known as Axios. Axios is a promise based request library and very easy to use. To include it in my code, I entered “npm install axios” into my command prompt window, imported Axios into my .js file and that was that. As Axios is promise based, it proved to be more effective and easier to use than the traditional “fetch” method as I did not require to write the promise code.

axios

Once the relevant data was fetched, I then had to identify the information that I needed and implement it to my SPA. I chose to include the poster image of the movie, with its title, its release year, and its average rating displayed beneath it. This elements were all conveniently provided to me by TMDB. Unfortunately, their was no possible way to make a request in the request URL to the API for it to send a specific number of results back to me, which then required me to personally snip the retrieved results down from 20 to 10 using the .slice method. As the default request returned 20 results, this took up time, space and effort for both me and Axios.

Forum Extract

I decided to use an un-ordered list to contain and display the data, as it seemed the most relevant to what layout I wanted to achieve.

movie ul

As the release date of the movie provided by TMDB API was in the YYYY-MM-DD format, I needed to use the .slice method once again so that only the year of the movie’s release was displayed. Once the data had successfully loaded onto contents page, it only took some basic CSS to get it looking as planned.

display

display close

I found that, if a movie title was longer the usual, it played havoc on the 5×5 layout on the page that I aimed to achieve. In response to this, I created a fixed, longer content area that helps compensate for any overflow.

tlotr

It was then just a case of writing code so that the movie query included in the request URL corresponds to the text that is entered in the search bar by the user.

searchValue

searchURL

searchBar_Button

From creating this React app, I learnt about the creation and use of components, importing and exporting attributes from external files, the usefulness of Axios, DOM states, and the slight differentials between ReactJS and JSX syntax over more traditional JS, CSS and HTML syntax.

If I were to start this project from the beginning, I would display the data in a vertical, rather than horizontal, format. This would in turn allow larger movie images, more information to be provided about the movies, and would eliminate the layout problem I had with movies that had extensively long titles.

 

Some handy links:

Project files on GitHub: https://github.com/CoreyDennison/React_Project

Project files on Heroku: https://dashboard.heroku.com/apps/moviesearchapp-reactjs

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s