Learning React
React- The Complete Guide Course
Recently, I have been feeling that I am lacking practical application in my software engineering education. While my course work has taught me a lot of fundamental computer science concepts, I have not gotten practice building programs that people would actually use. Almost all my class projects are command line applications that require a certain level of CS knowledge to even run. To address this deficiency I decided that learning a frontend web application framework would be beneficial. If I was comfortable with a framework then I could create user-friendly interfaces for the projects I have been working on. Another benefit is that I could easily deploy projects so that non-technical people could access them.
After a bit of searching I landed on learning React through a Udemy course “React The Complete Guide”. I decided on React since it is a popular framework developed by Facebook with lots of good documentation, and a large community. The course has a few practice projects. The main one being a food ordering app somewhat like Grub hub. The course teaches you about fundamental JSX elements, components, and hooks. Once you are comfortable with those prerequisite topics . Finally, you learn about a few third party packages that address some of the inadequacy of plain React such as Redux, React Router, and Next.js.
I would like to take a moment to discuss my experience using a library like React for the first time. With React there is so much functionality and implementation details that are hidden from you as the user that you have to take a lot on faith. Often, I was basically copying the syntax in the documentation or code snippets. Small deviations from the expected syntax can often lead to unexpected outcomes. It is also not always clear why one syntax is correct and the other incorrect. With lower level programming it is often possible to step through your application and see exactly where you took a miss step and the error that resulted from it. With a high level library like React that is not really possible, though the debugger tools do help a lot. Often I would try stepping through a function to find a bug, only for it to jump to an internal React function, which I could not understand as the user.
While this was at times frustrating, I was able to create usable applications with React much faster then I would have otherwise. After completing most of the lectures in the React course, I tried to make a few applications of my own with minimal instruction. Below you can read in detail about building those.
Project 1- Travel Distance Calculator
The inspiration for this project came from an assignment given in ICS 45C at UC Irvine (https://www.ics.uci.edu/~thornton/ics45c/ProjectGuide/Project1/). The assignment is to create a command line application in C++ that reads in a starting location and multiple target destinations, then outputs which target location is nearest and which is furthest and gives the distance from the starting location for each. The distance is calculated using the great-circle method, which measures the arc length along the surface of Earth. Given that I had previously completed a version of this project in C++, I thought that converting it into a JavaScript/React app would be a good exercise.
The first task in building the application was to create a non-functioning interface. All the elements, such as input fields and buttons, that I thought would be needed were added to a single application component. This gave me a better idea of which elements would be reusable, and could be broken off into their components. It was evident early on that multiple location elements would be required each with its own input fields for latitude, longitude and location name. Given that the user could add and remove as many target locations as they please, the form component needed to function for an undetermined number of locations. This requirement led to the biggest design question for this project. What is the best way to structure the location’s data? My first thought was to create separate contexts for the starting location and for the target locations. This turned out to be the wrong approach. It resulted in having to duplicate functionality. For example, both the starting and target locations needed methods to update and reset input fields. With separate context this meant having two identical update and reset functions. Seeing this issue, I refactored the project so that both the start and target destinations are in a single ‘locations-context’. However, I utilize two separate react components for the start and target locations, because target locations require additional functionality that the start location does not.
Once there was a functioning interface I worked on the more “backend” task, such as actually calculating the distance between two locations and determining the nearest and furthest target locations. This was all fairly straightforward task since I had already written a version of these functions in C++. It was just a matter of translating to JavaScript. I will say that I used the “haversine formula” for calculating distance, and that it involves a fair bit of trigonometry that I didn’t feel like taking the time to fully understand. However, I compared my results to a few known distances and all my outputs are within 0.1% in each case.
A final feature added to this project was frontend input validation. The course lecture spends an entire section going over validation with React, so I wanted to take the opportunity to practice it again. It also gave me some more practice using the useReducer() hook. When watching the course lectures I didn’t fully understand the use case for useReducer(). However, the form input validation for this project provided the perfect case scenario. Each of the input fields, “Longitude”, “Latitude”, and “Name” each had slightly different validation criteria. However, it would be confusing and messy to code 3 different removeTargetHandlers and 3 different updateTargetHandlers when really only one of each is needed. useReducer() allows one to manage the state inside of a single function by letting the parameters passed into the function determine which method of validation to use.Anyways, with a bit of CSS styling the React app is definitely more user-friendly then the C++ command line version. You can view the web app on GitHub Pages: https://zackthomas1.github.io/travel-distance-app/
Project 2- JavaScript Trivia
Moving on, I was feeling like I was progressing and wanted to build another small project. Building a React app that utilizes a backend database particularly interested me. In the course lecture we practiced sending data to and retrieving data from a Google Cloud Realtime Database. Since we used it in the course I decided to use a Realtime Database to build a web app that quizzes one on their JavaScript knowledge. Creating the frontend React app was straightforward. It is constructed using mostly standard JSX elements with a few custom components. The one interesting feature is how fetch requests are made. To make a fetch request in React useEffect() hook. This effect synchronizes a component with an external system. Since fetch requests do not happen inside of React the useEffect() hook is needed to trigger an update to React components when new data is received from the backend.
In this application each time a fetch request is made to the backend database an object containing all of the questions is sent back. The frontend React application then picks a single question to display. This is not ideal. We only need a single question, but are instead sending every question from the backend to the client. That is a lot of wasted data transfer. In this case it wasn’t a major issue since the database only contained 10 questions, but if it were to contain a million or a billion questions this would quickly lead to a bottleneck. To address this flaw I would need to write some logic on the backend that would take a fetch request and select a question to send to the client. However, with Firebase this would require adding Functions to the project, which I didn’t want to pay for.
Overall, I am satisfied with the final project, and feel more knowledgeable about working with databases. Once again, check out this project on GitHub Pages at https://zackthomas1.github.io/react-trivia/.
Conclusion
Moving forward I want to combine what I have learned with some machine learning topics. I am currently taking a “Linear Algebra for Machine Learning” course. I am thinking I can apply what I have been learning in that course by learning about tensor flow. Then I could build some sort of machine learning application using tensor flow and React.
