Forem: Christian Fields

ES6 {Destructuring} Deep Dive

Christian Fields — Wed, 19 Nov 2025 00:41:14 +0000

We all know what variables are, and there are plenty of times where we find ourselves using objects or arrays with long property names on them over, and over, and over... Wouldn't it be nice to just have a variable referring to that property without assigning fifty variables manually? Well, that's where destructuring comes in - destructuring is a way of saving values from complex data types to a variable without having to make a bunch of them by hand.

Basics of Destructuring

The basic syntax for destructuring is pretty simple, but a lot of people don't know how to use it, so let's go over a couple examples with both objects and arrays! We'll do this with the destructuring "binding" pattern, though there's also an "assignment" pattern. We can start with a basic object:

const obj = {
  a: 1,
  two: 83,
  banana: 'bread',
}

To "destructure" this object, we essentially just assign variables to it using object syntax!

// this grabs the "two" property and the "banana" property
// from our object, but not our "a" property
// this is great for when we need to reuse a value repeatedly,
// like if you were using props in React!
const { two, banana } = obj;

// and then we can access our destructured values
// like any other variable!
console.log(two); // outputs 83 to the console
console.log(banana); // outputs "bread" to the console

Arrays have a similar destructuring syntax, but will assign values in order instead of by a key name, since they don't have the same kinds of keys an object does:

const arr = [1, 2, 3, 4, 5]
const [a, b, c] = arr;
// a = 1, b = 2, c = 3!

So, those are the basics! But what if we wanted to get a bit more in-depth? Maybe we don't want to assign variables to EVERY value, but still want ongoing access to the remaining values separate from the original collection?

...Destructuring and the Spread Operator

We can actually use the spread operator with both arrays and objects to "scoop up" the remaining values into a neat little array/object separate from the original one! For arrays, the result is simple enough:

const groceries = ["spaghetti", "tomatoes", "milk", "butter", "cheese"];
const [pasta, fruit, ...dairy] = groceries;
// "pasta" holds "spaghetti",
// and "fruit" holds "tomatoes", just like before,
// but now we have access to a "dairy" array
// which looks like this: ["milk", "butter", "cheese"]

Cool, right? Objects are pretty much the same, but instead save the results to a new object with the remaining properties on it:

const zeldaQuotes = {
  dekuScrub: "Twenty-three is number one!",
  link: "Hyah! Hup! Ha! Hyah!",
  navi: "Hey, listen!",
  zelda: "Help me, Link! You're my only hope! Wait, wrong franchise..."
};

const { link, navi, ...rest } = zeldaQuotes;

console.log(link); // outputs "Hyah! Hup! Ha! Hyah!"
console.log(navi); // outputs "Hey, listen!"
console.log(rest);
// ^ outputs an object that looks like this:
// (I shortened the quotes for space)
// { dekuScrub: "...", zelda: "..." }

Notice how, with objects, we don't even need to grab the properties in order! We got link and navi, skipping dekuScrub entirely, but our rest variable still has both zelda AND our skipped dekuScrub!

Well, that's cool and all, but what are some other things we can do?

More cool stuff!

Nested Destructuring and Default Values

Well, what if maybe one of our values was undefined? That's when you'd use a default value. Just like with a function parameter, you can assign a "default" to a destructured variable in case the value is undefined! This is pretty easy:

// since b's value is undefined, it's automatically set to 12
// note: would not take effect if we used null instead of undefined
const { a, b = 12, c } = { a: 1, b: undefined, c: 18 };

And if a value in an array or object is another array or object, we can nest destructuring syntax to get to these nested values more quickly and conveniently:

const obj = { a: 1, b: { c: 13 }, d: 9 };
const { a, b: { c }, d } = obj;
console.log(c); // outputs 13!

const arr = [ 1, [ 13, 18 ], 12 ];
const [ a, [ b, c ], d ] = arr;

console.log(a, b, c, d); // outputs 1 13 18 12

Reassignment

If we want to reassign destructured values, we can simply use the let keyword instead of const! If we want some values to be reassignable and others not to be, we'd have to destructure multiple times:

const obj = { a: 1, b: 2, c: 3};
const { a, b } = obj;
let { c } = obj;

console.log(c); // outputs 3
c = 4;
console.log(c); // outputs 4!
a = 2 // TypeError: Assignment to constant variable :(

Variable Swapping

With arrays and simple values, you can use destructuring to easily swap values! I personally found this really helpful in a function I wrote recently.

let pop = 'tart';
let tart = 'pop';
// outputs "tartpop"... that doesn't seem quite right...
console.log(pop + tart);

[pop, tart] = [tart, pop]; // basic destructuring swap!
console.log(pop + tart); // outputs "poptart" :D

const arr = [ 1, 2, 3 ];
[arr[0], arr[1], arr[2]] = [arr[1], arr[2], arr[0]];
console.log(arr); // outputs [2, 3, 1]!

Ignoring Values w/ Arrays and Function Destructuring

If you want to skip a value when destructuring an array, you can simply leave an empty space in its place:

const arr = [ 1, 2, 3 ];
const [ a, , b ];
// a = 1, b = 3, we don't need 2!

Additionally, we can easily destructure function outputs, which is quite frequently used when working with React hooks! This is a bit of a silly example, but here's a basic showcase of destructuring the output of a function that returns an array:

function makeArr(...args) { return args; }
[a, b, c] = makeArr(1, 2, 3);
console.log(a, b, c); // outputs 1 2 3

We can even destructure function parameters if we know what kinds of arguments we'll get, which I personally use a lot with both imports and when passing values through props with React!

function logProperties({ a, b, c }) {
  console.log(a, b, c);
}

logProperties({ a: 1, b: 2, c: 3 }); // outputs 1 2 3

Wrapping up...

That's most of the stuff on destructuring I could find that'd make sense to include. Destructuring is a surprisingly in-depth topic in and of itself, and on the MDN page alone I found quite a bit of info on them that I've already started integrating into my daily code usage. It's definitely been a more fun topic to look into than I thought it would be.

Encryption: The Ways We Protect Our Data

Christian Fields — Mon, 10 Nov 2025 15:05:22 +0000

Encryption is a big deal in information safety. If you've never heard the word "cryptography" before, that's exactly what it is - safety. Encryption is the process of transforming a set of data in such a way that it can't be read or used without knowing how to "decrypt" it. This process has been present throughout history, especially in warfare, and dates back to thousands of years in the past. In modern times, however, it's used primarily for transferring sensitive information across the internet... Wouldn't exactly want your bank details being stolen when you enter your credit card into a website, after all. To decrypt encrypted data, you'd need a special kind of "key" to know how the data was encrypted in the first place, then you'd have to reverse the encryption to get the original data. There are many methods used to encrypt data, and today we'll go over some of the ones that are used on the internet, and how secure each of them are.

Two (and a half) Different Encryption Types

There are two ways to encrypt data: symmetric and asymmetric. There's a "third" type which is debated on whether it actually counts as encryption, known as "hashing." We'll look into the overview of what each of these ways are, and then go over some of the individual algorithms - the "methods" used in each type of encryption.

Starting with symmetric encryption, it's fairly simple - both the sender and the receiver of the information need access to a secret "key" which allows them to both encrypt and decrypt data. This is good for closed systems where there's little to no chance of the key getting out, but if someone were somehow to get ahold of your key, they'd be able to decrypt any and all of your data. It's like handing out copies of your house key - you need that key to get in and out, but if somebody stole one of your keys, they could also get in and out any time they wanted, without your permission.

Asymmetric encryption, on the other hand, while slower than symmetric encryption, is a bit more secure. It utilizes a public key, which anyone can access, to encrypt data - then a private key to decrypt it, allowing access to the data. Both keys are simply very big numbers which are mathematically linked. The numbers are different but connected, hence the "asymmetric" name.

Hashing, unlike the other two types of encryption, isn't a way to send and receive data securely - instead, it's a way of monitoring changes to a data set. Hashing data is a way of generating a unique, secure "signature" for each individual item or message in a set of data. This signature will be changed in minor ways with each change to the data itself, making it easy to track when a change - authorized or not - has been made. However, hashed data cannot be decrypted or reverted to its original form, making it entirely impossible to get access to it without simply having access to the original data.

What Are Encryption Algorithms, and What Are Keys?

An algorithm is the thing used to encrypt your data. It converts a provided set of data into another set of data - one that appears to be random, but has actually been generated in a predictable way that can be reversed via a key.

A key is like a special "code" you need to access your information. Once you receive a set of encrypted data, if you have the right key, that can be used to convert it back into its original state, allowing you to view it as normal.

Essentially, the the algorithm "locks" your information to be sent somewhere else, and the key "unlocks" it once the receiver gets it themselves. If it's intercepted along the way, and the interceptor doesn't have the key, it's difficult for them to get access to it - this is why encryption is important. Even if a hacker were to get hold of your credentials, if it's encrypted and they have neither the key to unlock it nor the tools to get around that, they can't exactly do anything with it.

Examples of Encryption Methods

Since we've gone over encryption and the various parts of it, let's talk about some methods used TO encrypt your data:

Data Encryption Standard (DES): The oldest and most used form of encryption, this symmetric method takes 64-bit blocks of plaintext (the stuff you want to encrypt) and converts it into ciphertext (the plaintext that has been encrypted) via 48-bit keys.
Triple DES: Created to counter hackers who figured out how to bypass DES encryption, Triple DES applies DES encryption three times over to each block of data. Often used for ATM pins and UNIX passwords, it was once the most widely used symmetric method, but isn't as common nowadays.
Advanced Encryption Standard (AES): Another symmetric method, this is the standard and trusted encryption system used by the U.S. Government, AES is an extremely powerful way to encrypt data, and is quite popular when it comes to private data. It's used by many companies, and is believed to be invulnerable to all but brute force attacks (essentially, just guessing the key repeatedly until you get it - since keys can be so complex, this usually takes a VERY long time, even with an automated system for it).
Rivest-Shamir-Adleman (RSA): The standard for transferring data across the internet, this asymmetric encryption algorithm works by essentially generating a ton of gibberish that hackers waste time and effort attempting to decrypt, serving to frustrate them before they ever get the chance to receive your data.
Blowfish: A secondary replacement for DES, this symmetric algorithm is known to be fast, reliable, and secure. It's also free to use, being in the public domain. Often used for digital trade and payments, as well as password management.
Twofish: Essentially Blowfish's successor, and another symmetric algorithm, it deciphers in 128-bit blocks and always encrypts in 16 rounds regardless of key size. Used in many modern file and folder encryption systems due to its speed and security.

Concluding Thoughts and Resources

Overall, there are a LOT of ways to encrypt data. As technology and innovation advances, we'll no doubt see many more in the future. Security, especially on the web, is constantly being developed to ensure protection of its users, including your personal data as an individual. I believe that putting the effort in to learn about the subject is what motivates people to help aid in that development, so here are the resources I used for this blog:

A Rundown on PWAs

Christian Fields — Tue, 04 Nov 2025 08:56:23 +0000

The Basics

Let's start with the very basics: What is a PWA? It stands for Progressive Web App, and to really understand the full capabilities of them, you first need a base level of understanding of both a normal website and a platform-specific app.

Starting with Websites...

So what's a website? Well, as odd as the question may seem, there's several traits to a website that are important to consider when making or looking into a PWA. A website is something hosted on the internet - obviously, yes, but it means a few things for us as users and developers.

A user doesn't download a website to their computer; it doesn't take up space, it isn't something you need to install, it's just hosted on the internet.
Websites, BEING hosted on the internet, are inherently compatible with pretty much any device that can get an internet connection -
However, being hosted on the internet, you can only really access them THROUGH it; they can't really do anything while you don't have your browser open, and they can't be visited or used without a connection of some kind.

Traditional websites are incredibly versatile when it comes to accessibility and compatibility, but they're limited in that they can't really DO anything outside of the browser and without a signal you can completely forget about looking up adorable cat photos (reference included, of course).

How about Platform-Specific Apps?

Platform-specific apps are pretty much the opposite of websites in most ways. They're installed directly to the device, but are, as the name implies, built specifically for certain platforms. The apps you find in your phone's app store are platform-specific ones! With that in mind, let's go over some of the things that make them so different from websites that I'd call them opposites:

Being built specially for certain platforms, they lack the almost global compatibility websites inherently have, making your ability to use them entirely dependent on what devices you have available.
Being installed directly onto your device, they take up storage space where a website wouldn't, but...
They're pretty much always available once you DO have them - accessing one is as simple as pressing the app's icon, and -
They have the ability to run and function in the background, even when you're away. This is useful for things like delivering notifications while an app is closed or quietly updating while you aren't using it.
Additionally, they can be given access to other parts of your device to make various every-day features possible. This can range from all sorts of things, like taking or uploading pictures to other apps, to sharing your location with your friends or helping you find your way to that hot new café on the other side of town.

Platform-specific apps are more limited in who can use them, but are much more integrated into your device, so that if the app IS built for your operating system (OS), you can do quite a bit with it.

But weren't we meant to be talking about PWAs?

Yes, yes, I know, that's up next - now that we've established an understanding of sites and apps, we can go over what PWAs actually do. They're essentially the best of both worlds; they take all the good features from both websites and platform-specific apps, and mash them into one, resulting in hyper-compatible, accessible, and integrated web apps that can be used by virtually anyone (virtually, by anyone!).

Let's go over some of the features of a PWA, then we can talk about some examples of popular ones that maybe even you use!

Like websites, they use standardized technologies, allowing them to be used by basically any device without having to explicity implement compatibility with other operating systems.
Due to being web-based, they can be accessed directly from the web, meaning you don't necessarily have to download anything to use them,
But like platform-specific apps, they CAN be downloaded, either directly from the web or from your device's app store!
Once you HAVE installed the app, it can be used without needing your browser open all the time, and can be easily accessed via a dedicated icon on your device just like a platform-specific app.
They can work in the background or receive updates while not in use, and can have access to features of your device just like a platform-specific app.
Unlike websites, they can work even while offline, and can make use of the entire screen where a website would be limited to the browser's UI.

PWAs are, essentially, an app for your device that acts as a portal to a website. They look and act like like a platform-specific app (albeit much more compatible with other operating systems) but they still, technically speaking, are websites. They have the benefits of a platform-specific app, but run on a browser engine, which acts as a middle-point between the app itself and the OS (unlike a platform-specific app, which interacts DIRECTLY with the OS). The browser engine essentially just does its thing in the background, and as far as the PWA is concerned, you're basically still interacting directly with the OS. But the fun part about technically being a website is that PWAs can also be treated like one. They utilize at least one HTML file, can be decorated with CSS, and may even use some behind-the-scenes JavaScript, exactly the way you would - including access to the global window object and its methods as well as any web APIs available through it. PWAs are overall an incredible bridge between the average website and a dedicated platform-specific app.

That's pretty much it from me, but as promised, some examples of PWAs in the real (virtual) world include Starbucks, Spotify, Uber, Forbes, Google Maps, Trivago, Facebook, The Washington Post... Odds are you use PWAs ALL the time even if you didn't know what they were before now. Hopefully you got some good use out of this, and as always, I'd encourage you to do some research about the topic on your own!

Before I go, I'll mention that for pretty much all of my research (all except the examples of real-world PWAs that I found) came from the MDN Docs on them, and I found them very informative personally. I know this post was a bit of a text wall, but there aren't many visuals to show for the concept of something I'm not currently working on. That being said, there's a diagram on MDN that might help clear up the relationship between PWAs, the browser engine, websites, and your OS if you found that part confusing. Have fun with your research!

A Factory Reset on Factory Functions

Christian Fields — Fri, 05 Sep 2025 03:57:23 +0000

A Simple Introduction:

So, maybe you're new to Javascript, and don't know what a factory function is. Or maybe you're a pro and you need a bit of a refresher. Either way, today we're going over that exactly: factory functions, an easy and convenient way to mass produce objects to your heart's desire.

Getting Started...

Let's start by going over what a factory function actually is, and why it'd be useful.

A factory function is what we call a function that's designed to easily create multiple objects with similar data to your specifications that you'd otherwise have to repeat over, and over, and over... which gets tedious and messy fast. Sometimes, we find ourselves needing a lot of... basically the same objects, and we don't want to just type out the same variable for each one we need; for example, if you were trying to store users for a website, entities in a game, or whatever else you might need. That's where these handy functions come in. For this post, we're going to use that first example as... well, our example. So let's make an object:

const person1 = {
  firstName: "Mary Jane",
  lastName: "Watson",
  age: 23,
  career: "modeling",
  hobbies: ["stalking Peter Parker", "partying"]
}

We now have a basis for what our objects need to look like. From here, we could, of course, do the same thing several times over, manually making each object we need for each potentially infinite user of our hypothetical database... or, we could do what programmers do best, and use our problem solving skills to automate the process for us.

But how can we do that? Well, to start, we'll need a function that makes an empty object, and it'll obviously have to return it:

function factory() {
  const newObj = {};

  return newObj;
}

(Alternatively, we could've simply had the function return an anonymous object: return {};)
So how do we make use of this? Well, we need to be able to pass in data, to begin with. How else will we tell the function what we want our object to hold? Let's add a few parameters based on what our person1 object looks like.

function factory(firstName, lastName, age, career, hobbies) {
  const newObj = {};

  return newObj;
}

Now we're able to pass in the data we want our object to have. But obviously, that alone isn't enough, so we'll have to assign the data to our object. It's as simple as giving the object a key-value pair of the same name ({ firstName: firstName }, for example), or, since our key is evaluating to its own value, we can just put its name in.

function factory(firstName, lastName, age, career, hobbies) {
  const newObj = {
    firstName,
    lastName,
    age,
    career,
    hobbies
  };

  return newObj;
}

Finished, but let's do a little extra.

And just like that, we're already done! We can call the function, pass in our values, and assign the result to a variable. Nice and easy. But we can do a little bit more with this that you might find useful as well: we can throw a function into our object, and every object we make with our factory function will have that function... (I'm saying "function" a lot, I know, but that's kinda what this whole article is about.)
Let's do something simple for this tutorial, but you could make this into literally anything. We'll return the full name of the user, followed by their age.

function factory(firstName, lastName, age, career, hobbies) {
  const newObj = {
    firstName,
    lastName,
    age,
    career,
    hobbies,
    full: function() {
      return `${firstName} ${lastName}, ${age}`;
    }
  };

  return newObj;
}

I used something called a "template literal" for mine, essentially a string in which you can evaluate expressions - something fun to look into on your own time - but you could do this with simply concatenation (adding strings together) like this: firstName + " " + lastName + ", " + age.
And now we're all done! Let's make another user using our new factory function to show it off!

And the results of our (pretty minimal, considering the payoff) efforts!

const person2 = factory("Peter", "Parker", 23, "photographer", ["rescuing civilians", "preaching the importance of the responsibility that comes with power", "taking selfies"]);

// person2 now equates to the following object (excluding the function it has built in):
{
  firstName: "Peter",
  lastName: "Parker",
  age: 23,
  career: "photographer",
  hobbies: ["rescuing civilians", "preaching the importance of the responsibility that comes with power", "taking selfies"]
}

And we can use this to mass produce objects of the same structure! I could set up, for example, a user input field which takes these values, and turn the results we get from submitting the form into one of these objects to store in our hypothetical-website-database. And as for the function, it works great!

console.log(person2.full()); // logs "Peter Parker, 23"!

And that's all you really need to know! Customize your function to your heart's content, modify info as you receive it if you want, give the object its own functions, and take pride in making effective use of the Don't Repeat Yourself technique!

Just... try not to make too many spider-men...

Chuck Norris glanced at a computer screen and this API was made.

Christian Fields — Mon, 14 Apr 2025 17:59:49 +0000

Chuck Norris once broke the law. They are still trying to put it back together.

Hey, you! Have you ever felt a BURNING desire to have access to Chuck Norris jokes in your code project, whenever and wherever the situation calls for it (as it has SURELY called for it at some point)? Of course you have, who hasn't! So let's jump straight into today's API: the Chuck Norris Jokes API.

Chuck Norris won on TV's "Jeopardy" game show by answering every question with "Who is Chuck Norris."

Getting started with the Chuck Norris Jokes API is pretty simple; all you have to do is send a GET request to the jokes endpoint, depending on what kind of a joke you want (if you just want a random one, jokes/random works perfectly fine!). You don't need anything special to access it, so have fun throwing Chuck Norris jokes around your next web project!

Chuck Norris keeps a shotgun in his wallet.

When you make a GET request to the API, it returns a JSON object that looks like this:

{
    "categories": [],
    "created_at": "2020-01-05 13:42:18.823766",
    "icon_url": "https://api.chucknorris.io/img/avatar/chuck-norris.png",
    "id": "uyvvbkzaqlo5ao1v7sxx4a",
    "updated_at": "2020-01-05 13:42:18.823766",
    "url": "https://api.chucknorris.io/jokes/uyvvbkzaqlo5ao1v7sxx4a",
    "value": "There?s an order to the universe: space, time, Chuck Norris.... Just kidding, Chuck Norris is first."
}

You can get a list of valid categories by visiting or making a request to the categories endpoint (https://api.chucknorris.io/jokes/categories). You can get random jokes from a category of your choosing by simply adding a category parameter with the value being your chosen category. For example, if you made a request to https://api.chucknorris.io/jokes/random?category=dev, you could get a response like this:

{
  "categories": [
    "dev"
  ],
  "created_at": "2020-01-05 13:42:19.324003",
  "icon_url": "https://api.chucknorris.io/img/avatar/chuck-norris.png",
  "id": "7tuczvb2rpy-xn7alkmz0w",
  "updated_at": "2020-01-05 13:42:19.324003",
  "url": "https://api.chucknorris.io/jokes/7tuczvb2rpy-xn7alkmz0w",
  "value": "Chuck Norris's OSI network model has only one layer - Physical."
}

Here's what each part of these responses mean:

"categories" holds an array of categories being used for the search.
"created_at" and "updated_at" are simply dates showing when the joke was added to / updated in the database, something you don't really have to worry about.
"icon-url" is an avatar image of Chuck Norris himself!
"url" is the url directly to the joke on the api's website, and "id" references the joke's actual ID to be appended to the basic url.
Most importantly, "value" is the actual joke! You need to access this value to be able to save or use the joke anywhere.

Chuck Norris made Minute Maid lemonade in 59 seconds.

To use this on a website, you'd want to access and display at LEAST the value... value. Optionally, you can also display the icon for fun, the urls so that people can find the jokes they like again later on, and what categories were used for the search if you allow people to choose.

If the endless applications of this API aren't immediately apparent, let's go over some potential uses of it:

An informational Chuck Norris Facts website!
A Chuck Norris History page!
Chuck Norris Trivia Night!
Informing the uninformed visitors of your websites of the greatness that is Chuck Norris!
Official Government Websites that wish to warn foul ruffians, various ne'er-do-wells, and uncouth law-breakers of the threat that is Chuck Norris!
Entertaining users of your otherwise boring, non-Chuck-Norris-ified applications with comedic AND factual Chuck Norris jokes!
Many, many more!

Chuck Norris invented beer & pizza. He also invented the wheel but it doesn't taste as good at a Superbowl parties.

Well, that pretty much wraps up this blog! Naturally, the Chuck Norris Jokes API is THE most interesting application on the internet, so there's not much to be said about that. I'd love to explore it further, but unfortunately, I'd likely disintegrate while doing so just from the sheer awesomeness that is Chuck Norris.

So, that's all from me this time! Just remember: If Chuck Norris is on your side, then Nationwide becomes irrelevant.

Getting Hooked on React!

Christian Fields — Fri, 07 Mar 2025 19:42:17 +0000

Same as in my last post, I was using and referencing React's Legacy version and its documentation when writing this. If you've been using React's modern versions, things might look a bit different!

A Small Introduction

So you’ve played around with React.js a bit, and you’re wondering what the next step is… Why not give Hooks a try? Hooks are a way of using state or other React features without writing a class. They bring a little more of the “magic” of React into your code, and they aren’t all that difficult to learn.

What Hook do tho???

So what DOES a Hook do? Well, for one thing, they let you easily reuse stateful logic without having to change your component hierarchy, meaning less hassle with getting your components in the right order to use things where you want them. They also cut down on component complexity by splitting a complex function up into smaller parts, and lessen the struggle of trying to learn how to use a class by the fact that it allows you to use most of React’s features without them. They also work great even with preexisting code, and are backwards compatible, making it easier to transition to using Hooks if you so please.

Things to keep in mind...

Now, while Hooks are very useful, there are a few things to note about them. There are two rules to follow when using Hooks: only call them at the top level, instead of inside a nested function, loop, or conditional, and only call them from React functional components — they don’t work inside of class components (as they’re designed to let you use React without those), and you shouldn’t try using them inside of regular functions. You can, however, use them inside of your own custom Hooks. Hooks can effectively replace even lifecycle methods such as componentDidMount.

Example time!!!11!1!!

While telling you about Hooks is all good and well, I think it’d be best to show off some examples. Lets start with the State Hook, a built-in Hook that allows you to use State inside of functional components. We gain access to it simply by importing it, like this:

import React, { useState } from 'react';

Well, now that we have it, what do we do with it? useState is a function that takes in our initial value for our state, and returns a pair of values, being our new state and the function for updating it (in class components, this translates to this.state.value and this.setState). So let’s pretend we’re going to have a password for a website, and make a component with state based around that:

// gotta use functional components!
function Password() {
  // since we get two outputs as an array, we can handle them like this!
  const [password, setPassword] = useState('ilikespaghetti123');
}

Now we have two variables, one which stores our password (ilikespaghetti123), and one which allows us to change the password whenever we want. To access these values, you'd usually have to reference this, which is a bit of a hassle. Instead of saying this.state.password, we can simply refer to password! But what if we actually DO want to change the password? It's as simple as calling our function with a new value:

setPassword('BananasRYellow24');

Ideally, we'd have this function bound to some kind of a button, take user input from props, or in the case of something like a counter, it could even interact with itself by passing in something like count++. And yes, we can even declare multiple state variables in the same component, as well as update them individually!

Additionally, you can use something called Effects to replace lifecycle methods, or even create your own Hooks to do... whatever you want, basically. Unfortunately, I don't have a good example of what you can do with the former that wouldn't just be copy-pasted from the React documentation, but you'd use it when you need to update something every render, such as a counter or the color of something or an info card; and I didn't understand the latter well enough to write about it, so I'll be moving on, but it's definitely worth checking out for yourself!

Are you Hooked yet?

While this wasn't a SUPER fleshed out blog, it covers my current understanding of Hooks, with some very basic examples of what one might do with them. I think Hooks are very interesting, and I'm excited to keep exploring them, especially considering the headaches class components have given me in the past. I hope you found this article at least semi-helpful, and as always, you should check out the official docs when you get the chance!

Introducing Hooks - React Legacy Documentation

How do I React(.js)???

Christian Fields — Sat, 08 Feb 2025 22:13:14 +0000

Note: This blog was written to discuss React's LEGACY version, and was done using React on its own, so the info may be out of date or inefficient compared to what some of you coding pros are used to!

An Introduction to React...

React.js is a popular Javascript library designed to make front-end development and user interfaces (UIs) easy. It utilizes JSX syntax (which essentially combines HTML and Javascript) to combine functions, classes, and HTML elements into components which create the visual part of your website. These components are oftentimes linked together and reference each other to make the entire interface much more interactive, with itself and with those who use it. React leans heavily into ES6 syntax, with the way it utilizes classes, arrow functions, template literals, and more. The entirety of React is built in these components which make the process of creating a website much easier.

// an example of using JSX syntax to create a header element,
// stored as a variable!
const myHeader = <h1> wooo headers :D </h1>;

What are components? What do I do with them???

Essentially, a component is a function or class which serves as a split off piece of the UI, which we can reuse as much as we'd like later on! Components made using functions are "functional components," and components made using classes are "class components." There are a fair few differences between each of them, and which one you use depends mostly on your own preference and what you want to do with them. In some projects, you may even use both!

// a simple functional component
// outputs an h1 element with the text "Hello, World!"
function HelloWorld() {
  return <h1>Hello, World!</h1>;
}


// a basic class component which does the same thing!
class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

To use these components, we can insert them as an element into another part of our UI to have the whole component rendered for us. We do this by calling a self-closing tag with the name of our component, like this: <HelloWorld />. This one tag will render our entire component, which wasn't very big in this case, but in the future may be a lot bigger depending on what our project is. We could render several dozen lines of code with just our component tag! And we can even call that component tag as many times as we want. Not to mention that we can even use Javascript in our code to make these components much more dynamic and interactive... By using our curly brackets ({}) we can write regular code wherever we want in our component, even inside our HTML elements!

// our simple functional HelloWorld component,
// modified to use our myName variable!
function HelloWorld() {
  let myName = 'Action Movie Hero Boy';

  // this time, since our myName variable evaluates to itself,
  // we output a header 1 "Hello, Action Movie Hero Boy!"
  // by rendering this component!
  return <h1>Hello, {myName}!</h1>;
}

What's the difference between functional and class components?

Well, I'm not quite sure of ALL the differences myself, but let's go over some important ones together!

Functional components are a lot simpler, and for the most part seem easier to use!
Class components are a lot more interconnected! Makes it easier to have big interactive UIs if at least one (very likely the topmost one) of your components are a class component.
Class components have some built in functions to help them along, like componentDidMount, which lets us tell the UI what to do when the item first gets rendered, or componentWillUnmount, which allows us to define what'll happen when the component gets UNrendered! These are called lifecycle methods.
Class components, being classes, can have functions as methods for easier access and additional interconnected-ness.
Class components can use something called state which is writeable...
Whereas both components can use something called props which is read-only! A component, regardless of its type, should never directly modify its own props! (We'll go over both state and props in the next section)

Now, while it may seem like class components are just objectively better (in some cases, they are), there ARE still reasons to use functional components; like when dealing with simpler code or stateless components, or maybe you're just angry at class components because of the suffering they've put you through. For the most part, both component types can do the same jobs, but React is very pro-ES6, which is where our classes come from! So now let's go over state and props...

State and Props, what do they do and when do I use them?

Both state and props are ways to store data in our component that is passed in or can be passed to another component. Props are passed into the component when it is called, and state is declared inside of a class component's constructor. We don't really modify props, but we can replace it each time the UI is rendered and our component is rendered again, allowing for some fun user-interaction. State is declared in our class component, like mentioned before, and is often passed down to other components in the form of props to pass data around from component to component. We can even pass down a method that'll allow us to modify our state from a different component, if we want!

So here's a mini-example of how we could use both:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: 'Link',
      title: 'the Hero of Hyrule',
    };
  }

  render() {
    return <Greet name={this.state.name} title={this.state.title} />;
  }
}

function Greet(props) {
  return <h1>Hello, {props.name}, {props.title}!</h1>;
}

So what just happened here?

We declared our class component which is the hypothetical topmost component of our UI app.
We declared a state with the keys name and title, just like a normal object!
We rendered another component, Greet, which is functional, passing down our state's name and title as props!
In Greet, we return a simple h1 tag which renders "Hello, Link, the Hero of Hyrule!" utilizing the name and title passed down into our props!

You can use these both for a whole lot more than something basic like this, it's just a matter of your creativity (And sometimes, your ability to read the documentation...)! Keep in mind that when using props, in a class component we refer to it using this.props, whereas in a functional one we can just use props. One more thing to note before we move on is that we shouldn't modify our state directly. We should instead modify it by using the setState function which comes with our this keyword. It overwrites any state properties we refer to, leaving the others alone. So if we wanted to change our title, we could have done something like this: this.setState({title: 'Zelda's Knight'}). In this case we passed in an object, but you could also pass in a function which RETURNS an object if you wanted to do more with this.

My opinion of React?

I think React is a great tool for UI developers and front-end development in general. I had a lot of fun learning to use it, even if it was a bit of a learning curve for me. There are also a lot of other things to be used WITH React to make the whole thing a lot easier. If you're interested, I'd recommend checking out the documentation. I used React's legacy version for this, but there's also the modern version to use as well.

The conclusion?

React is a very interactive JS library for UI development which uses JSX syntax to do what I'd probably call witchcraft. We break our UI up into components, which can be functional or class components and have various differences based on which one you use. Both component types can use props, only class components use state. Props are read-only and passed into our component, whereas state is writeable and typically passed down into other components, like a waterfall! There was a lot we didn't cover in this blog, like actually rendering to a website or some of the more complex things you can do, so I'd definitely recommend checking out the documentation if you wanna try this out yourself. Have fun!