DEV Community: Jackson Reeves

React Components vs. Normal Functions and the Props Parameter

Jackson Reeves — Fri, 27 Jan 2023 01:47:34 +0000

Moving from vanilla JavaScript to React can be a difficult mental lift for most beginner programmers. However, a lot of the mystique can be chocked up to syntactical differences, especially when it comes to the concept of props. Keep these two things in mind if you get thrown by React's props:

It's just a parameter. React's syntax may obscure that, but it's always just a parameter.
It's just an object. And like all other JavaScript objects, it consists of key-value pairs. React has you build that object in an unconventional way, but it's always just an object.

To help demystify React's props, I'm going to compare a vanilla JavaScript function with a React component. I'll demonstrate how they're built and invoked to emphasize their similarities and differences. Each main function will take a dog object as a parameter, then display something about that dog. And each main function will then be called in another function that will display information about many dogs. I'll also provide a mocked up data file with info about a few dogs, which will be used in both scenarios. For simplicity, assume all files are in the same folder, and that in both scenarios, there exists a main app file that imports and invokes the parent function to finally render the info. Try to ignore the document.createElements in the vanilla functions (they're only included to make the examples more parallel) and instead focus on the props.

Data

Creating a bunch of dogs (in data.js file):

const firstDog = {
  name: 'Lassie',
  breed: 'collie',
  age: 12
}

const secondDog = {
  name: 'Bobo',
  breed: 'terrier',
  age: 4
}

const thirdDog = {
  name: 'Sunny',
  breed: 'shepherd',
  age: 7
}

const dogs = [firstDog, secondDog, thirdDog]

export default dogs

Vanilla JavaScript Function

Creating the function (in dog.js file):

function normalishDogFunction(props) {
  // Actually using the props object
  const statement = `Hello! I'm a ${props.breed}. My name is ${props.name}, and I am ${props.age} years old. Bark!`

  // Creating a DOM node and adding text content to it the old-fashioned way, so this function can display something to the screen
  const item = document.createElement('li')
  item.textContent = statement

  // Returning DOM element to display, just like in React
  return item
}

export default normalishDogFunction

Using the function (in dogList.js file):

import dogs from './data.js'
import normalishDogFunction from './dog.js'

function normalishDogListFunction() {
  // Create a DOM node the old-fashioned way
  const list = document.createElement('ul')

  dogs.forEach(dog => {
    // Invoke the main function by passing it one of the imported objects; using forEach instead of map for simplicity's sake
    const dogItem = normalishDogFunction(dog)
    list.append(dogItem)
  })

  return list
}

export default normalishDogListFunction

React Functional Component

Creating the component (in Dog.jsx file):

function ReactishDogComponent(props) {
  // Actually using the props object, and in the exact same way as with the vanilla version
  const statement = `Hello! I'm a ${props.breed}. My name is ${props.name}, and I am ${props.age} years old. Bark!`

  // Use JSX syntax to return a virtual node without interacting with the actual document
  return (
    <li>{statement}</li>
  )
}

export default ReactishDogComponent

Using the component (in DogList.jsx file):

import dogs from './data.js'
import ReactishDogComponent from './Dog'

function ReactishDogListComponent() {
  const dogList = dogs.map(dog => {
    // Invoke the main component by passing it one of the imported objects
    return <ReactishDogComponent
      key={dog.name}
      name={dog.name}
      age={dog.age}
      breed={dog.breed}
    />
  })

  // Again, use JSX syntax to return a virtual node without interacting with the actual document
  return (
    <ul>{dogList}</ul>
  )
}

export default ReactishDogListComponent

Analysis

When it comes to the props, here are some key similarities:

In both cases, the main function just takes a single argument (props)
In both cases, the main function accesses values on the props object by using dot notation
In both cases, the main function must be called in another function, in which it receives the props it will end up using

Now, the key difference for the props object:

In vanilla JavaScript, you pass the entire object as a single entity to the main function
In React, you individually pass each of the properties that will exist on the props object to the main component; in essence, you build the props object within the main component's invocation

Advanced

The biggest trick with props is a direct consequence of the previously noted difference. Since you are passing the props object directly with vanilla JavaScript, the keys will end up exactly matching. Since you are creating the props object afresh with each invocation of the React component, you can make the keys differ if desired.

If you choose that approach, just remember that the key (what's before the equals sign in the invocation within the parent) must match the name of the property on the props object (what comes after props. in the component), while the value (what comes after the equals sign) must match something within the scope of the parent component.

For instance, you could have the following parent component:

function SomeOtherParent() {
  const emotions = ['happy', 'sad', 'angry']

  const list = emotions.map(singleEmotion => {
    return <SomeOtherChild
      key={singleEmotion}
      currentEmotion={singleEmotion}
    />
  })

  return (
    <ul>{list}</ul>
  )
}

And pair it with the following child component:

function SomeOtherChild(props) {
  const isHappy = props.currentEmotion === 'happy'
  const statement = `I'm ${isHappy ? '' : 'not'} happy!`

  return (
    <li>{statement}</li>
  )
}

This works since the key is established as currentEmotion in the invocation of the child component within the parent component, and it is then referenced via props.currentEmotion in the child component. Similarly, the value is established as singleEmotion in the invocation of the child component, which is a value accessible to that invocation at that level of scope within the parent component.

Note that if you tried to use props.singleEmotion or props.emotion (or any other permutation of that) in the child component, you would get an error because those keys do not exist on the component's props object.

Hopefully that helps to demystify props, but feel free to let me know about any confusion that persists, and I'll try to update this post to further clarify.

Add Version Control and Remote Access to a Plain Repo

Jackson Reeves — Sat, 02 Oct 2021 19:13:39 +0000

Here's a super simple tutorial for beginners. So simple that it's essentially exactly what GitHub posts on its site to help people out with this exact situation. I merely added three lines of commands to fill in some unfortunate gaps.

Scenario

You have a repo on your computer with all the code you need for your project. It works great. The only downside? It doesn't have any version control. As in, it ain't a Git repo. As a result, it also isn't shared anywhere (e.g., GitHub). You want to fix this, but how?

If you log in to your GitHub account and create a new repo, it gives you three different options for building out your shiny new remote repo. The second option makes the most sense for this scenario: "…or push an existing repository from the command line." You do have an existing repo, and you do love the command line. However, if you merely cd into your existing repo and run the three commands that GitHub provides, you'll quickly see that you actually need do a few more steps to accomplish your goal.

Solution

Here's my full guide to Git-ifying an existing repo and migrating it to GitHub.

After logging in to your GitHub account and creating a new repo, go back to your Terminal app and cd into your local repo. Then:

git init
git remote add origin https://github.com/<YOURUSERNAME>/<YOURREPONAME>.git
git branch -M main
git add .
git commit -m "Add initial files from local"
git push -u origin main

Note that steps 2, 3, and 5 are verbatim from GitHub's recommendations. While my three "missing steps" may seem painfully obvious to any experienced developer, I wanted to highlight them for the more junior members among us.

Determine the Maximum Number

Jackson Reeves — Mon, 22 Feb 2021 02:09:33 +0000

I overshot the goal on a homework assignment and came up with a function that would handle edge cases. It was just supposed to take in three distinct numerical inputs and determine which one was the largest. But I built my function to account for the possibility that two or even all three of the numbers might be identical, plus the possibility that one or all of the inputs might be non-numerical. It may have been overkill, but I’m pretty proud of how much I nerded out here.

Triple All the Numbers

Jackson Reeves — Mon, 22 Feb 2021 02:05:20 +0000

This function takes in an array and returns a new array containing each element from the first array after they were multiplied by three. Note the comments interspersed in the code. They act as guideposts, explaining each step of the code in pseudocode to make it easier for the non-coder to understand.

Find the Mode of Intervals

Jackson Reeves — Mon, 22 Feb 2021 02:01:57 +0000

A simple Python function for calculating the MQR, a nifty statistical measure of spread that I came up with one night.

I was annoyed that every measure of central tendency had a corresponding measure of spread—except mode. Mean has standard deviation; median has interquartile range. But what about mode? So for the sake of parity, I made one up.

I call it the Minimal Quintile Range (or MQR), which provides the length of the smallest interval that contains at least a fifth of the data in a set. In other words, the mode of intervals.

Push Object to a Paired Array

Jackson Reeves — Mon, 22 Feb 2021 01:49:54 +0000

Pushing an object from one array into another array’s object is tricky, especially if you don’t know how many elements are in each array or where each one might be found. If both objects in question happen to share a common key-value pair, then you can use this approach. You’ll end up giving the main array’s object a new key and setting its value to the other array’s object. You can achieve all of that with two for loops that iterate over both arrays separately plus an if conditional.

For more details about this technique (and alternative solutions to its underlying problem), check out this Stack Overflow answer that ultimately put me on the right track.

API and Database Playing Together

Jackson Reeves — Mon, 22 Feb 2021 01:36:21 +0000

I was in Promises Hell for about three days until I finally came up with this code. The problem: I needed to query my local database, then use the result from that query to make an API call, then render the results of both the database query and the API call on an EJS views page. This did not go as smoothly as I would have liked. The main hurdle was that my original code required making multiple API calls before moving on to the render stage, which landed me in Promises Hell. My solution was to parse some info from my database query to create a single string that I could feed into my API call, so I only needed to make one call instead of multiple (potentially hundreds) of calls each time. Then I was able to neatly package it all up and send it to my rated EJS views page. Oh, complicated routes, you certainly can be fun.

Code Snippets with Gist

Jackson Reeves — Mon, 22 Feb 2021 01:34:08 +0000

Gist is a cool resource. It’s for sharing code snippets anywhere online. It’s great if you want to share a few lines of your code instead of every document ever in your GitHub repo.

It’s related to GitHub, but in a really weird way. It’s a subsidiary or vertical of GitHub, so if you have a GitHub account (which we all do), then you automatically have a Gist account. Annoyingly, it’s difficult to access Gist from GitHub, but easy to access GitHub from Gist. To find your Gist from your GitHub, you need to click on your profile icon, then scroll down to “Your gists” in the dropdown menu. There’s no other place to find it. Additionally, compare your Gist profile and your GitHub profile: If you view your Gist profile, there’s a link to view your GitHub profile right below your profile pic and intro text, but not the other way around. Why? I have no idea, but I feel like this is a kind of annoying flaw.

Also annoyingly, albeit this time because of Slack: You can’t embed a Gist snippet inside a Slack post (instead of creating a code snippet in Slack), but you can include a link to your Gist snippet.

The major benefit of Gist code snippet’s over Slack’s code snippets is that you can use a Gist version anywhere, whereas Slack’s versions can only be used on Slack.

The Joys of Slack

Jackson Reeves — Mon, 22 Feb 2021 01:31:54 +0000

If you’re new to Slack and aren’t quite sure how to navigate all its functionalities, this guide might help! Included: tips on how to pep up your posts with different styles, a hands-holding guide to replying to a post in its thread as opposed to just in the general channel, and a note about emojis.

POSTS

new line: shift + enter (without the shift, it’ll post)
post: enter (no shift this time)
keywords: surround text with backticks (e.g., keyword text)
bold: surround text with asterisks (e.g., bolded text)
italicize: surround text with underscores (e.g., italicized text)
lists: begin message with the numeral one ( 1 ) for ordered lists or an asterisk ( * ) for unordered lists
block quote: begin line with a bracket ( > ); get out of it by creating a new line
inline code: begin with triple backticks ( ``); get out of it by closing it with triple backticks * code snippet: clicklightning bolt in new message, then select create a code or text snippet, then select what language to use in the type` dropdown menu, then paste in the editor

THREADS

reply to a post by clicking the chat bubble icon to go to the thread
post your comment as a reply in that specific thread, as opposed to in the general channel stream

REACTIONS

use emojis to quickly reply to a message without using text
have everyone click on a certain emoji to indicate they’ve completed a task

MENTIONS

grab someone’s attention by using the “at” symbol ( @ ) before their username
users get notifications of their mentions

MESSAGES

send a private message to specific user by going to the All DMs link in the top left of the main sidebar
type a user into the search bar to pull them up, then send them your message

CHANNELS

organize discussions into different sections, based on their primary focus
searchable
join or leave as needed
all your channels appear in your sidebar under channels
stars: star channels to pull them out of the general channels section of the sidebar and into a new starred section of the sidebar
pins: pin important messages in threads, so they’ll always be accessible via the pin icon in the top left corner of a channel’s stream

INTEGRATIONS

you can link up third-party platforms like Dropbox or Google Calendar

MORE INFO:

https://slack.com/resources/using-slack/how-to-use-slack

https://slack.com/help/articles/202288908-Format-your-messages

https://slack.com/help/articles/204145658-Create-a-snippet

Naming Conventions

Jackson Reeves — Mon, 22 Feb 2021 01:30:17 +0000

Anytime you create something new, you should give it a name. But what to choose? And how should it look? In terms of what, a good rule of thumb is descriptive but concise yet unique. In terms of look, it all comes down to “case,” from which there are quite a few to choose. The only thing they share is a refusal to use a space with multi-word identifiers. But how to style the rest? Do you want to replace the spaces with underscores? Do you want to alternate uppercase and lowercase letters? The decision gets particularly tricky because different scenarios call for different cases. Here are the four most common types of cases (as applied to the string “my identifier”), along with their common names, alternative names, and when to use them—plus some of their important variants.

myidentifier : flat case (lazy case); Java packages

MYIDENTIFIER : screaming flat case (upper flat case); SQL

myIdentifier : camel case (dromedary case, lower camel case); JavaScript

MyIdentifier : capital camel case (upper camel case, mixed case, medical case, Pascal case); Pascal, JavaScript classes, Python classes, Ruby classes

my_identifier : snake case (pothole case, underscore case); Python, Ruby, C

My_Identifier : capital snake case (camel snake case, mixed underscore case); Ada
MY_IDENTIFIER : screaming snake case (macro case, constant case); Python constants, Ruby constants, Java constants, C constants and macros

my-identifier : kebab case (caterpillar case, spinal case, dash case); HTML, CSS, URL, Lisp

My-Identifier : capital kebab case (big caterpillar case); HTTP headers
MY-IDENTIFIER : screaming kebab case (train case); COBOL

MORE INFO:

https://en.wikipedia.org/wiki/Naming_convention_(programming)#Multiple-word_identifiers

https://stackoverflow.com/questions/17326185/what-are-the-different-kinds-of-cases

https://stackoverflow.com/questions/60244301/where-does-the-word-pascal-case-come-from

FUN FACT:

Camel case was created in the 19th century by chemists, mostly for labeling elements in compounds. They capitalized the first letter of each chemical abbreviation and wrote chemical combinations without spaces between them (e.g., NaOH, NaCl). As a result, it was eventually known as "medical case.” In the 20th century, commercial companies adapted it for branding purposes (e.g., CinemaScope, VistaVision). In the 1970s, various computer programming languages adapted it as a naming convention for identifiers (e.g., WriteSymbol in Christopher Strachey’s GPM). In the 1990s, lower camel case became a popular trend with technology brands, which used “i” for internet or information and “e” for electronic (e.g., iMac, eBay). Around this time, calling the convention “medical case” was falling out of use, and some proposed alternatives were InterCaps and BiCapitalization. In 1995, Newton Love first used the term camel case, and it’s stuck ever since.

How to Close an Entire Window

Jackson Reeves — Sat, 20 Feb 2021 19:29:29 +0000

If you want to close all the tabs open in one window of an application (aka, close a window), use Shift-Command-W. (In contrast to using Command-W, which only closes an individual tab open in one window of an application.) Just discovered this, and it’s a life-saver. Previously, I just quit VS Code after finishing each repo to avoid ending up with a cluttered screen.

Make iTerm Open Links in Chrome Instead of Safari

Jackson Reeves — Sat, 20 Feb 2021 19:27:08 +0000

Do you prefer to do all your development work in Chrome but still want to have Safari as your default browser? Sick of having iTerm automatically open all links in Safari instead of Chrome, and then having to copy said link and paste it into Chrome yourself? That takes up so many valuable seconds!

Inspite of all my best research, I wasn’t able to find a way to configure this in iTerm’s preferences. Sure, there’s the Context Menu Items for Smart Selection Rule that’s mentioned in this Stack Overflow answer, but I wasn’t able to get that to do anything. Like, at all. But maybe I’m just stupid.

Lacking an official approach, I did stumble across this hack: Add BROWSER=chrome to your .env file. Going forward, whenever you npm start, it should open with Chrome (even if Safari, or whatever other app, is your default browser).

A few caveats:

You have to do this individually with every repo going forward. But, on the plus side, once you do it initially with that repo, you should never need to worry about it opening in Chrome.
React apps come with a lot of Node modules pre-installed. ENV is not one of them. You’ll need to npm i dotenv after you npx create-react-app. Then, of course, touch .env once you’re in the repo’s main folder, so the file will be created at the top level. Interestingly, after merely creating the file and storing the above string in it, you don’t need to do anything else. As in, you don’t need to require('dotenv').config() in your index.js file or anywhere else (which I had to do with my other Node projects). If these additional steps sound unappealing, you could also just run this one, slightly longer line every time you plan to do an npm start: just type BROWSER=chrome npm start, which achieves the same effect as the above configuration.
This approach wouldn’t work with any non-Node projects (React is Node compliant). So this wouldn’t work for any of vanilla JavaScript repos. Or anything in any other programming language. However, there may be some .env analog in those situations. Plus, if you’re opening a file from the terminal, you can always type open -a chrome index.html instead of open index.html (or whatever file) in order to make it open in Chrome. Not as simple, but it works.
Every OS handles this a little differently. Windows uses chrome, Linux uses google-chrome, and Mac uses google chrome. So depending on your computer, you may need to type something different after BROWSER= in your .env file. (I have a Mac, but chrome works for me; however, I think that’s because I renamed the Chrome app in my Applications folder from Google Chrome to just Chrome forever ago. TLDR: Try them out until you get a fit, check what your Chrome app is specifically named in your Applications folder if none of those are working, and try wrapping it in quotes if you need to use the two words google chrome.)

h/t to the Stack Overflow answer that finally led me to this approach