Expanding on My ReactJS Knowledge

Hi everyone, I recently expanded on my ReactJS knowledge through a contribution I made to a repo called Calculator for Everything. Some of you may know about this repo through my previous HacktoberFest contribution blogs. I won't cover majority of what I did in those contributions. So if you're interested in learning about those contributions, you can read my blog posts Second PR of Hacktoberfest and Last PR of Hacktoberfest, which talk about this repo.

Anyways, the contribution I made to the repo this time was to expand on the Momentum Calculator I made in a previous issue. In that issue, I created a calculator to solve for Momentum, using mass and velocity. However, in that contribution, mass and velocity were only using one unit of measurement, which was kilograms (kg) for mass and meters per second (m/s) for velocity. I wanted to expand on this so it could use more than one unit of measurement for mass and velocity.

To start, I created an issue on the repo stating the changes I would like to make. Once it got approved by the repo owner I got to work. I'll talk about it below.

Working on the Issue

In the issue I mentioned the idea I had to get this working. I wanted to created a dropdown menu that would allow for the user to select from a list of different units of measurement for both mass and velocity. I already had a general idea of how this could work, thanks to previous applications I made with JavaFX and for Android using FXML. However, for both methods were different. For JavaFX to make a dropdown, I have to use the combobox UI element, whereas for Android development with Java I had to use the Spinner tag in an XML file. With ReactJS, this method was also different. After doing some research I found out that in order to make a dropdown menu, I would have to do something like this in the area of my code where I wanted the menu.

<InputLabel style={{ position: 'absolute', top: -20 }}>Unit</InputLabel>
<Select
label="Mass Unit"
value={massUnit}
onChange={handleMassUnitChange}
fullWidth
>
<MenuItem value="kg">Kilograms</MenuItem>
<MenuItem value="g">Grams</MenuItem>
<MenuItem value="oz">Ounces</MenuItem>
<MenuItem value="lb">Pounds</MenuItem>
</Select>

Looking at the code it's pretty easy to see how the dropdown menu is made from a UI perspective. If I wanted to label the menu, I can use <InputLabel> to give a title to the menu, and then use the style attribute to position the label. To create the actual menu, I had to use the <Select> tag. Here I can assign it a label, and a value. I'll talk about the onChange attribute in a bit. After that, I could then populate the inside of the tag with the <MenuItem> tag. From here, I could assign each <MenuItem> tag with a value that is respective to the text/option in the tag. As you can see above, for the Grams option, I have assigned it the value "g". This brings me to the onChange attribute in my <Select> tag. The onChange attribute is linked to a function I created in my code called handleMassUnitChange. This function is used only when the user selects an option from the menu, and affects the useState value set for the massUnit variable, which changes the unit of measurement being used. By default this value is set to "kg", but if grams was selected it would then switch to "g". This affects the way the value entered for the mass is used and I have a similar method for the velocity.

Since the unit of measurement used for Momentum is kg m/s, I would need to make sure that the measurement selected for both mass and velocity gets converted back to kg and m/s. This is where something like my convertMass and convertVelocity functions come into play. When the user clicks the button to solve the equation, it will run the functions that check the unit of measurement being used for both variables and convert their values to kg and m/s which I then multiply to solve for the momentum. I tested this out a few times, and compared it to an actual Momentum calculator online. After verifying the product I received for momentum with my calculator and compared it to the one I found online, I saw that the results were the same. This was a good sign for me, so I moved onto the second last step.

The second last step, I had to accomplish was to update the info file for the calculator. The changes I had to make were very simple. I just had to state the new units of measurement that both Mass and Velocity would use. This brought me to the final step.

Lastly, I just had to push my contributions to my fork and create a pull request for the changes I made. As you may remember in my previous contributions to this repo, the owner has setup a template for all contributors. I followed the template and then sent in my request. After I created the request, I noticed something new. The repo owner has implemented continuous integration into contributions made to their repo. This was done to not only test my code for deployment to their website, but to detect and fix vulnerabilities in my contribution. I actually found this to be really interesting, this application they used for this is called GitGuardian, if you wanted to check it out. I think I should learn more about it, and see if it's something I would like to use in future products.

Overall

This contribution is meant to be a step up from my previous Hacktoberfest contributions, and while it was as I did learn more about ReactJS. I knew I could do better to improve. However, for now this isn't that bad of a step up. Since I did have a take away, which was learning dropdown menus in React and using that to improve old code. I'm hoping that for my next contribution I can help out a larger repo. I did have that in mind for this contribution, but most repos that interested me where for languages I have little to no knowledge of, and for the repos I was interested in when I tried to clone it and run it locally I had a hard time installing certain prerequisites. Hopefully for a future contribution, I can change this and actually make a more significant contribution as that was my original goal for one of my Hacktoberfest contributions.

Anyways, that concludes this blog post for now. Once again thank you all for reading. I also noticed that I recently gained quite a few new followers. Thank you for following me and watching my journey to improve my coding abilities. I'll catch you all in the next post!