While learning React, I used arrow functions quite a bit, but I never deeply understood how they work or when to use them. It’s time to dive deeper.

Differences between an arrow function expression and a traditional function expression:

• Can’t use this or super, and should not be used as methods
• Doesn’t have arguments
• Not ideal for methods that require scope, such as call, apply, and bind
• Can’t be used as a constructor
• Can’t use yield

Comparing the same function written traditionally and then as an arrow function:

Single Argument:

• Traditional:

function (sum) {
    return sum + 666
}

• Arrow:

…

Three.js is a Javascript framework for displaying 3D content on the web. You can create some really cool 3D projects and animations simply using Javascript. No high-end PC and software required! I discovered this library and have been playing around with it quite a bit, in addition to drei and react-three-fiber. Having an extensive 3D and motion graphics background, I was naturally very interested in learning how I could incorporate this into my software engineering projects and skillset.

In this post, we’ll walk through installing, importing, and setting up a simple scene using Three.js. I’ll be pulling heavily (and linking…

Let’s explore a basic counter app. We’ll have a button to increment a counter, a button to decrement it, a form input to enter any integer, and a button to add that value to the counter. We’ll focus and highlight the structure of the app as we work through this project, to get a handle on an efficient way to connect all of the pieces.

Let’s start by using create-react-app and we will use the Redux template, which will set up our simple counter project for us.

npx create-react-app learning-react-the-basics --template redux

Take some time to look through the folder…

Welcome to my first in a series of posts I’ll be making on learning Redux.

To start, what is Redux?

Redux is a state management tool that allows us to access and modify state across our app without having to pass it along to components as props. As our apps grow, our component trees can become very deep, and passing a piece of state down as props through several components can become very hard to maintain and debug. Redux creates a global state (called the ‘store’) that can easily be accessed throughout the project. This grants us the ability to…

React’s useEffect hook will perform an action on every render or re-render. This is great for changing elements on the DOM or fetching data from an API. For this walkthrough, we’ll use useEffect to simply change our document.title

Let’s build an app to track the submissions we got tonight in class! We’ll use useState to track the number of each submission we got, and we’ll use useEffect to update both the total number of submissions and the document title each time we increment a submission, which triggers a re-render and thus our useEffect.

First, we’ll set up the project:

#=>…

Higher-Order Components are a technique used in React that allows us to reuse component logic. An example of this would be a component that renders conditionally based on whether the user is logged in.

More specifically, a Higher-Order Component is a function that takes a component as an argument and returns a component.

For this walkthrough, let’s build a simple React app that will use a Higher-Order Component to protect a page, requiring someone to be logged in to view it. We will control the logged in/out status with a button, so we can focus on the HOC. Then, we’ll…

Are you tired of having to use class components and pass props along for all your state management in React? Looking to optimize your workflows by using more functional components and less class components? Hooks are a tool that could be very helpful for you!

In the past, we relied on class components to do things like manage state and use lifecycle methods. Now, using hooks, we can do this from inside of functional components, simplifying and speeding up our apps. The two major applications of hooks come through useState and useEffect.

Let’s walk through setting up a simple application…

This past week, I learned how to use fetch to manipulate the DOM with JavaScript. As I progressed, I got really stuck trying to post new data or update existing data both on the page and in the database, without requiring a page refresh.

Before I talk through my solution, I’d like to touch on the basics of using fetch, as I experienced through learning.

The first step was to learn a simple GET request to receive information from a database or endpoint in JSON format. I used the fetch comment, and the desired endpoint URL as an argument. This…