useParams is a React Router Hook that allows you to access dynamic parameters in the URL.
useParams returns an object of key:value pairs of URL parameters. The
key is the name you've assigned in the URL; the
value is what is being passed in.
How do we use
paththat you would like to access as a parameter with a colon and an identifier of your choice. …
What is an effect/a side effect?
The terms side effect and effect are used interchangeably and mean the same thing in React: they refer to operations that don’t affect the UI or output value. If the operation you are performing is managing any state change other than the final return value, then it’s a side effect!
The function of a React component is to handle render and manipulate the UI. Because side effects don’t impact the render phase, they don’t belong in the main body of a component.
useEffect is a React Hook that allows you to…
What is state?
State stores the current status of components and allows us to track changes. State is created and updated in React by the
useState function, and is fully controlled by the component.
useState is a React Hook, which is another way of saying that it's a React function that allows us to hook into React features and easily manipulate a functional component.
useState receives an initial state as an argument, and returns an array of 2 items:
spreadoperator to merge and
indexOf()to remove duplicates;
Two array methods that can be easily mixed up are
forEach(). Keeping track of the differences between the two can be a little murky — but each has distinct advantages that can make them ideal for certain situations!
When you’re choosing an array method, the first thing to think about is what you need to get back after it executes. Do you need a new array? Do you just want single items? What will allow you to do the next things that you need to do?
forEach() both iterate over an existing array, and they both…
true, bring an umbrella. Are you tired? If
true, go to bed. If
false, go ahead and start the next episode of Bridgerton.
Conditional statements are one of…
The literal looks like this:
const myAmazingArray = ;
and can be defined with or without any array elements. The one above doesn’t have any elements yet.
The constructor looks like this:
const myAmazingArray =…
I’ve recently heard a few people saying that it’s bad form to comment your code — that it makes your code dirty and cluttered, and that it encourages poor coding syntax.
Everyone has their own coding preferences (tabs! Camel case!), so in light of people speaking up about commented code, I felt this would be a good time to talk about one of mine. Here’s why I always comment my code:
I’ve recently rediscovered Adobe Creative Cloud (and by ‘rediscovered’, I mean that I’ve got a licence through my work that brings me no end of joy), so I’ve been re-learning some of the Creative Suite programs. The last time I was intimately familiar with Illustrator was in CS…3 maybe? I assumed that Adobe had since made CSI-like effects possible with the tap of a single button, so I was eager to take this baby from zero to a whole bunch of icons in 60 seconds.
Part of my job involves making icons, and there’s never just one colour of an…
From the moment I first had to pull a CSS class name out of thin air, I wanted to know if there was a standard naming convention that could make my style sheets feel a bit less haphazard. Assigning classes felt messy because it was so arbitrary, so I was thrilled to learn that about several different methodologies for streamlining, slimming, and organizing CSS, each based on its own type of logic.
In my earliest web design projects, the CSS class names under the hood weren’t pretty. I knew that naming was really important, but I struggled to find names…
Web Developer, @junocollege alum (cohort 13).