React is a javascript library created by facebook that was developed to aid developers in building UI components.  It has many useful features that make setting up a Single Page Application (SPA) relatively easy. Firstly it has a tool that creates a development server that uses webpack to compile React, JSX, ES6 and css files.  And ESLint to catch and warn of errors in the code.

React is built using components.  Components allows for efficient use of code by allowing code to be recycled, used again or removed and replaced without having to make wholesale changes.   For example trying out different APIs that carry out similar functions like spotify or musixmatch api that maybe have or offer different functions. This can be done more easily as you would be changing just one or two components.  

For this SPA I used https://rapidapi.com to search for a lyric searching api that was free and legal to use.  I decided to use musixmatch api because it had the lowest latency and it was the most popular api that people were using.

Although React allows a lot of flexibility in doing things.  There is no conforming convention that say things must be done a certain way and for a novice that can be a bit daunting as when trying to get things to work it is not always easy to figure out why a certain component is not working.  Is it because of the code or is it because I don’t have the necessary extension or environment setup to enable this function? This was part of my learning curve in learning to use react and the multitude of components that are needed to make it work. 

One hurdle I had to overcome was the way things were documented. It is difficult when there are gaps in my knowledge. I had to create an .env file that was needed to store the api key to get it to work. It was assumed that I knew that and it was only after some research that i knew that I needed to download extensions to write an .env and get the app responding.

Advantages:

Most components are easy to get to work as they have examples that show how to execute it.  And how React is structure makes it easy to fit all the pieces together if you follow the guides.

Development

There is a strong community developing tools for react this helps in keeping up pace with your own development as you upgrade your components with new functions.  For the future I hope i can improve my app by including translations or linking music with the lyrics highlighting it karaoke style.

Leave a Reply

Fill in your details below or click an icon to log in:

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