Reflections: My first React JS project

My first project using React JS was notably more challenging than the previous weather app project I completed using HTML/CSS and basic Javascript. It required a strong understanding of HTML/CSS and Javascript, while learning the React JS library, for building user interface components.

The objectives of this project was:

1. Build a React single page application from scratch
2. Apply your knowledge of components, props and state management
3. Incorporate client-side routing
4. Use data from external APIs
5. Persist data in a mock up backend

Developed by Facebook, React JS is a critical user interface technology to learn as it allows developers to build performant and rich user interfaces quickly, has strong community support and is hot and trending in today’s job market globally.

The web app I decided to build was an image finder using a third party API for the free stock images. My longer term for this project is to integrate a user user library manager, photo editor and drawing tools. The third party API I chose to use was Pixabay’s API. The key reasons why I chose this developer API was due to its reliability, credibility and large image library (2.23 million videos and images).

I chose Material-UI as the user interface framework for styling because it is based on Google Material Design, has excellent documentation and community support and used by many large companies including Amazon, NASA, Netflix and Spotify. Material-UI is a better choice over say Bootstrap, as I was interested in creating a uniquely styled website. Bootstrap styled websites are generally less unique but have a high level of consistency therefore, making them more user friendly.

I consolidated a wide range of my newly learnt React JS knowledge by completing this project. I utilised class components and functional components with hooks. I used client-side React Routing for my Single Page Application (SPA).

I used the Fetch API to get data from the third party Pixabay API and post data from some of my web app’s forms to a mock-up backend RESTful API, using a JSON server.

React Select library was used to quickly build a Select Input control component for my app.

In addition, my HTML and CSS skills were revised by applying the Box Model concept and utilising CSS code to stylise some of the web app.

Given that there were many moving parts and external libraries that were utilised for this project, I learnt after encountering some significant debugging issues to take a disciplined and systematic approach to coding. One of the key lessons here was to not rely on Visual Studio Code to identify bugs automatically before the program is run (static checking). It is best practice (refer to MIT article on Software Construction) to run the code and check for errors after each new line that was written rather than leaving it after a couple of lines before executing it (dynamic checking).

In addition, making a responsive header with Material UI and React was a very challenging task, refactoring the code from a tutorial I found online. It was important to have a strong understanding of your code and the tutorial’s code before embarking on a refactoring task. Again, the debugging process needed to be disciplined and systematic.