DEV Community: Shujaat Azim

Feeling Bloaty? File Cleanup After Create-React-App

Shujaat Azim — Sun, 29 May 2022 05:51:00 +0000

The create-react-app command is a great way to start a new React project; everything just works out of the box like magic. In fact, I don't think I've ever not used it to start any of my React projects. However if you're anything like me, the number of never-touched files generated once CRA is done working its magic - index.css, robots.txt, manifest.json, and others - is bothersome.

When starting out it in your coding journey it can be difficult to discern which files are actually needed since the inner workings of CRA are not (yet) obvious to you. It was one of the first issues I grappled with when I was new, and one for which I still don't easily find answers. So here I am.

Here's what my sample project's file structure looks like after running create-react-app and opening it in VS Code (I'm assuming you already know how to do this):

First, let's outright delete the following files in their entirety:

favicon.ico (this is the icon for the browser tab)
logo192.png (react's default logo)
logo512.png (react's default logo)
manifest.json (describes the app)
robots.txt (for search engine crawlers)
App.test.js (boilerplate test file)
index.css (boilerplate stylesheet)
logo.svg (another default logo)
reportWebVitals.js (for measuring user experience metrics)
setupTests.js (imports Jest-DOM testing library)
yarn.lock (if you're using NPM, which I do)

That's 11 files deleted right off the bat. All of these files can be re-added later, if needed, rather than cluttering your view for much of your app's development.

Now let's move on to some cleanup within the remaining files. Let's start with index.html, which is the root of your project:

That's a lot of lines of code, and much of it isn't needed. Go ahead and delete lines 5, 12, 17, 30. Then delete all the comments, and consolidate lines 8-10 into one line. You should be left with something like this:

Navigate into App.css next. This file isn't needed until you actually start styling, so you can remove this file in its entirety and re-add it later if you prefer. But if you want to keep it, go ahead and delete everything within it.

Now it's time for index.js, which should look like this:

Go ahead and delete lines 3, 5, and 14-17. You should be left with a barebones file looking like this:

Finally, let's check out App.js. I prefer the relatively newer arrow functions for my components, so let's convert it. Then delete lines 1, 2, everything within the div, and the classname for the div. Finally, even though we no longer need to import React for simple components, you will need to do so if you plan on using Hooks or other features React provides. Add the import at the top. Your file should look like this:

That's it! You've removed much of the unused boilerplate clutter, and are ready to start your project with a blank(er) slate. Clutter can be distracting, so I hope you've found this guide useful.

"The real problem is that we have far more than we need or want.” -Marie Kondō

RegEx - A Teeny, Tiny Taster

Shujaat Azim — Mon, 19 Apr 2021 21:22:22 +0000

Since beginning my coding journey, few topics have confused me the way RegEx has. I saw them as little more than gibberish, random symbols in between slashes that meant little to nothing. Thankfully, I wasn’t alone in my bewilderment, and I was able to eventually learn how to make them bend to my will (...kinda)!

First off, let me just clarify that RegEx is pronounced "reg-ex" and not “ree-jex” as some trolls have tried to perpetuate. It stands for “Regular Expressions,” with “regular” referring to their origins in mathematically regular languages. This basis is what allows RegExs to be used across programming languages (“language-agnostic”), lending to their usefulness. It also means that they are almost “purely” logical. However, as mere mortal humans, we are not logical beings; therefore, RegEx’s tend to be exceedingly confusing.

But confusing for what, exactly? Simply put, RegEx’s are used for describing patterns in strings. A pattern can be certain words, the ordering of letters, strange characters, spaces, and just about anything else you can think of that can go into a string. They allow us to specifically target certain “points of interest” in string data. For example, how would we target the underscore characters for removal in the following JavaScript and Ruby strings?

// javascript
let string = "Hello_my_name_is_Shujaat"

# ruby
string = "Hello_my_name_is_Shujaat"

Well, we could use some higher-order functions to accomplish this:

JavaScript

let string = "Hello_my_name_is_Shujaat"

let splitString = string.split("_")
console.log(splitString)

// Logs ["Hello", "my", "name", "is", "Shujaat"]

let newString = splitString.join(" ")
console.log(newString)

// Logs "Hello my name is Shujaat"

Ruby

string = "Hello_my_name_is_Shujaat"
split_string = string.split("_")
puts split_string 

# Outputs [Hello, my, name, is, Shujaat]

new_string = split_string.join(" ")
puts new_string

# Outputs "Hello my name is Shujaat"

This is a purposefully simple example; it can all be done in fewer lines by omitting the variables and chaining the methods together. If the string was more complicated, perhaps with a bunch of different symbols, spaces, numbers, and capital letters all over the place, it would be significantly harder to make it readable to human eyes. HTML data, for instance, is just an insanely complicated string at the end of the day. But for brevity’s sake, let’s take a look at the following, slightly-more-complicated string:

"Hello_my!name&is8Shujaat"

It would take several different higher order functions (one for each of the weird characters in between the words) to remove the nonsense characters and replace them with spaces. That isn't practical, even in this one sentence string; so imagine how cumbersome it would be in an HTML doc!

The solution? We can use RegEx to filter the string of all the non-letter characters and return the simple string:

JavaScript

let complexString = "Hello_my!name&is8Shujaat"
let regex = /[0-9_!&\s]/g

console.log(complexString.replace(regex, " "))

//logs "Hello my name is Shujaat"

All I did here was create a set of conditions (called a "literal creation") in between two slashes, and added a global flag (g) at the end. The /[0-9_!&\s]/g translates as "any integer between 0 and 9, AND any underscores, AND any exclamations, AND any ampersands, AND any whitespaces, across the WHOLE string."

The .replace() method takes two arguments, the "target" and the "replacement." Without RegEx, we would have to use a separate .replace() for EACH target, which quickly bloats and obfuscates our code. However, storing all the conditions in a variable using RegEx allows us to target everything at once! The global flag outside the slashes indicates that we would like to identify the targets across the whole string and replace them all with spaces (" ") - without it, we would stop at the first match by default.

Ruby

complex_string = "Hello_my!name&is8Shujaat"
new_string = complex_string.gsub(/[0-9_!&\s]/, " ")
puts new_string

# Outputs "Hello my name is Shujaat"

This is very similar to the JavaScript solution above, but it has a couple important differences. We still need to create the set of conditions, and because RegEx is language agnostic, it's the same as the conditions we used before: /[0-9_!&\s]/ However, instead of .replace, we're using the .gsub method, which means "global substitution." Therefore, we don't need the g flag in the RegEx.

Phew!

You might be wondering if you have to memorize all the ridiculous conditions, the varying syntaxes, and all the different flag names. I have good news - you don't! There are many resources available that will help you set up your RegEx options, let you input your strings, and spit out a result. Two commonly used ones are:

JavaScript: https://regex101.com/
Ruby: https://rubular.com/

Here's a chart of common RegEx options too:

Commonly used RegEx for most situations.

Yes, Regular Expressions are inherently unintuitive. The mere fact that conditions are chained together without spaces drove me nuts when I first learned about them. This in turn leads to programmers, especially aspiring ones, to completely ignore them as a tool. In fact, I found many “how can I do this WITHOUT RegEx” questions on StackOverflow when I was poking around. But had I taken to RegEx earlier in my learning, I'd have solved many of my early coding challenges far more easily! So definitely don't ignore them, use all the tools available!

Just the Tip — Building a Simple Tip Calculator in React

Shujaat Azim — Mon, 19 Apr 2021 00:36:21 +0000

My strategy for learning anything new? Repetition and practice. Studying? Flashcards, online tests, cramming. Competitive gaming? Training mode, tons of back-to-back matches. Learning Japanese for my next solo trip? Apps, podcasts, shows. All of these are forms of practice, and I applied this same, simple strategy to the development of my programming skills post-bootcamp graduation.

Now that I've convinced you that practice rocks, I am going to walk you through one of my earliest practice projects that I built after completing my Flatiron bootcamp program -- a tip calculator! Yaaaaay! No? Not convincing you of my app's amazingness with my enthusiasm? Well, in fact, we don’t need to come up with a super-cool, ground-breaking, worldview-shattering idea in order to practice. If you sit and wait for that "AHA!" idea, the one that spawned the likes of Google or Facebook or Instagram, you'll end up wasting time in procrastination land. I would know. I've been there. And I still visit from time to time.

Instead, we can simply take an app or idea that someone else has built and try to copy it using our own skills and knowledge. This will give us a deeper understanding of our current ability and will open up multiple opportunities improvement. You've probably already seen many to-do list tutorials for every language, library, and framework. The reason there are so many is that people have figured out it's a good idea to re-build things for practice.

Oh, and that whole "someone else must have already thought of this” attitude shouldn’t ever stop you. After all, should Mr. Dorsey and friends have shied away from creating Twitter just because we already had AOL Instant Messenger and Facebook statuses? I think not! Let’s get started!

Here's a link to my github repo if you'd like to follow along: https://github.com/ShujaatAzim/tipblog

Disclaimer: I'm assuming everyone reading this has working knowledge of React, create-react-app, and what "state" is/does. I also want to point out that I made this project when I was still a bit new, very soon after I graduated from my Flatiron Bootcamp. Therefore, I'm sticking to basic class components with state.

Go into your terminal, and within whichever directory you choose, type create-react-app [name of your app]. I named mine "Just the Tip" -- I know, so clever. After everything is finished setting up, open the file in whichever code editor you use. I use VS code, so while in the root of the project in my terminal I just type code . to get started.

Then navigate to your src → App.js file. This is where all the work is going to be done. I decided to only use this component since it’s a small app and doesn’t need to pass information around via props.

You will see that App.js is a functional component. We're going to change this to a class component, keeping it simple for the new-to-React folks. You should end up with something like this, after removing some of the superfluous code:

First, small step!

Now let’s take a moment to think about what would be needed for this app. In order to calculate tip, we’re going to need a few values — the total bill, the tip percentage, and the size of the party (if splitting the bill). These will allow us to get both the total tip and the tip per person numbers after a little basic math. Because we’re going to be storing and updating these values, we’re going to put them in state as empty strings.

State can be made like this nowadays, without a constructor.

You might be wondering, “Why empty strings? Aren’t we dealing with integers?” No? You weren't? Well, bonus points if you were wondering that, because it's a good question. While we could use integers, the empty strings would be a bit more flexible down the road. JavaScript is a weakly-typed language, which means it sort of just “knows” that the integer 42 is the same as the string “42” for most intents and purposes. This leads a bit more flexibility while sacrificing a bit of clarity. As you'll see below, I ended up using words ("Subpar", "Excellent", etc) to define a certain level of service versus using tip percentages. This was for UX purposes, and you might not elect to do the same thing - but JavaScript offers such flexibility by being weakly-typed.

Next, let’s build out some of the form so that we have a place for the users to enter some information. It’s important that we make sure that this form is "controlled," meaning that the inputs change their associated state values. We don’t yet have the functions that will do that change, yet, but we will take care of them in the next step:

A simple, controlled form.

We set the values of the inputs to a piece of state, making this a controlled form. We’ve also already put in the function names that will be called when something is typed into the field (ie “on change”). They’re all named something similar, but they are descriptive — anyone looking over the code instantly know which piece of the state the fields are responsible for. This is useful for many reasons, including debugging, peer review, and future refactoring.

Let’s go ahead and create those functions. They’re all going to take the value of the input that they are associated with, and set that piece of state using the setState() function. Remember, do not directly manipulate state with stuff like state.value = newValue! Use setState()! Additionally, they’re all going to take the event object as an argument so that we have access to event.target.value, which will be whatever's typed into the input box.

Not very DRY… It might be possible to combine these into one handler.

You can check if the state is being updated by looking in your React Dev Tools or by using console.log() on a piece of state and watching it change in the console in real time. It’s important to note that, for now, we don’t have any validations for the input fields. This means we’re able to type whatever we want into them and the eventual submission of the form will still go through. We’re just going to assume that the users will know exactly what to put into the fields for now; the main goal here is to practice using React and getting something up and running.

If you're a little more advanced in your dev know-how, you'll also notice that these functions are all pretty similar - they're not very DRY ("don't repeat yourself"). Is it possible to combine these into one handler function? Maybe! Again, I'm going for explicitness here, but I'm hoping that you'll take away these little tidbits too!

Now, it’s time for some tip-generating logic. We need to create a function that will take all the state values and do some math on them to create our two desired values: a total tip value and a tip per person. Since we know a tip is the bill total multiplied by a certain decimal, we’re just going to make it (this.state.total) * (this.state.service). Then, after storing this value in the state, we’re going to simply divide it by the party size to get the tip per person value. Finally, we’re going to make sure that this function is called upon the form’s submission. Sounds simple enough:

The parseFloat().toFixed(2) ensures that we round to two decimal places!

We must remember that setting state is asynchronous, so putting the tip calculations directly into the setState function will correctly post the totalTip, but will come up as 0 or undefined for tipPP. This is because tipPP depends on the totalTip, and is calculated at the same time as totalTip is calculated (which is still an empty string at the time). To remedy this, we simply put the calculations into variables, which are synchronous, and set the state fields as those variables.

We can now update our rendering a bit, such that the form will call genTip on submission and to display the tip values under the form:

Just two small changes, plus adding “required” to each field.

And we’re done! A fully functional app for calculating tip. You should have something like this:

Simple, elegant, useful!

Pretty awesome! But why stop there? There’s lots of ways to make this simple app even better. For example, the user experience is a bit lacking — who wants to type 0.20 for 20% tip? And right now, the user can type in any string, such as words, into the fields and get $NaN as a result. Maybe we need some form validations, like <input type="number" />. Also, in order to clear the form, we need to reload the page — sounds like we need a “Clear” button. And why have the fields all in a line? It’s an eyesore!

These are just a few of the tasks that can help refine some more skills using React. Perhaps you’d also want to add on a couple styling libraries? Or throw on a backend to be able to save your tips and keep track of how much a user tips generally, for research purposes? That last one might be a big one, but it illustrates that the possibilities for refactoring even this super-simple app are endless. Here’s what mine looks like now:

Very simple styling makes a big difference!

And after submitting….

I used a package called Sweet Alert for this display.

Cool, right? So your next steps could be styling, form validations, some libraries, and perhaps a backend (not necessarily in that order).

I hope you've found this guide useful, whether you’re a fresh beginner or a seasoned developer in need of a quick review. It was certainly useful for me to write it up as it forced me to redo and rethink many of the steps I had taken previously, therefore cementing the knowledge even more. I will be revisiting this project and some of my other (slightly) more complicated ones in the future!