But learning React can feel overwhelming. With so many new terms, patterns, and frameworks like Next.js in the mix, it’s easy to feel lost.

That’s why this handbook focuses on React itself without unnecessary distractions. Once you’ve mastered React at its core, you’ll have the confidence to use it with or without frameworks to build anything you can imagine.

Table of Contents

1. What You Should Already Know

2. What Exactly Is React?

   • Why the “React” name?

   • Is React a framework?

   • Is React only for web development?

   • What’s the primary goal of React?

3. How to Add a React Component to a Website

   • Create a new project directory

   • Create a DOM container

   • Import React, Babel, and your component

   • Create your component

   • Configure a local server

4. What Is JSX?

   • Can React work without JSX?

   • Example 1: Create a React element with JSX

   • Example 2: Create a React element with regular JavaScript

5. What Is React.createElement()?

6. How to Use JSX

   • Use JSX like any JavaScript expression

   • Wrap multi-line JSX in parentheses

   • Wrap expressions in curly braces

   • Use camelCase to name attributes

   • Close empty JSX tags properly

   • A React component can return only a single element

7. Time to Practice with JSX 🤸‍♂️🏋️‍♀️🏊‍♀️

   • The solution

8. What Is a React Component?

   • Syntax of a React component

   • Example of a React component

   • React components best practices

9. How to Render Lists of Elements from an Array

   • Each React element in an array needs a unique key

   • How to add unique keys to each React element in an array

   • Essential things to know about assigning keys

10. How to Handle Events in React

    • Types of event handlers

    • Example: Inline event handler

    • Example: Referenced event handler

11. What Is React State?

    • Syntax of React state

    • Example of React state

    • React trigger vs render vs commit vs paint

    • What does it mean to trigger a render in React?

    • What does it mean to render React components?

    • What does it mean to commit a React UI to the browser’s DOM?

    • What does it mean to paint the DOM nodes on the screen?

12. What Is the React Ref Hook?

    • Syntax of the React ref Hook

    • Example of the React ref Hook

    • React ref Hook best practices

13. Variables vs Refs vs States in React

    • How do variables work in React?

    • How do refs work in React?

    • How do states work in React?

    • Tips on using variables, refs, and states in React

14. What Is the useEffect Hook?

    • Syntax of the useEffect Hook

    • Example of the useEffect Hook

    • useEffect Hook’s best practices

15. How to Style React Components

    • How to use CSS style sheets to style React elements

    • How to use the inline style attribute to style React elements

    • How to use CSS Modules to style React elements

    • How to use a CSS-in-JS library to style React elements

16. Overview

    • Dive deeper into React

What You Should Already Know

You will get the most value out of this handbook if you are familiar with:

• JavaScript fundamentals (variables, functions, arrays, objects)

• Basic CSS for styling

• HTML basics for structure

If you’ve ever written a small JavaScript file or built a simple “Hello World” website, you are all set!

Let’s get started with the basics.

What Exactly Is React?

React is a component-based JavaScript library for efficiently building user interfaces (UI).

No matter how massive or miniature your project may be, React is well-suited to help you develop any web application efficiently.

Developers primarily use React to build independent, reusable components that can be combined with other isolated user interfaces to create highly scalable applications. For instance, the image below illustrates the individual components of YouTube’s video player page.

In other words, React helps you build complex UIs from small, isolated components that can easily be reused in multiple applications. Each independent component tells React the exact element you want to display on screen.

The image above illustrates React as a highly adaptable library that uses JavaScript functions to build user interfaces for both mobile and web-based applications. Let’s discuss the points highlighted in the image.

Why the “React” name?

The name stems from the idea that React renders your UI and reacts to events in the user interface it has rendered on screen.

Is React a framework?

No, React is a library—not a framework. React serves only as an add-on feature to your application. It’s not designed to be used as an app’s primary support system.

Is React only for web development?

No, you don’t just use React on the web. For instance, ReactDOM helps build web applications, and React Native helps build mobile applications.

Can React be used for full-stack applications?

Absolutely. React is super flexible. You can use it in simple HTML projects, integrate it into existing code, or build complex full-stack applications. Its adaptability makes it suitable for a wide variety of development scenarios.

What’s the primary goal of React?

React’s primary goal is for you to use JavaScript functions to return and manage the UI (HTML element) you want to render (display) on the screen. For instance, consider the following:

function DonationUserInterface() {
  return <button>☕ Buy me a coffee</button>;
}

The JavaScript function above is a React component that returns the UI (HTML button element) we want to display on screen and manage with React. In fact, let’s implement the DonationUserInterface component on a live website using only HTML and JavaScript – no frameworks.

How to Add a React Component to a Website

Follow the steps below to add a donation UI component to a live HTML website.

Create a new project directory

mkdir codesweetly-donation-ui-001

Note: You can use any name you prefer. In this guide, we’ll use codesweetly-donation-ui-001 for demonstration.

Afterward, navigate to your project directory using the command line.

cd path/to/codesweetly-donation-ui-001

Create a DOM container

To add a React component to a webpage, you first need to specify the section of the page where you want to insert the UI. So, create an HTML page:

touch index.html

Afterward, open the new file and add the following code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CodeSweetly Donation UI</title>
  </head>
  <body>
    <!-- A div container (the DOM node) created for React to manage -->
    <div id="donation-ui"></div>
  </body>
</html>

The snippet above created a DOM node (<div> element), inside which we want React to display and manage a donation user interface. In other words, the <div> represents the website’s section you want React to manage.

Some notes:

• The div’s id attribute is the reference we’ll later use in a JavaScript file to find the container and tell React to insert a donation UI.

• Although most developers use a <div> tag as the DOM container, you can use other HTML elements like the <main> tag.

• You can have multiple DOM containers anywhere inside the <body> element.

• A DOM container is usually left empty, as React will overwrite its content.

Import React, Babel, and your component

Use script tags to load React, Babel, and your component into your project’s HTML page.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CodeSweetly Donation UI</title>
    <!-- Load the React Library -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- Load the ReactDOM API -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Load the Babel Compiler -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="donation-ui"></div>
    <!-- Load your React component -->
    <script type="text/babel" src="DonationUserInterface.js"></script>
  </body>
</html>

The snippet above uses the first three script tags to load React, ReactDOM, and Babel from unpkg.com.

At the same time, we use the fourth script tag to import our donation component (which we will create in the following section).

Some notes:

• The react package is a library containing React’s core functionality for creating React components.

• The ReactDOM API provides the required methods to use React with the DOM.

• Babel is a compiler that transforms React code into plain JavaScript, as browsers don’t understand React syntax by default.

• The type="text/babel" attribute tells Babel to automatically execute and convert the DonationUserInterface.js script from React code into plain JavaScript.

• The setup above is recommended for learning React only. Don’t use it for public projects (production environment). You can learn how to set up React for production in my Code React Sweetly book.

• The scripts will not work if your internet or unpkg.com’s server is down. So, if nothing renders on-screen, enter each script’s src URL in your browser to confirm if the server responds successfully.

Create your component

Create a DonationUserInterface.js JavaScript file inside the same folder in which your HTML file is located.

touch DonationUserInterface.js

Then, paste the following code inside the JavaScript file you’ve just created:

function DonationUserInterface() {
  const [donate, setDonate] = React.useState(false);

  function createUserInterface() {
    if (donate) {
      return (
        <p>
          <a href="https://www.buymeacoffee.com/codesweetly">Support page</a>.
          Thank you so much! 🎉
        </p>
      );
    }
    return <button onClick={() => setDonate(true)}>☕ Buy me a coffee</button>;
  }
  return createUserInterface();
}

const root = ReactDOM.createRoot(document.getElementById("donation-ui"));
root.render(<DonationUserInterface />);

The snippet above does the following:

1. Defines a component named DonationUserInterface.

2. Initializes the component’s state (built-in object) with the Boolean value false.

3. Programs the component to return a paragraph element if the state’s donate variable is true. Otherwise, it should return a button element.

4. Creates a ReactDOMRoot object instance for the donation-ui HTML element you want React to manage. Afterwards, it assigns the newly created instance to the root variable.

5. Uses the object instance’s render() method to display the DonationUserInterface component inside the root donation-ui.

Configure a local server

HTML files containing ES modules work only through http:// and https:// URLs, not locally via a file:// URL.

Since we previously used the type="text/babel" attribute to convert the DonationUserInterface.js JavaScript file to an ES module, we need a local server, like “Live Server” or “Servor,” to load the HTML document via an http:// scheme. Let’s install Servor so we can use it for this project.

Install the Servor local server

npm install servor@4.0.2 --save-dev

Run your app

After installing Servor, use it to start your app from your terminal:

npx servor --browse --reload

Some notes:

• Close the server using Ctrl + C on Windows or Cmd + C on Mac.

• --browse: Opens the browser once the server starts.

• --reload: Reloads the browser whenever you update the project’s files.

• You can also add the servor command to the "scripts" field of your project’s package.json file:

{
  "scripts": {
    "start": "servor --browse --reload"
  },
  "devDependencies": {
    "servor": "^4.0.2"
  }
}

By doing so, you can run your app from your terminal like this:

npm run start

And that’s it! You’ve successfully added a React component to a live website using a JavaScript function to render a donation UI on screen! 🎉

Are you asking why we’re writing HTML inside JavaScript? Well, that HTML-like code is called JSX. Let’s learn about it.

What Is JSX?

JSX is a JavaScript syntax extension that allows you to build React elements with HTML-like syntax directly inside your JavaScript code.

Tips:

• JSX is sometimes called JavaScript XML or JavaScript Syntax eXtension.

• While JSX looks a lot like HTML, it’s not HTML. Instead, it enables you to use HTML-like syntax along with all the strengths of JavaScript.

Can React work without JSX?

Yes. React can work independently of JSX. But JSX makes it easier to create user interfaces (UI).

In other words, whatever you can do with JSX, you can do the same with plain JavaScript. For instance, consider the two examples below. The first includes JSX syntax, while the second is regular JavaScript syntax.

Example 1: Create a React element with JSX

MyBio.js

function MyBio() {
  return <h1>My name is Oluwatobi.</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyBio />);

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MyBio App</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="MyBio.js"></script>
  </body>
</html>

In the React snippet above, <h1>My name is Oluwatobi.</h1> and <MyBio /> are JSX.

Tip: React supports the .jsx file extension for files with JSX code. So, if you prefer to differentiate your JSX files from JavaScript, you can rename MyBio.js to MyBio.jsx. Just note that choosing between using .js vs .jsx for files with JSX is entirely up to you. (Your JSX code is simply a syntactic sugar for the React.createElement() JavaScript call.)

Example 2: Create a React element with regular JavaScript

MyBio.js

function MyBio() {
  return React.createElement("h1", null, "My name is Oluwatobi.");
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(MyBio));

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MyBio App</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="MyBio.js"></script>
  </body>
</html>

Everything in the React snippet above is plain JavaScript code.

What Is React.createElement()?

React.createElement() is the JavaScript alternative to JSX. It is a method for creating React elements in regular JavaScript.

Browsers can’t read the JSX syntax. This is why we typically use tools like Babel, TypeScript, and Parcel to compile JSX to a React.createElement(component, props, ...children) JavaScript call.

For instance, <button className="support-btn">Buy me a coffee</button> will transform to React.createElement("button", { className: "support-btn" }, "Buy me a coffee ") at runtime.

Under the hood, the React.createElement() method creates a JavaScript object conventionally called “React element.”

Tip: A React element is a JavaScript object that defines the user interface (UI) you want to render on screen.

A simplified version of a React element looks like this:

const myBioReactElement = {
  type: "h1",
  props: {
    className: null,
    children: "My name is Oluwatobi.",
  },
};

React.createElement() is best for projects that want to avoid compiling tools like Babel. Whereas JSX is a syntactic sugar that makes React code easier to read. So, you are free to choose the syntax that works best for you (but most React projects use JSX for its simplicity).

How to Use JSX

The following tips will help you get up and running with JSX so you can use it in your React projects.

Use JSX like any JavaScript expression

You can use JSX like any other JavaScript expression because, at execution time, JSX transpiles into regular JavaScript.

In other words, you can store JSX expressions in variables, use them in if statements, or make them the return value of functions.

Example:

DisplayMyName.js

const firstName = false;
const myFirstName = <h1>My first name is Oluwatobi.</h1>;
const mylastName = <h1>My last name is Sofela.</h1>;
function DisplayMyName() {
  if (firstName) {
    return myFirstName;
  } else {
    return mylastName;
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<DisplayMyName />);

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DisplayMyName App</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="DisplayMyName.js"></script>
  </body>
</html>

The React snippet above stores JSX code in variables. We also made it the return value of a function’s if...else statement.

Wrap multi-line JSX in parentheses

Wrapping your JSX code in parentheses is best when it spans across multiple lines. Doing so will make your code readable and avoid the pitfalls of automatic semicolon insertion.

const myName = (
  <div>
    <h1>My name is Oluwatobi.</h1>
  </div>
);

The snippet above wraps the div in parentheses because it spans multiple lines.

Wrap expressions in curly braces

Suppose you wish to write JavaScript expressions in your JSX code. In that case, wrap the expression in curly braces like so:

ExpressionInJSX.js

function ExpressionInJSX() {
  return <h2>JSX makes it {10 * 3} times faster to build React UIs.</h2>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ExpressionInJSX />);

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ExpressionInJSX App</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="ExpressionInJSX.js"></script>
  </body>
</html>

Tips:

• React reads curly braces ({...}) in JSX code as a JavaScript expression.

• Using curly braces to embed a JavaScript expression works only if you use it in either of two ways:

  1. Directly between the opening and closing JSX tags:

      <openingTag>I have a {javaScriptExpression} content.</closingTag>
     

  2. As the value of a JSX element’s attribute:

      <openingTag attribute={javaScriptExpression}>I have a content</closingTag>
     

Use camelCase to name attributes

React uses camelCase for JSX attribute keys rather than the lowercase HTML attribute naming convention. This is because, under the hood, JSX compiles into plain JavaScript and, therefore, uses the JavaScript Web APIs.

In other words, instead of writing readonly, use readOnly. Likewise, instead of using maxlength, write maxLength. By doing so, React will gain access to JavaScript’s readOnly and maxLength Web APIs.

Example:

const myName = (
  <div>
    <h1 className="about-me">My name is Oluwatobi.</h1>
  </div>
);

Close empty JSX tags properly

React requires closing all JSX elements explicitly with />, including empty tags. For instance, you’ll need to write an HTML <img> element as <img />.

Example:

const emptyJSXElement = <input type="button" value="Click me" />;

A React component can return only a single element

Creating two or more JSX elements from a component requires wrapping them in a single parent element. Otherwise, React will throw an error. This is because React components return only a single element.

Example:

TwoInnerUIs.js

function TwoInnerUIs() {
  return (
    <div>
      <h1>My name is Oluwatobi.</h1>
      <button>Buy me a coffee</button>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TwoInnerUIs App</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="TwoInnerUIs.js"></script>
  </body>
</html>

In the expression above, the <div> is a parent element containing two (2) inner tags.

Tip: React allows using a fragment (empty tag) to group elements. Here’s an example:

function TwoInnerUIs() {
  return (
    <>
      <h1>My name is Oluwatobi.</h1>
      <button>Buy me a coffee</button>
    </>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TwoInnerUIs />);

Fragments are a great way to return multiple elements without creating unnecessary tags in the HTML DOM.

Time to Practice with JSX 🤸‍♂️🏋️‍♀️🏊‍♀️

Here is your moment to practice the JSX concepts you’ve learned.

In this exercise, you will convert the regular JavaScript code below to its JSX equivalent:

function SupportCodeSweetly() {
  return React.createElement(
    "div",
    { className: "support-ui" },
    React.createElement(
      "a",
      {
        id: "support-link",
        className: "support-link",
        target: "_blank",
        href: "https://www.buymeacoffee.com/codesweetly",
      },
      "Buy me a coffee"
    ),
    ". Thank you!"
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(SupportCodeSweetly));

Take a moment to try it yourself before looking at the solution below. Even if you have to try a couple times, go back and read the above tips, or google a few things, it’ll help you learn the concepts better.

Ok, now that you’ve tried…

The solution:

function SupportCodeSweetly() {
  return (
    <div className="support-ui">
      <a
        id="support-link"
        className="support-link"
        target="_blank"
        href="https://www.buymeacoffee.com/codesweetly"
      >
        Buy me a coffee
      </a>
      . Thank you!
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<SupportCodeSweetly />);

The SupportCodeSweetly component returns the UI we want to display on-screen and manage with React. But what exactly is a React component?

What Is a React Component?

A component in React is a class or function that accepts a single argument called props and returns an element (UI).

Syntax of a React component

The above image illustrates the constituent parts of a React component:

1. A JavaScript function with a Pascal case naming convention.

2. A props parameter, which is the only argument React components accept. (Tip: props is short for properties.)

3. The component’s body, where you place a sequence of statements like variables, hooks, and conditionals.

4. A return statement, which is used to output the user interface (UI) you want React to display on-screen. It can be any valid HTML element.

5. An invocator that executes the component to retrieve its user interface. The invocator can also pass arguments (props) to the component.

Example of a React component

function MyBio(props) {
  return <h1>My name is {props.firstName}.</h1>;
}

Try it on CodeSandbox

The code in the snippet above is a function component that accepts a single argument (props) and returns a React element.

React components best practices

When you’re working with components in React, there are a few best practices you should follow:

• Capitalize the first letter of your component’s name.

• Don’t use bracket notation expressions in React component tags.

• React components work best as pure functions.

• Create components at the top level of your file.

• Split long components into smaller chunks.

As it’s common practice to use components to render a list of elements, let’s now discuss how to implement this optimally.

How to Render Lists of Elements from an Array

Suppose you want to create a list of React elements from an array of data. You can use the JavaScript map() method.

Example:

import ReactDOM from "react-dom/client";

// Define the bestColors array:
const bestColors = ["Blue", "White", "Pink"];

// Use the bestColors array to create a list of React elements:
const bestColorsLiElements = bestColors.map((color) => <li>{color}</li>);

// Render the array of <li> elements to the root DOM:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ul>{bestColorsLiElements}</ul>);

Try it on CodeSandbox

The snippet above used map() to create a new list of React elements by converting each of bestColors items to <li> elements.

Notice that we rendered the list of elements directly in the root.render() method. Typically, you would use a component to do such rendering. So, let’s do some refactoring by moving the bestColorsLiElements variable and the <ul> element into a component:

import ReactDOM from "react-dom/client";

function BestColor() {
  // Define the bestColors array:
  const bestColors = ["Blue", "White", "Pink"];
  // Use the bestColors array to create a list of React elements:
  const bestColorsLiElements = bestColors.map((color) => <li>{color}</li>);
  return <ul>{bestColorsLiElements}</ul>;
}

// Render the array of <li> elements to the root DOM:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BestColor />);

Try it on CodeSandbox

Although the snippet above displays the right content on the screen, it’s not efficient. So, React throws a console error. Let’s discuss the issue.

Each React element in an array needs a unique key

If you check your console, you will see a warning message that says: Each child in a list should have a unique "key" prop.

The message means that whenever you create an array of elements, React needs you to specify a unique identity for each item in the list.

The unique identity keys help React identify changes to the array.

Let’s refactor the previous snippet so that each element in the bestColorsLiElements has a unique key prop.

How to add unique keys to each React element in an array

There are two common ways to assign unique keys to each element of an array. The first is the unrecommended way. While the second is the best technique, it is worth noting.

Not recommended way to assign keys to an array of React elements

One way to add unique keys is to use each item’s index as its key prop.

Tip: By default, if you don’t provide a key prop, React uses each element’s index position in the array to identify them (key=0, key=1, and so on).

Example:

import ReactDOM from "react-dom/client";

function BestColor() {
  const bestColors = ["Blue", "White", "Pink"];
  // Use each item's index as its key prop:
  const bestColorsLiElements = bestColors.map((color, index) => (
    <li key={index}>{color}</li>
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BestColor />);

Try it on CodeSandbox

The snippet above specifies a key prop on each <li> element. It then uses each item’s index as the prop’s value.

But note that it’s best to avoid using indexes as a React element’s key prop. You should use it only as a last resort when you don’t have stable IDs.

Whenever you use an index as the key prop, ensure the order of items in the array never changes. Otherwise, you may have severe issues with performance and component state.

Best way to assign keys to an array of React elements

The best way to add unique keys to each React element in an array is to use stable IDs from either of the following sources:

• Database: Use the database-generated IDs as the key props if your data comes from a database, as they are unique by default.

• crypto.randomUUID() incrementing counter: Use the randomUUID() method to generate Universally Unique Identifiers if you are creating and storing your data locally. (Note: This method is a web API. So, it’s available only in supporting browsers’ HTTPS contexts.)

• uuid: An NPM package for generating Universally Unique Identifiers if you are creating and persisting your data locally. This is a good alternative to the randomUUID() method for cross-platform compatibility.

Example:

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function BestColor() {
  // Use each item's id as its key prop:
  const bestColorsLiElements = bestColors.map((color) => (
    <li key={color.id}>{color.name}</li>
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

export const bestColors = [
  { id: crypto.randomUUID(), name: "Blue" },
  { id: crypto.randomUUID(), name: "White" },
  { id: crypto.randomUUID(), name: "Pink" },
];

Try it on CodeSandbox

The snippet above specifies a key prop on each <li> element. It then uses each item’s id as the prop’s value.

Note: Each key prop should be unique among its siblings – not globally. It’s okay to use the same key for an element in a different array.

Essential things to know about assigning keys

Here are essential facts to remember whenever you assign keys to an array of React elements.

1. Set each array element’s key while creating the array

The right place to specify each array element’s unique key is directly inside the map() method while creating the list of elements.

In other words, say you extract your template element into a separate component. Set the key prop on the component’s invocation tag—not on the extracted template element.

Example 1: Incorrect placement of the key prop

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function ColorListElement({ color }) {
  // WRONG: Don't place the key outside the map() method.
  return <li key={color.id}>{color.name}</li>;
}

function BestColor() {
  const bestColorsLiElements = bestColors.map((color) => (
    // The key attribute above should have been set here.
    <ColorListElement color={color} />
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

export const bestColors = [
  { id: crypto.randomUUID(), name: "Blue" },
  { id: crypto.randomUUID(), name: "White" },
  { id: crypto.randomUUID(), name: "Pink" },
];

Try it on CodeSandbox

The snippet above incorrectly sets each item’s key outside the map() method. You should avoid such a mistake!

Always set the key prop while creating the array of elements. So, the snippet above should have set the key on the component invocation tag – in the map() method.

Example 2: Correct placement of the key prop

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function ColorListElement({ color }) {
  return <li>{color.name}</li>;
}

function BestColor() {
  const bestColorsLiElements = bestColors.map((color) => (
    // CORRECT: Always define the key directly inside the map() method.
    <ColorListElement key={color.id} color={color} />
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

export const bestColors = [
  { id: crypto.randomUUID(), name: "Blue" },
  { id: crypto.randomUUID(), name: "White" },
  { id: crypto.randomUUID(), name: "Pink" },
];

Try it on CodeSandbox

The snippet above correctly sets each item’s key inside the map() method. This allows React to access the key value for each element in the array returned by the map() method.

Tip: React’s reconciliation (diffing) algorithm is programmed to access the key of each top-level item of the array. It never looks for the key in the child or descendant elements.

2. React does not pass keys to components

React neither transfers the key prop to components nor includes it as an attribute of a rendered element.

React uses keys solely to know the state of array items. They help React identify changes to the array.

So if you need to use a specific key’s value in your component or on your DOM element, you should explicitly pass it as the value of a different attribute.

Example:

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function ColorListElement(props) {
  return (
    <li>
      {props.color.name} (ID: {props.id})
    </li>
  );
}

function BestColor() {
  // Use `color.id` as the `key` and `id` props' value.
  const bestColorsLiElements = bestColors.map((color) => (
    <ColorListElement key={color.id} id={color.id} color={color} />
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

export const bestColors = [
  { id: crypto.randomUUID(), name: "Blue" },
  { id: crypto.randomUUID(), name: "White" },
  { id: crypto.randomUUID(), name: "Pink" },
];

Try it on CodeSandbox

The snippet above initializes each list item’s id attribute with the same value as the key prop. By so doing, the ColorListElement component can access props.id but not props.key.

3. Always generate the keys outside your components

Never generate keys on the fly (while rendering your components). Instead, create them in your data outside your components. Otherwise, React will recreate the elements on every rendering cycle because the key’s value will always be different.

Example 1: Incorrect place to generate the key prop

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function BestColor() {
  // WRONG: Never generate keys on the fly.
  const bestColorsLiElements = bestColors.map((color) => (
    <li key={crypto.randomUUID()}>{color}</li>
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

// The keys' values should have been set here (outside the component while creating your data).
export const bestColors = ["Blue", "White", "Pink"];

Try it on CodeSandbox

The snippet above incorrectly generated each element’s key while rendering the BestColor component. You should avoid such a mistake to prevent subtle bugs caused by recreating the elements on every render.

Always create each key’s value in your data outside the component.

Example 2: Correct place to generate the key prop

index.js

import { createRoot } from "react-dom/client";
import { bestColors } from "./bestColors.js";

function BestColor() {
  const bestColorsLiElements = bestColors.map((color) => (
    <li key={color.id}>{color.name}</li>
  ));
  return <ul>{bestColorsLiElements}</ul>;
}

const root = createRoot(document.getElementById("root"));
root.render(<BestColor />);

bestColors.js

// CORRECT: Always generate the key in your data outside the component.
export const bestColors = [
  { id: crypto.randomUUID(), name: "Blue" },
  { id: crypto.randomUUID(), name: "White" },
  { id: crypto.randomUUID(), name: "Pink" },
];

Try it on CodeSandbox

The snippet above correctly generated each element’s key in the array data outside the component.

How to Handle Events in React

Event handling in React involves configuring your JSX elements to respond to user interactions on them (such as mouse clicks, form submission, and element focus).

<jsxTag onEvent={handleEvent}>UI Content</jsxTag>

Here’s what’s going on:

• jsxTag: React elements like <div>, <button>, and <input>.

• onEvent: The event listener you want to add to the React element. Some examples are onClick, onBlur, and onHover.

• handleEvent: The event handler function you want to use to handle (respond to) the specified onEvent type.

Tip: Although you can name the event handler anything you prefer, the typical naming convention is to prefix the event’s name with “handle”. For instance, if the event’s name is focus, the handler’s name will be handleFocus.

Types of event handlers

There are two typical ways to define the event handler function in React:

• Inline event handler: A function defined directly on a JSX element’s opening tag as the value of the event listener prop (onEvent).

• Referenced event handler: A function defined as a separate (independent) logic and linked to an event listener attribute (onEvent) by name referencing.

Example: Inline event handler

export default function App() {
  return (
    <h1 onClick={() => alert("You clicked the heading!")}>
      Oluwatobi is my name.
    </h1>
  );
}

Try it on CodeSandbox

Example: Referenced event handler

export default function App() {
  return <h1 onClick={handleClick}>Oluwatobi is my name.</h1>;
}

const handleClick = () => alert("You clicked the heading!");

Try it on CodeSandbox

React components have a unique memory that allows them to remember things between renderings. This memory is called “state.”

What Is React State?

React state is a component’s memory for storing data that React should remember during a component’s re-rendering and whose update should trigger a new render.

Syntax of React state:

import { useState } from "react";

function App() {
  const [state, setState] = useState(initialState);

  // ...
}

• state: The variable containing the component’s state value.

• setState: A function for updating the state value.

• useState: The state Hook for initializing and retrieving the component’s state.

Example of React state:

import { useState } from "react";

function AboutCompany() {
  const [age, setAge] = useState(5);

  function updateAge() {
    setAge(age + 1);
  }

  return (
    <div>
      <h3>CodeSweetly is {age} years old!</h3>
      <button type="button" onClick={updateAge}>
        Click to update age
      </button>
    </div>
  );
}

export default AboutCompany;

Try it on CodeSandbox

When a user clicks the button UI, the onClick event triggers the updateAge event handler, which uses the setAge setter function to update the component’s age state.

Tip: React will trigger a re-render of your component every time you use useState’s setter function to update your state. But what exactly do the terms “trigger” and “render” mean?

React Trigger vs Render vs Commit vs Paint

Triggering, rendering, committing, and painting are the steps involved in displaying React UIs on screen. Here are the differences between the four steps:

The above slide illustrates the four phases in the lifecycle of a component’s UI:

• Trigger: Specifies the component whose UI you want to display on the screen.

• Render: Calls the component you’ve triggered.

• Commit: Updates the DOM with the UI of the rendered component.

• Paint: Converts the DOM code you’ve committed into user-friendly elements that users can interact with in their browsers.

Let’s discuss these differences in detail.

What does it mean to trigger a render in React?

The trigger event is the first step in displaying a React user interface (UI) on screen. It specifies the component whose UI you want to display on the screen. This event happens on two occasions:

1. When the app starts running. The React application uses the createRoot method to specify the component whose UI you want to render to a DOM node.

import ReactDOM from "react-dom/client";
import DonationUI from "./components/DonationUI.js";

// When the app starts running, you need to use createRoot and its render method to trigger an initial rendering of the app's root component.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<DonationUI />);

The snippet above does the following:

• Uses the ReactDOM.createRoot() method to create a ReactDOMRoot object instance for the root element argument.

• Use the object instance’s render() method to trigger an initial rendering of the DonationUI component.

In other words, the createRoot().render() method specifies DonationUI as the component whose UI React should display in the root HTML element.

2. The second reason a trigger event can happen is when a component’s (or its ancestors’) state gets updated with a set function.

DonationUI.js

import React from "react";

function DonationUI() {
  const [donate, setDonate] = React.useState(false);
  function createUserInterface() {
    if (donate) {
      return (
        <p>
          <a href="https://www.buymeacoffee.com/codesweetly">Support page</a>.
          Thank you so much!
        </p>
      );
    }
    // The setDonate function will trigger a re-rendering of the DonationUI component.
    return <button onClick={() => setDonate(true)}>Buy me a coffee</button>;
  }
  return createUserInterface();
}

export default DonationUI;

The snippet above does the following:

1. Defines a component named DonationUI.

2. Initializes the component’s state with the Boolean value false.

3. Programs the component to return a paragraph element if the state’s donate variable is true. Otherwise, it should return a button element.

When users click the button element, the setDonate setter function will trigger a re-rendering of the DonationUI component. Below are the entry script and the HTML code so you can try it yourself locally.

index.js

import ReactDOM from "react-dom/client";
import DonationUI from "./components/DonationUI";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<DonationUI />);

index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CodeSweetly DonationUI</title>
  </head>
  <body>
    <main id="root"></main>
    <script type="module" src="index.js"></script>
  </body>
</html>

Try it on CodeSandbox

What does it mean to render React components?

The rendering step is when React invokes (calls) the component you’ve triggered with either the createRoot method or a set function. Rendering causes React to invoke a component to produce the UI you want to display on the screen. The component React will render depends on the moment the trigger event occurred:

• For an initial trigger (at the start of the app), React will invoke the app’s root component.

• For update triggers (whenever a component’s state gets updated), React will call the function component whose state update initiated the trigger event.

Tip: Rendering a component means “calling a component” to retrieve its user interface (UI).

What does it mean to commit a React UI to the browser’s DOM?

The committing stage is when React updates the DOM with the UI of the rendered component.

There are some important things to note about this process:

• For an initial render (at the start of the app), React will initialize the root DOM with the root component’s UI. It will use the appendChild() JavaScript API to append the DOM nodes (UI) retrieved from the component into the app’s root HTML element.

• For subsequent re-rendering (after the initial commit), React will only update the DOM nodes if there’s a difference between the previous rendering output and the latest one. No changes will occur if the component’s latest output is the same as the previously committed one.

What does it mean to paint the DOM nodes on the screen?

The painting (browser rendering) stage is when the browser repaints the screen to convert the DOM code to user-friendly elements. This is a browser-level process that begins once React has finished updating (committing) the DOM nodes.

Sometimes, components need to store information that shouldn’t trigger a render when updated. In these situations, you can use a ref.

What Is the React Ref Hook?

The React Ref Hook lets you store values that don’t trigger re-renders when changed.

Syntax of the React ref Hook

The useRef Hook accepts only one optional argument. Here is the syntax:

useRef(initialValue);

• initialValue: The value to store in the component’s ref memory. Any JavaScript data type is allowed.

• useRef(): Returns an object ({ current: initialValue }).

Example of the React ref Hook:

import { useRef } from "react";

function App() {
  const myNameRef = useRef("Oluwatobi");

  function handleClick() {
    console.log(myNameRef.current); // Outputs: "Oluwatobi"
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Try it on CodeSandbox

The snippet above used the useRef Hook to store a value ("Oluwatobi") whose update shouldn’t trigger re-renders.

React ref Hook best practices

When you’re working with React’s ref hook, there are some best practices you should follow:

• Use dot syntax to access and update a ref object’s value instead of square bracket notation.

• Avoid accessing or updating the current property during rendering to maintain the purity of your components.

• Don’t use a function instance as your initialValue. Pass the function itself, not its output.

• You can use the React ref Hook to manage your HTML DOM nodes.

But what’s the difference between refs, states, and variables, I hear you ask? Let’s find out below.

Variables vs Refs vs States in React

In React, variables, refs, and states allow you to store and mutate data. But they work in different ways. Here are the main distinctions between them:

1. Does its value persist during re-rendering?

   • React Ref: Yes

   • React State: Yes

   • JavaScript Variable: No

2. Would updating its value trigger a re-rendering of the component?

   • React Ref: No

   • React State: Yes

   • JavaScript Variable: No

3. Is it plain JavaScript?

   • React Ref: Yes

   • React State: No

   • JavaScript Variable: Yes

4. Can you declare it outside a component?

   • React Ref: No

   • React State: No

   • JavaScript Variable: Yes

5. Is it usable in conditional statements, loops, or nested functions?

   • React Ref: No

   • React State: No

   • JavaScript Variable: Yes

How do variables work in React?

A variable’s value does not persist during re-rendering. Its value resets at the beginning of a new rendering.

Example:

import { useState } from "react";

function App() {
  let myVar = 0;
  const [myState, setMyState] = useState(0);

  function updateVar() {
    myVar = myVar + 1;
    console.log("myVar =", myVar);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Variable: {myVar}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateVar}>Update Variable</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the variable’s value when you click the “Update Variable” button. This modification doesn’t trigger a re-rendering of the component because React doesn’t track a variable’s changes.

• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.

• Reset the variable’s value to zero (0) during each re-rendering of the App component. Therefore, the rendered variable’s value will always be zero (0).

How do refs work in React?

A ref’s value persists during re-rendering, but modifying it doesn’t cause React to re-render the component. In other words, a ref is a plain JavaScript object whose value React remembers while re-rendering your component. But React doesn’t track changes to the ref’s value. So, its modifications don’t trigger a new rendering.

Example:

import { useState, useRef } from "react";

function App() {
  const myRef = useRef(0);
  const [myState, setMyState] = useState(0);

  function updateRef() {
    myRef.current = myRef.current + 1;
    console.log("myRef =", myRef);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Ref: {myRef.current}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateRef}>Update Ref</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the ref’s value when you click the “Update Ref” button. This modification doesn’t trigger a re-rendering of the component because React doesn’t monitor the ref’s changes.

• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.

• Retains the ref and state’s value during each re-rendering of the App component.

How do states work in React?

A state’s value persists during re-rendering. Modifying it also causes React to re-render the component.

Example:

import { useState, useRef } from "react";

function App() {
  let myVar = 0;
  const myRef = useRef(0);
  const [myState, setMyState] = useState(0);

  function updateVarAndRef() {
    myVar = myVar + 1;
    myRef.current = myRef.current + 1;
    console.log("myVar =", myVar);
    console.log("myRef =", myRef);
  }

  function updateState() {
    setMyState(myState + 1);
  }

  return (
    <div>
      <h2>Variable: {myVar}</h2>
      <h2>Ref: {myRef.current}</h2>
      <h2>State: {myState}</h2>
      <button onClick={updateVarAndRef}>Update Variable and Ref</button>
      <button onClick={updateState}>Update State</button>
    </div>
  );
}

export default App;

Try Editing It

The snippet above will:

• Increment the variable and ref’s value when you click the “Update Variable and Ref” button. This modification doesn’t trigger a re-rendering of the component because React doesn’t monitor changes to the variable or ref.

• Increment the state’s value when you click the “Update State” button. This modification triggers a re-rendering of the component because React requests a re-render whenever you modify the state.

• Resets the variable’s value during each re-rendering of the App component, while retaining the ref and state’s data.

Tips on using variables, refs, and states in React

• Use variables for values that should reset on every rendering of the component.

• Use the Ref Hook to store values that users do not need to see on screen, as changes to the ref will not trigger a re-rendering of the component.

• React state is ideal for storing values that you want to display on the screen, as state changes trigger a re-rendering of the component.

React components sometimes need to fetch data or change the DOM during different lifecycle phases: trigger, render, commit, and paint. The Effect Hook can help with these tasks.

What Is the useEffect Hook?

The useEffect hook lets function components perform side effects outside React.

Syntax of the useEffect Hook

The useEffect hook accepts two arguments. Here’s the syntax:

useEffect(callback, array);

• callback: The required setup function for the useEffect hook.

• array: (Optional) The reactive dependencies list that indicates when React runs the callback.

Tip: React runs the setup function after the component mounts or when dependencies change.

Example of the useEffect Hook:

import { useState, useEffect } from "react";

function AboutCompany() {
  const [age, setAge] = useState(5);

  useEffect(() => {
    document.title = `🥳🎁🎉 It's CodeSweetly's birthday! 🎉🎁🥳`;
  });

  return (
    <div>
      <h3>CodeSweetly is {age} years old!</h3>
      <button type="button" onClick={() => setAge(age + 1)}>
        Click to update age
      </button>
    </div>
  );
}

export default AboutCompany;

The useEffect code updates the browser’s title after the UI finishes rendering.

useEffect Hook’s best practices

As always, there are some best practices to use this hook most effectively:

• Use useEffect to connect with things outside your React app, such as APIs or timers. If your code has no side effects, you likely don’t need it.

• Avoid adding values to the dependency array unless your effect uses them. Include only the state and props needed to prevent unnecessary re-runs.

• Declare static objects and functions outside components. Place dynamic ones inside your Effect Hook.

• When depending on object props, list each primitive value used in your effect instead of the entire object.

• Use StrictMode to help catch common useEffect hook issues during development.

With the basics of React covered, let’s discuss styling.

How to Style React Components

The four primary ways to style React elements are:

• CSS style sheets

• Inline style attributes

• CSS Modules

• CSS-in-JS Libraries

Let’s discuss the four styling techniques.

How to use CSS style sheets to style React elements

Below are the steps to style JSX elements with regular CSS style sheets.

1. Create a CSS stylesheet

First, create a CSS stylesheet in your React projects.

touch styles.css

Tip: You can create the stylesheet anywhere in your project directory.

2. Define your ruleset

Open the newly created CSS file and declare your styles.

Example:

styles.css

.text {
  color: seagreen;
  font-weight: bold;
}

The CSS snippet above instructs browsers to apply a seagreen color and bold font weight on elements with a text class name.

3. Apply the stylesheet’s ruleset to your element

Import your stylesheet into the component file containing the element you wish to style. Then, apply the stylesheet’s ruleset to it.

Example:

App.js

// Import your stylesheet (the path to your stylesheet may be different).
import "../styles.css";

function App() {
  return <div className="text">Oluwatobi is my name.</div>;
}

export default App;

Try it on CodeSandbox

The snippet above instructs React to apply the "text" ruleset on the element with a className="text" attribute.

How to use the inline style attribute to style React elements

React allows you to apply inline styles to JSX elements in the same way as inline CSS works in HTML. But there are some differences to keep in mind.

First, HTML applies inline styles as a string value:

<div style="color:seagreen; font-weight:bold;">Oluwatobi is my name.</div>

But in React, you must define inline styles as objects, not strings:

<div style={{ color: "seagreen", fontWeight: "bold" }}>
  Oluwatobi is my name.
</div>

The snippet above uses two sets of curly braces because in JSX (as I mentioned above), you wrap JavaScript expressions inside curly braces: for instance, <div>{myNameVariable}</div>.

So, suppose the expression is a JavaScript object literal. In that case, you will need two sets of curly braces: for instance, <div>{{ name: "Oluwatobi" }}</div>.

Therefore, in style={{ color: seagreen, fontWeight: bold }}, the first set of curly braces ({...}) tells React that you want to write a JavaScript expression. The second set of curly braces ({ color: seagreen, fontWeight: bold }) is the JavaScript expression (an object) you are assigning as the style attribute’s value.

Example:

App.js

function App() {
  return (
    <div style={{ color: "seagreen", fontWeight: "bold" }}>
      Oluwatobi is my name.
    </div>
  );
}

export default App;

Try it on CodeSandbox

The React snippet above instructs the computer to apply an inline style to the div element.

You can see that we wrote fontWeight in camelCase. This is because, under the hood, JSX compiles into plain JavaScript. So it uses the JavaScript Web APIs attribute naming convention.

To make your code easier to read, consider storing your inline style object in a separate variable like so:

App.js

function App() {
  // Store your inline style object in a variable:
  const textStyles = { color: "seagreen", fontWeight: "bold" };
  return <div style={textStyles}>Oluwatobi is my name.</div>;
}

export default App;

Try it on CodeSandbox

Tip: The Tailwind CSS framework is an inline styling tool that provides utility classes you can apply directly to an element. It offers additional features that are often lacking in regular inline styling. For example, Tailwind allows you to configure media queries and event states (such as hover, focus, and active) in inline styles.

How to use CSS modules to style React elements

As defined on the official documentation, a CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules share many similarities with a regular CSS style sheet. But there are some essential differences.

1. Filename convention

The syntax for naming a regular CSS stylesheet is [name].css: for instance, codesweetly-styles.css.

But a CSS module’s file naming convention is [name].module.css: for instance, codesweetly-styles.module.css.

2. Styles scope

Importing a CSS style sheet into your script file makes its rulesets available globally to all components (and child components) of that script.

But importing a CSS module into your script file only makes its rulesets available locally to the component that invokes the module’s rule. Also, that component must be in the script that imports the CSS module.

Example:

Create a regular CSS stylesheet in your React project and add some rules to it:

styles.css

.imageInfo {
  text-align: center;
  color: #442109;
}

Also, create a CSS module in the same project and add some rules to it:

styles.module.css

.imageInfo {
  border: 8px ridge #71380f;
  background-color: #ffe5b4;
  padding: 20px 0 7px;
}

Import both the CSS stylesheet and CSS module you’ve just created into your script file:

App.js

import "../styles.css";
import codesweetlyStyles from "../styles.module.css";

function App() {
  return (
    <div className="imageInfo">
      <h1>Random Image</h1>
      <img src="https://picsum.photos/400/400" alt="Random Image" />
      <p>Get a new image each time you refresh your browser.</p>
    </div>
  );
}

export default App;

Try it on CodeSandbox

Go ahead and run your app and check its output in your browser.

After running your app, you will notice that React only applied the CSS stylesheet’s ruleset, not the CSS module’s own.

React did so because the stylesheet’s ruleset is globally available to all elements (and child components) of the page where you imported the sheet.

But the ruleset in the module is locally available only to the component that explicitly invokes the rule.

So, to use your CSS module’s style in your component, you must explicitly execute it like so:

App.js

import "../styles.css";
import codesweetlyStyles from "../styles.module.css";

function App() {
  return (
    <div className={`imageInfo ${codesweetlyStyles.imageInfo}`}>
      <h1>Random Image</h1>
      <img src="https://picsum.photos/400/400" alt="Random Image" />
      <p>Get a new image each time you refresh your browser.</p>
    </div>
  );
}

export default App;

Try it on CodeSandbox

The snippet above uses the codesweetlyStyles.imageInfo code to instruct React to apply the CSS module’s imageInfo ruleset to the div element.

3. Composition

To compose styles together while using a regular CSS style sheet, you must apply multiple classes to your element.

Example: Compose rulesets with regular CSS style sheets

styles.css

.container {
  border: 4px solid blueviolet;
  padding: 30px 15px;
}

.text {
  color: seagreen;
  font-weight: bold;
}

App.js

import "../styles.css";

function App() {
  return <div className="container text">Oluwatobi is my name.</div>;
}

export default App;

Try it on CodeSandbox

Using multiple classes on an element to implement style composition is not the best practice because CSS will use the order of style definitions in the stylesheet to determine the order of precedence based on the CSS cascading rules.

But CSS modules provide a composes declaration that offers greater flexibility in composing your styles to suit your project’s needs.

Example: Compose rulesets with CSS modules

styles.module.css

.container {
  border: 4px solid blueviolet;
  padding: 30px 15px;
}

.text {
  composes: container;
  color: seagreen;
  font-weight: bold;
}

App.js

import styles from "../styles.module.css";

function App() {
  return <div className={styles.text}>Oluwatobi is my name.</div>;
}

export default App;

Try it on CodeSandbox

Although you can define multiple composes declarations in a ruleset, they must precede other rules.

Example: All composes declarations must come before other rules

styles.module.css

.container {
  border: 4px solid blueviolet;
  padding: 30px 15px;
}

.curved {
  border-radius: 20px;
}

.text {
  composes: container;
  composes: curved;
  color: seagreen;
  font-weight: bold;
}

Try it on CodeSandbox

You can simplify the .text ruleset by using a single composes declaration for multiple classes.

Example: Compose classes with a single composes declaration

styles.module.css

.container {
  border: 4px solid blueviolet;
  padding: 30px 15px;
}

.curved {
  border-radius: 20px;
}

.text {
  composes: container curved;
  color: seagreen;
  font-weight: bold;
}

Try it on CodeSandbox

How to use a CSS-in-JS library to style React elements

A CSS-in-JS library allows you to use the complete features of CSS directly within your JavaScript file.

Some of the popular CSS-in-JS libraries are Linaria, Emotion, Pigment CSS, and Panda CSS.

Feel free to try any CSS-in-JS library you prefer. Here, we’ll use Emotion to illustrate how such a styling technique works in a React application.

So, go ahead and install the library into any of your React projects by running:

npm i @emotion/react@11.14.0

After you’ve installed Emotion, import it and use it in your component file like so:

App.js

// The comment below is essential. Emotion will not work without it.
/** @jsxImportSource @emotion/react */

// Define your styles using the JavaScript object syntax.
const codesweetlyStyles = {
  border: "8px ridge #71380f",
  backgroundColor: "#ffe5b4",
  padding: "20px 0 7px",
  textAlign: "center",
  color: "maroon",
  "@media(min-width: 768px)": {
    color: "darkslategray",
  },
};

// Apply the styles to your element.
function App() {
  return (
    <div css={codesweetlyStyles}>
      <h1>Random Image</h1>
      <img src="https://picsum.photos/400/400" alt="Random Image" />
      <p>Get a new image each time you refresh your browser.</p>
    </div>
  );
}

export default App;

Try it on CodeSandbox

The snippet above does the following:

1. Uses the /** @jsxImportSource @emotion/react */ comment (JSX Pragma) to tell the Babel JSX plugin to convert the script’s JSX calls to an Emotion function called jsx instead of React.createElement. Make sure you place the pragma directive above your import statements. Otherwise, the Emotion library will not work.

2. Defines styles in a JavaScript object.

3. Uses Emotion’s css prop feature to apply the styles to the JSX element.

Notice that the css prop is like the inline style attribute. The main difference is that the css props support more CSS features like nested selectors, auto vendor-prefixing, media queries, and event states (such as hover, focus, and active). So, using CSS-in-JS libraries like Emotion lets you write highly flexible and responsive styles directly in your JavaScript files.

Tip: The css prop works on any element that supports the className attribute.

Now, go ahead and run your app and check its output in your browser.

And that’s it! You now know how to use the CSS-in-JS library to style your React elements.

I used Emotion in this article because I like how clean its syntax looks. Feel free to test other CSS-in-JS libraries, such as Pigment CSS. You may find one that suits you better.

Overview

In this handbook, we discussed the core concepts you need to know to start building applications with React. We also used examples to practice creating and styling components.

Whether you’re considering a small personal project or a full-stack app for a larger user base, you now have the foundation to build these projects using React.

Thanks for reading!

Dive deeper into React

This handbook has given you a peek inside my Code React Sweetly book. Whether you’re just starting or want to sharpen your fundamentals, the book walks you through everything from essential concepts to deploying real apps using JavaScript and TypeScript. It is practical, beginner-friendly, and designed to help you code React sweetly!

This handbook aims to show you exactly how classes work in JavaScript. We will also discuss class fields and the super keyword.

Table of Contents

1. What is a JavaScript Class?
2. Why Classes in JavaScript?
3. Syntax of a JavaScript Class
   • What is a class Keyword?
   • What is a Class Name?
   • What is a Code Block?
   • What is a Class Body?
4. What is a JavaScript Class Field?
   • How to Create Class Fields in JavaScript
   • How to Create Class Fields with Computed Names
   • How to Create Regular Class Field Methods
   • How to Create Shorthand Class Field Methods
   • Regular vs. Shorthand Class Field Methods: What’s the Difference?
   • What is a User-defined Prototypal Method in JavaScript Classes?
   • What is a constructor Method in JavaScript Classes?
   • Types of Class Fields
   • What is a Public Class Field in JavaScript Classes?
   • What is a Private Class Field in JavaScript Classes?
   • What is a Static Class Field in JavaScript Classes?
5. Types of JavaScript Classes
   • What is a JavaScript Class Declaration?
   • What is a JavaScript Class Expression?
   • What is a Derived Class in JavaScript?
6. What is the super Keyword in JavaScript?
   • How to Use the super Keyword as a Function Caller
   • How to Use the super Keyword as a Property Accessor
   • super vs. this Keyword: What’s the Difference?
7. Components of a JavaScript Class
8. How Does a JavaScript Class Help with Encapsulation?
9. Important Things to Know about JavaScript Classes
   • 1. Declare Your Class Before You Access It
   • 2. Classes are Functions
   • 3. Classes are Strict
   • 4. Avoid the return Keyword in Your Class’s constructor Method
   • 5. A Class’s Evaluation starts from the extends clause to its values
10. Overview

So, let’s get started from the basics.

What is a JavaScript Class?

A JavaScript class is an object constructor that the new keyword uses to create a new object instance.

Here’s an example:

// Define a JavaScript class:
class Name {}

// Create an object instance from the Name class:
const yourName = new Name();

// Check yourName's content:
yourName;

// The invocation above will return an empty object:
{ }

Try Editing It

The snippet above used the new keyword to create a new object instance from the class constructor.

Note: Calling a JavaScript class requires the new keyword. Otherwise, browsers will throw a TypeError.

Why Classes in JavaScript?

Classes provide a way to create a template for creating objects that have access to private data through public methods.

In other words, classes help you encapsulate your data while providing users indirect access to an instance’s internal workings. This lets you provide users with a clean and friendly interface that is independent of an object’s internal implementations.

For instance, Date is a JavaScript class that allows you to access its date data through its public methods, such as getDate(), setDate(), and getFullYear().

Syntax of a JavaScript Class

class NameOfClass {
  // class's body
}

A class is composed of four components:

1. A class keyword
2. The name of the class
3. A code block ({...})
4. The body of the class

Let’s discuss each component.

What is a class Keyword?

We use the class keyword to declare to browsers that a specific piece of code is a JavaScript class—not a mathematical or other generic class.

What is a Class Name?

A class name allows you to create an identifier for your class, which you can use to reference it.

Note: Developers typically use uppercase to begin a class's name. This convention helps to differentiate a constructor from other functions.

What is a Code Block?

A block is a pair of braces ({...}) used to group multiple statements together.

Here’s an example:

{
  var bestColor = "White";
}

The block in the snippet above encased one JavaScript statement.

Here’s another example:

if (new Date().getHours() < 18) {
  const hourNow = new Date().getHours();
  const minutesNow = new Date().getMinutes();
  const secondsNow = new Date().getSeconds();
  console.log(`Check your plans now. The time is ${hourNow}:${minutesNow}:${secondsNow}.`);
}

The if condition’s code block grouped four JavaScript statements together.

Now, consider this snippet:

class Time {
  hourNow = new Date().getHours();
  minutesNow = new Date().getMinutes();
  secondsNow = new Date().getSeconds();
}

if (new Date().getHours() < 18) {
   const currentTime = new Time();
   console.log(`Check your plans now. The time is ${currentTime.hourNow}:${currentTime.minutesNow}:${currentTime.secondsNow}.`);
}

The Time class’s code block grouped three JavaScript statements, while the if condition’s code block grouped two.

Note the following:

• hourNow, minutesNow, and secondsNow are the class fields (properties).
• The snippet above used the new keyword to construct a new object from the Time class. Therefore, the currentTime object is an instance of the Time constructor class.

What is a Class Body?

A class body is where you place a sequence of statements.

Here’s the syntax:

class NameOfClass {
  // class' body
}

Note: A class’s body houses only class fields. But what exactly is a class field? Let’s find out.

What is a JavaScript Class Field?

A class field is a property defined directly in a class’s body—not inside any of the class’s methods.

How to Create Class Fields in JavaScript

You can create a class field by using an equal sign (=)—not a colon (:)—to assign a value to a property.

Here’s an example:

// Define a JavaScript class:
class Name {
  // Create two class fields:
  firstName = "Oluwatobi";
  lastName = "Sofela";
}

// Create a new object instance:
const fullName = new Name();

console.log(fullName.firstName + " " + fullName.lastName);

Try Editing It

The Name class in the snippet above has two class fields (firstName and lastName).

Note the following:

• JavaScript class fields default to undefined if you do not provide any value.
• Class fields are like the regular object properties whose names you can compute. Let’s discuss how.

How to Create Class Fields with Computed Names

You can compute (evaluate) a class field’s name by putting an expression in a square bracket like so:

// Initialize a num variable with a number:
let num = 0;

// Assign a string value to an enSuites variable:
const enSuites = "East";

// Define a Room class and compute each of its class fields' names:
class Room {
  [enSuites + ++num] = num;
  [enSuites + ++num] = num;
  [enSuites + ++num] = num;
}

// Create an ensuiteRooms object instance:
const ensuiteRooms = new Room();

// Check the ensuiteRooms's content:
console.log(ensuiteRooms);

// The invocation above will return:
{East1: 1, East2: 2, East3: 3}

Try Editing It

We used the [enSuites + ++num] syntax in the snippet above to compute the class fields’ names.

In other words, JavaScript evaluated the enSuites + ++num expression and used the result as each class field’s name.

Note: You can also define class fields as regular JavaScript methods. Let’s talk more about this now.

How to Create Regular Class Field Methods

You can create a regular class field method by using an equal sign (=) to assign a function to a property.

Here’s an example:

// Define a JavaScript class:
class Time {
  // Create two regular class field methods:
  hourNow = function() {
    return new Date().getHours();
  }
  minutesNow = function() {
    return new Date().getMinutes();
  }
}

// Create a new object instance:
const currentTime = new Time();

console.log(`The time is ${currentTime.hourNow()}:${currentTime.minutesNow()}.`);

Try Editing It

The hourNow and minutesNow methods in the snippet above are class field methods because they are properties containing regular JavaScript functions.

JavaScript allows you to use shorthand syntax to shorten your class’s methods. Let’s see how.

How to Create Shorthand Class Field Methods

The shorthand class field method is a concise way of defining JavaScript methods in the body of your classes.

Here’s an example:

// Define a JavaScript class:
class Time {
  // Create two shorthand class field methods: 
  hourNow() {
    return new Date().getHours();
  }
  minutesNow() {
    return new Date().getMinutes();
  }
}

// Create a new object instance:
const currentTime = new Time();

console.log(`The time is ${currentTime.hourNow()}:${currentTime.minutesNow()}.`);

Try Editing It

Although you can use the regular and shorthand methods interchangeably in your class’s body, you should know a significant difference between the two syntaxes. Let’s discuss it now.

Regular vs. Shorthand Class Field Methods: What’s the Difference?

The main difference between regular and shorthand class field methods is this:

• Regular methods are instance properties, while shorthand methods are prototypal properties.

In other words, JavaScript treats regular and shorthand methods differently as follows:

• Regular method: JavaScript adds the method to the object instance you construct with the new keyword. Therefore, regular methods are properties of the object instance.
• Shorthand method: JavaScript adds the method to the class’s prototype property. Therefore, shorthand methods are prototypal properties of an object instance.

Here’s an example:

// Define a JavaScript class:
class Time {
  // Create a regular method:
  hourNow = function() {
    return new Date().getHours();
  }
  // Create a shorthand method:
  minutesNow() {
    return new Date().getMinutes();
  }
}

// Create a new object instance:
const currentTime = new Time();

// Check currentTime's content:
console.log(currentTime);

// The invocation above will return:
{ hourNow: hourNow() }

Try Editing It

The currentTime object instance contains only the hourNow property because regular methods are instance properties the new keyword assigned to the object it constructs from its constructor class.

On the other hand, shorthand methods are prototypal methods that JavaScript adds to the prototype property of the class you’ve defined.

Therefore, you can access the minuteNow method through its class’s prototypal inheritance like so:

// Define a JavaScript class:
class Time {
  // Create a regular method:
  hourNow = function() {
    return new Date().getHours();
  }
  // Create a shorthand method:
  minutesNow() {
    return new Date().getMinutes();
  }
}

// Check Time's prototype content:
console.log(Time.prototype);

// The invocation above will return:
{...}:
  constructor: class Time {}
  minutesNow: function minutesNow()
  [[Prototype]]: Object {...}

Try Editing It

You can see that Time’s prototype property contains the minutesNow method, which all object instances will inherit automatically.

Here’s an example:

// Define a JavaScript class:
class Time {
  // Create a shorthand method:
  minutesNow() {
    return new Date().getMinutes();
  }
}

// Create an object instance from the Time class:
const currentTime = new Time();

// Check currentTime's content:
console.log(currentTime);

// The invocation above will return an empty object:
{ }

// Invoke currentTime's minutesNow method:
console.log(currentTime.minutesNow());

Try Editing It

The currentTime.minutesNow() code returned a valid value because currentTime inherited the minuteNow() method from its constructor’s prototype property.

Note: A JavaScript class has two types of prototypal methods:

• User-defined methods
• Constructor methods

Let’s discuss the two types now.

What is a User-defined Prototypal Method in JavaScript Classes?

A user-defined prototypal method is the shorthand method you create yourself in the body of your JavaScript class.

Here’s an example:

// Define a JavaScript class:
class Name {
  // Create a shorthand method:
  firstName(name) {
    return name;
  }
}

// Create an object instance from the Name class:
const myName = new Name().firstName("Oluwatobi");

// Log myName's content to the console:
console.log(myName);

// The invocation above will return:
"Oluwatobi"

Try Editing It

The firstName() method is a user-defined method because we created it ourselves in the body of the Name class.

What is a Constructor Method in JavaScript Classes?

A constructor() is the default prototypal method that comes built-in with every JavaScript class.

Creating a constructor method is optional. However, if you do not create one, JavaScript will automatically add an empty one.

The constructor method automatically receives the arguments you pass to the class. Therefore, it is the ideal place to define the class fields that depend on the class invocator’s arguments.

Here’s an example:

// Define a JavaScript class:
class Name {
  // Use the built-in constructor method:
  constructor(name) {
    this.name = name;
  }
}

// Create an object instance from the Name class:
const myName = new Name("Oluwatobi");

// Log myName's content to the console:
console.log(myName);

// The invocation above will return:
{ name: "Oluwatobi" }

Try Editing It

The Name class above has a constructor method with one instance property in its code block.

Tip: A constructor() method’s this keyword refers to the class’s object instance.

JavaScript executes the constructor method before any other user-defined methods. Therefore, it is the best place to define any code you want to run before other methods in the class’s body. For instance, consider the code below:

// Define a JavaScript class:
class CarColor {
  // Use the built-in constructor method:
  constructor(color) {
    this.carColor = `${color} car`;
  }
  // Create a shorthand method:
  revealColor() {
    console.log(`I have a ${this.carColor}`);
  }
}

// Create an object instance from the CarColor class:
const myCarColor = new CarColor("white");

// Invoke myCarColor's revealColor prototypal method:
myCarColor.revealColor();

// The invocation above will return:
"I have a white car"

Try Editing It

The snippet above automatically invoked the constructor method while creating myCarColor’s object instance.

Therefore, the computer processed the constructor’s statements before executing the myCarColor.revealColor() code.

Note the following:

• You can only use the JavaScript method shorthand technique to define a constructor. Otherwise, browsers will throw an Uncaught SyntaxError.
• A class can have only one constructor method. Otherwise, browsers will throw an Uncaught SyntaxError.

Now that we know how to create class fields, we can discuss the available types.

Types of Class Fields

The three types of class fields are:

• Public class fields
• Private class fields
• Static class fields

Let’s discuss each type.

What is a Public Class Field in JavaScript Classes?

A public class field is a property an object instance has access to.

Tip: Although you can define multiple public class fields with the same name, the last field will overwrite the previous ones.

Example: How to create public class fields

// Define a JavaScript class:
class Name {
  // Create two public class fields:
  myName = "Oluwatobi";
  updateMyName(name) {
    this.myName = name;
  }
}

// Create a new object instance:
const author = new Name();

// Check myName's current value:
author.myName;

// The invocation above will return:
"Oluwatobi"

// Use the author variable's property to modify myName's value:
author.myName = "Sofela";

// Check myName's current value:
author.myName;

// The invocation above will return:
"Sofela"

// Use the author variable's method to update myName's value:
author.updateMyName("CodeSweetly");

// Check myName's current value:
author.myName;

// The invocation above will return:
"CodeSweetly"

Try Editing It

The Name class in the snippet above contains public class fields because you can use the class’s object instances to access and modify the two properties.

Suppose you define multiple public class fields with the same name. In that case, the last property will overwrite the previous ones.

Example: The last public class field overwrites the previous ones with the same name

// Define a JavaScript class:
class Name {
  // Create three public class fields:
  myName = "Oluwatobi";
  myName = "Sofela";
  myName = "CodeSweetly";
}

// Create a new object instance:
const author = new Name();

// Check myName's current value:
author.myName;

// The invocation above will return:
"CodeSweetly"

Try Editing It

The snippet above returned "CodeSweetly" because the last myName public class field overwrites the previously declared ones.

What is a Private Class Field in JavaScript Classes?

A private class field is a property you can only access and modify within the class’s body.

You can prefix a class field with the hash (#) symbol to make it a private property.

Tip: Private class field names must be unique. You cannot redeclare a private field in the same class. Otherwise, the browser will throw an Uncaught SyntaxError.

Example: How to create private class fields

// Define a JavaScript class:
class Name {
  // Create a private class field:
  #myName = "Oluwatobi";
}

// Create a new object instance:
const author = new Name();

// Check myName's current value:
author.myName;

// The invocation above will return:
undefined

Try Editing It

The snippet above returned undefined because myName is a private class field that can only be read and modified from within the class’s body.

Therefore, you need to use an internal code to access myName.

Example: How to access private class fields

// Define a JavaScript class:
class Name {
  // Create a private class field:
  #myName = "Oluwatobi";

  // Create a public class field:
  fullName = `${this.#myName} Sofela`;

  // Create another public class field:
  showMyName() {
    return this.#myName;
  }
}

// Create a new object instance:
const author = new Name();

// Check fullName's current value:
author.fullName;

// The invocation above will return:
"Oluwatobi Sofela"

// Check myName's current value:
author.showMyName();

// The invocation above will return:
"Oluwatobi"

Try Editing It

Note:

• A constructor() method can only be public. Browsers will throw an Uncaught SyntaxError if you define it as a private class field.
• You cannot create private class fields later (outside the class’s body). For instance, writing author.#wifeName = "Sarah" will throw an Uncaught SyntaxError.
• Private class fields make data encapsulation possible in JavaScript classes.

What is a Static Class Field in JavaScript Classes?

A static class field is a property you can only access and modify directly from the class itself.

In other words, JavaScript interprets static fields as a class’s own properties—not instance or prototypal properties.

Therefore, a class’s instance or prototype object cannot access static class fields.

Tip:

• Although you can define multiple static class fields with the same name, the last field will overwrite the previous ones.
• JavaScript does not add static fields to the prototype property. They remain in the class’s body as its own properties. So, they are ideal for properties you wish to avoid replicating across the class’s instance objects.

We prefix a class field with the static keyword to make it a static property.

Example: How to create static class fields

// Define a JavaScript class:
class Name {
  // Create a static class field:
  static myName = "Oluwatobi";
}

// Create a new object instance:
const author = new Name();

// Check myName's current value:
author.myName;

// The invocation above will return:
undefined

Try Editing It

The snippet above returned undefined because myName is a static class field that can only be read and modified from the class itself, not through its instance.

In other words, you need to call myName on the class itself to read or modify it.

Example: How to access static class fields

// Define a JavaScript class:
class Name {
  // Create a static class field:
  static myName = "Oluwatobi";
}

// Check myName's current value:
Name.myName;

// The invocation above will return:
"Oluwatobi"

Try Editing It

Suppose you define multiple static class fields with the same name. In that case, the last property will overwrite the previous ones.

Example: The last static class field overwrites the previous ones with the same name

// Define a JavaScript class:
class Name {
  // Create static class fields:
  static myName = "Oluwatobi";
  static myName = "Sofela";
  static myName = "CodeSweetly";
}

// Check myName's current value:
Name.myName;

// The invocation above will return:
"CodeSweetly"

Try Editing It

The snippet above returned "CodeSweetly" because the last myName static class field overwrites the previously declared ones.

Now that we know the components of a JavaScript class, we can discuss its types.

Types of JavaScript Classes

The three types of JavaScript classes are:

• Class declaration
• Class expression
• Derived class

Let’s discuss each type.

What is a JavaScript Class Declaration?

A class declaration is a class created without assigning it to a variable.

We sometimes call class declaration a “class definition” or “class statement.”

Here’s an example:

class Numbers {}

The class above is a class declaration because we defined it without storing it in a variable.

What is a JavaScript Class Expression?

A class expression is a class you create and assign to a variable.

Here’s an example:

const myClassExpr = class Numbers {};

The class above is a named class expression that we assigned to the myClassExpr variable.

Note: You can only use a class expression’s name within the class’s body. In other words, JavaScript allows you to use myClassExpr and Numbers interchangeably within the class’s body. However, only myClassExpr is callable outside the class. Otherwise, browsers will throw a ReferenceError.

You can also write the snippet above as an anonymous class expression like so:

const myClassExpr = class {};

The class above is an anonymous function expression assigned to the myClassExpr variable.

Tip:

• An anonymous class is a class with no name.
• A named class is a class with a name.

Let’s now discuss derived classes.

What is a Derived Class in JavaScript?

A derived class is a class that extends the public and static features of an existing class.

In other words, a derived class is the child of a parent class.

Important: A derived class cannot access its parent class’s private features.

Syntax of a derived class

We use the extends keyword to create a derived class.

Tip: The extends keyword in JavaScript makes one class the child of another constructor. In other words, the extends keyword assigns a constructor (class or function) as a specified class’s dunder proto.

Here’s the syntax:

class DerivedClass extends BaseClass {
  // derived class's body
}

• A derived class is sometimes called a child class.
• A base class is sometimes called a parent class.
• You can extend any constructor (class or function) that meets the following criteria:
  • You can use the new keyword to create an object instance from it.
  • It has a prototype property.
  • Its prototype property’s value is an object or null.

Once you extend a child class to a parent class, the derived class will inherit all its base class’s public and static class fields.

Example: How to use a base class’s features in a derived class

// Create a new class:
class Name {
  // Create a public class field:
  myName = "Oluwatobi";
}

// Create a derived class:
class Bio extends Name { }

// Create a new object instance:
const myBio = new Bio();

// Check myBio's current value:
myBio;

// The invocation above will return:
{ myName: "Oluwatobi" }

Try Editing It

The Bio class inherited its parent’s property because we used the extends keyword to assign the Name class as the derived class’s dunder proto.

Note: A derived class’s class field will override its parent class’s property with the same name. For example, consider the following code:

// Create a new class:
class Name {
  myName = "Oluwatobi";
}

// Create a derived class:
class Bio extends Name {
  myName = "Sofela";
}

// Create a new object instance:
const myBio = new Bio();

// Check myBio's current value:
myBio;

// The invocation above will return:
{ myName: "Sofela" }

Try Editing It

JavaScript also allows you to use the super keyword to access a parent class’s static or prototypal class fields from derived classes. Let’s discuss more on this now.

What is the super Keyword in JavaScript?

The super keyword searches a parent class or object literal for a specified static or prototypal property.

For instance, consider the following snippet:

// Create a new class:
class Name {
  constructor() {
    console.log("Oluwatobi is my Name");
  }
}

// Create a child class:
class Bio extends Name {
  constructor() {
    // Use super to access the parent class's constructor:
    super();
  }
}

// Invoke the Bio constructor class:
new Bio();

// The invocation above will return:
"Oluwatobi is my Name."
{}

Try Editing It

The super() function call in the snippet above tells the computer to find a constructor in the parent class’s prototype chain.

You can use the super keyword as a “function caller” or “property accessor.” Let’s discuss how.

How to Use the super Keyword as a Function Caller

The super() function caller finds and invokes the parent class’s constructor() method.

In other words, super() allows you to access a parent class’s constructor from the constructor of a derived class.

Syntax of the super keyword as a function caller

super(argument1, …, argumentN);

Note: A super() function caller is valid only in a derived class’s constructor() method.

Example: How to use the super() function caller

// Create a new class:
class Name {
  constructor(name) {
    this.name = name;
  }
}

// Create a derived class:
class Bio extends Name {
  constructor(firstName) {
    // Use super to access the parent class's constructor:
    super(firstName);
  }
}

// Create a new object instance:
const myBio = new Bio("Oluwatobi");

// Check myBio's current value:
myBio;

// The invocation above will return:
{ name: "Oluwatobi" }

Try Editing It

The super() function call in the snippet above tells the computer to find and invoke the parent class’s constructor().

In other words, the super() function call searches for a constructor in Name’s prototype chain.

Note the following:

• Calling super() allows JavaScript to use the parent class’s constructor to initialize this. So, a super() function call is similar to writing this = new ParentClass().
• JavaScript requires you to call super() before using the keyword this. Otherwise, the browser will throw a ReferenceError. In other words, a derived class’s constructor cannot access an uninitialized keyword this.

Example: What happens if you access this before super in a derived class’s constructor?

// Create a new class:
class Name {
  constructor(name) {
    this.name = name;
  }
}

// Create a derived class:
class Bio extends Name {
  constructor(firstName) {
    this.lastName = "Sofela"; // Using the keyword this before super will cause the browser to throw a ReferenceError:
    super(firstName);
  }
}

// Create a new object instance:
const myBio = new Bio("Oluwatobi");

Try Editing It

The snippet above throws an Uncaught ReferenceError because a derived class’s constructor cannot access the keyword this before the super() function caller.

Example: What happens if you use only this keyword in a derived class’s constructor?

// Create a new class:
class Name {
  createName() {
    return "Sofela";
  }
}

// Create a derived class:
class Bio extends Name {
  constructor() {
    this.firstName = "Oluwatobi"; // Using the keyword this before super will cause the browser to throw a ReferenceError:
  }
}

// Create a new object instance:
const myBio = new Bio();

Try Editing It

The snippet above throws an Uncaught ReferenceError because a derived class’s constructor cannot access the keyword this before the super() function caller.

Now that we know how to use the super keyword as a function caller, we can discuss using it as a property accessor.

How to Use the super Keyword as a Property Accessor

You can use the super keyword as a property accessor in your JavaScript classes and object literals.

• Class Usage: The super keyword searches a class’s parent for a specified static or prototypal class field. In other words, super allows you to access a parent class’s static or prototypal properties from a child class.
• Object Literal Usage: The super keyword searches an object’s parent for a specified prototypal property. In other words, super allows you to access the parent object’s prototypal properties from a child object.

Syntax of the super keyword as a dot notation property accessor

super.parentClassOrObjectProperty;

Example: Use the super keyword’s dot notation to access the parent class’s static field

// Create a new class:
class Name {
  // Create a static class field:
  static myName = "Oluwatobi";
}

// Create a derived class:
class Bio extends Name {
  // Create a static property from the parent class's static class field:
  static firstName = super.myName;
}

// Check firstName's current value:
Bio.firstName;

// The invocation above will return:
"Oluwatobi"

Try Editing It

We used the super keyword in the snippet above to access the parent class’s static class field.

Note: Prefixing the firstName statement with a static keyword makes super find a myName static property in the parent class.

Suppose you omit the static keyword. In that case, super will search for a myName prototypal property in the parent class.

Example: Use the super keyword’s dot notation to access the parent class’s prototypal field

// Create a new class:
class Time {
  // Create a prototypal method:
  hourNow() {
    return new Date().getHours();
  }

  // Create a second prototypal method:
  minutesNow() {
    return new Date().getMinutes();
  }
}

// Create a derived class:
class Moment extends Time {
  // Create an instance property using the parent class's prototypal methods:
  currentMoment = `The time is ${super.hourNow()}:${super.minutesNow()}.`
}

// Create a new object instance:
const momentNow = new Moment();

// Check momentNow's current value:
console.log(momentNow);

Try Editing It

We used the super keyword in the snippet above to access the parent class’s prototypal class fields.

Example: Use the super keyword’s dot notation to access a parent object’s prototypal property

// Create a new object:
const website = {
  // Create a method:
  showName() {
    return "CodeSweetly";
  }
}

// Create another object:
const company = {
  // Create a method:
  showCompany() {
    return super.showName();
  }
}

// Change company's dunder proto to the website object:
Object.setPrototypeOf(company, website);

// Invoke the showCompany method:
company.showCompany()

// The invocation above will return:
"CodeSweetly"

Try Editing It

We used the super keyword in the snippet above to access the parent object’s showName() method.

Note: The Object.setPrototypeOf() code changes the company’s [[Prototype]] property to the website object. Therefore, the company object’s prototype chain will look like this:

{ showCompany: showCompany() } ---> { showName: showName() } ---> Object.prototype ---> null

You can also use the super keyword as a bracket notation property accessor to search a parent class or object literal for a specified static or prototypal property.

Syntax of the super keyword as a bracket notation property accessor

super[expresssion];

Example: Use the super keyword’s bracket notation to access a parent class’s static field

// Create a new class:
class Name {
  // Create a static class field:
  static myName = "Oluwatobi";
}

// Create a derived class:
class Bio extends Name {
  // Create a static property from the parent class's static class field:
  static firstName = super["myName"];
}

// Check firstName's current value:
Bio.firstName;

// The invocation above will return:
"Oluwatobi"

Try Editing It

We used the super keyword in the snippet above to access the parent class’s static class field.

Note: super cannot access a parent class’s instance class field because JavaScript sets an instance property on the object instance, not the class itself or its prototype chain. (super searches only for a parent’s static or prototypal properties.)

Example: Use the super keyword to access the parent class’s instance field

// Create a new class:
class Name {
  // Create an instance class field:
  myName = "Oluwatobi";
}

// Create a derived class:
class Bio extends Name {
  // Create an instance property from the parent class's instance class field:
  firstName = super.myName;
}

// Create a new object instance:
const myBio = new Bio();

// Check myBio's current value:
myBio;

// The invocation above will return:
{ myName: "Oluwatobi", firstName: undefined }

Try Editing It

The firstName property’s value is undefined because super could not find a prototypal myName field on the parent class.

Note: The keywords super and [this](https://codesweetly.com/javascript-this-keyword) allow you to search for a specified property in an object’s prototype chain. But they work in different ways. Let’s discuss their differences now.

super vs. this keyword: What’s the Difference?

The difference between the super and this keyword is as follows:

• super searches for a specified prototypal property in a parent class’s prototype chain.
• this searches for a specified prototypal property from a class’s object instance’s own properties to its prototype chain.

In other words, super starts its search from the parent class’s prototype property. But this searches from an object instance’s local scope to its prototype chain.

For instance, consider the following code:

// Create a new class:
class ParentClass {
  // Create a prototypal method:
  showId() {
    return "I am a parent.";
  }
}

// Create a derived class:
class ChildClass extends ParentClass {
  // Create a prototypal method:
  showId() {
    return "I am a child.";
  }
  // Create another prototypal method:
  getId() {
    console.log(super.showId());
    console.log(this.showId());
  }
}

// Create a new object instance:
const instanceObject = new ChildClass();

// Invoke the instanceObject's getId() method:
instanceObject.getId();

// The invocation above will return:
"I am a parent."
"I am a child."

Try Editing It

Here’s how super and this performed their searches:

You can see that super shortens the steps required to find a prototypal method.

Now that we know how to use the three types of JavaScript classes, let’s look at the main components in one piece.

Components of a JavaScript Class

The main features of a JavaScript class are as follows:

1. A class keyword
2. The class’s name
3. The extends clause
4. A code block ({...})
5. The class’s body
6. A constructor method
7. super() function caller
8. super property accessor
9. Instance class fields
10. Prototypal class fields
11. Private class fields
12. Static class fields
13. Static initialization blocks

Let’s look at these features in a class declaration.

class ChildClass extends ParentClass {
  constructor(parameter) {
    super(parameter);
  }
  instanceClassField = "Value can be any valid JavaScript data type";
  prototypalClassField() {
    // prototypalClassField's body
  }
  #privateClassField = "Value can be any valid JavaScript data type";
  static classField = "Value can be any valid JavaScript data type";
  static classFieldWithSuperValue = super.parentProperty;
  static #privateClassField = "Value can be any valid JavaScript data type";
  static {
    // Static initialization block's body
  }
}

The constructor function equivalence of the snippet above looks like this:

function ChildClass() {
  this.instanceClassField = "Value can be any valid JavaScript data type";
}

Object.setPrototypeOf(ChildClass, ParentClass);

ChildClass.prototype.prototypalClassField = function () {
  // prototypalClassField's body
}

ChildClass.staticClassField = "Value can be any valid JavaScript data type";

ChildClass.staticClassFieldWithSuperValue = Object.getPrototypeOf(ChildClass).parentProperty;

(function () {
  // Static initialization block's body
})();

Note: You currently cannot create private fields in constructor functions. They are one of the latest features JavaScript introduced in classes.

How Does a JavaScript Class Help with Encapsulation?

Classes let you prevent external code from interacting with internal class fields. Instead, external code would use public methods to operate on the class’s internal implementations.

For instance, consider the following code:

// Create a new class:
class Name {
  // Create a private class field data:
  #myName = "Oluwatobi";

  // Create a publicly available method:
  showMyName() {
    return this.#myName;
  }

  // Create another publicly available method:
  updateMyName(value) {
    this.#myName = value;
  }
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return:
undefined

Try Editing It

The snippet above encapsulated Name’s data because it defined myName as a private feature and provided two public methods for users to read and update the class’s internal implementation.

Consequently, the bio instance object knows nothing about the class’s internal data and cannot interact with it directly.

Whenever users need to access the encapsulated data, they would use the publicly available methods like so:

// Check the instance's data value:
bio.showMyName();

// The invocation above will return:
"Oluwatobi"

// Update the instance's data value:
bio.updateMyName("Sofela");

// Check the instance's data value:
bio.showMyName();

// The invocation above will return:
"Sofela"

Try Editing It

Encapsulating your data is an excellent way to keep your class clean. It prevents minor internal refactoring from breaking users’ code.

For instance, consider the following code:

// Create a new class:
class Name {
  // Create a public class field data:
  myName = "Oluwatobi";
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return:
"Oluwatobi"

// Update the instance's data value:
bio.myName = "Sofela";

// Check the instance's data value:
bio.myName;

// The invocation above will return:
"Sofela"

Since the snippet above did not encapsulate the class’s data, refactoring the class field’s name would break users’ code.

Here’s an example:

class Name {
  // Update the data's name from myName to myFirstName:
  myFirstName = "Oluwatobi";
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.myName;

// The invocation above will return:
undefined

The snippet above returned undefined because refactoring the class’s internal implementation broke the user’s bio.myName code. For the application to work appropriately, the user must update every instance of the code (which can be burdensome for large projects).

However, encapsulation prevents such refactoring from breaking the user’s code.

Here’s an example:

class Name {
  // Update the data's name from myName to myFirstName:
  #myFirstName = "Oluwatobi";

  // Create a publicly available method:
  showMyName() {
    return this.#myFirstName;
  }

  // Create another publicly available method:
  updateMyName(value) {
    this.#myFirstName = value;
  }
}

// Create a new object instance:
const bio = new Name();

// Check the instance's data value:
bio.showMyName();

// The invocation above will return:
"Oluwatobi"

// Update the instance's data value:
bio.updateMyName("Sofela");

// Check the instance's data value:
bio.showMyName();

// The invocation above will return:
"Sofela"

You can see that refactoring the class’s internal implementation did not break the user’s code. That’s the beauty of encapsulation!

Encapsulation allows you to provide users with an interface independent of the class’s underlying data. Therefore, you minimize the likelihood of users’ code breaking when you alter internal implementations.

Important Things to Know about JavaScript Classes

Here are five essential facts to remember when using JavaScript classes.

1. Declare your class before you access it

Classes are like constructor functions but have the same temporal dead zone behavior as const and let variables.

In other words, JavaScript does not hoist class declarations. Therefore, you must first declare your class before you can access it. Otherwise, the computer will throw an Uncaught ReferenceError.

Here’s an example:

// Create an object instance from the Name class:
const name = new Name();

// Define the Name class:
class Name {}

Try Editing It

The snippet above throws an Uncaught ReferenceError because JavaScript does not hoist classes. So, invoking Name() before its definition is invalid.

2. Classes are functions

The typeof a class is a function because, under the hood, the class keyword creates a new function.

For instance, consider the following code:

// Define a JavaScript class:
class Bio {
  // Define two instance class fields:
  firstName = "Oluwatobi";
  lastName = "Sofela";
  // Create a prototypal method:
  showBio() {
    return `${ firstName } ${ lastName } runs CodeSweetly.`;
  }
}

// Create a new object instance:
const aboutMe = new Bio();

// Check what data type the Bio class is:
typeof Bio;

// The invocation above will return:
"function"

Try Editing It

The computer processes the snippet above as follows:

1. Create a new function named Bio.
2. Add the class’s instance properties to the newly created function’s this keyword.
3. Add the class’s prototypal properties to the newly created function’s prototype property.

3. Classes are strict

JavaScript executes classes in strict mode. So, follow the strict syntax rules when you use classes. Otherwise, your code will throw errors—some of which will be silent errors that are difficult to debug.

4. Avoid the return keyword in your class’s constructor method

Suppose your class’s constructor returns a non-primitive value. In that case, JavaScript will ignore the values of all the this keywords and assign the non-primitive to the new keyword expression.

In other words, a constructor’s return object overrides its this keyword.

For instance, consider the following code:

// Create a new class:
class Name {
  constructor() {
    this.firstName = "Oluwatobi";
    this.lastName = "Sofela";
    return { companyName: "CodeSweetly" };
  }
}

// Create a new object instance:
const myName = new Name();

// Check myName's current value:
myName;

// The invocation above will return:
{ companyName: "CodeSweetly" }

// Check firstName's current value:
myName.firstName;

// The invocation above will return:
undefined

// Check lastName's current value:
myName.lastName;

// The invocation above will return:
undefined

Try Editing It

The new keyword expression returned only { companyName: "CodeSweetly" } because JavaScript ignores the constructor method’s this keywords whenever you use a return operator to produce an object.

5. A class’s evaluation starts from the extends clause to its values

JavaScript evaluates your class according to the following order:

1. extends clause

If you declare an extends clause, the computer will first evaluate it.

Note: Browsers will throw a TypeError if the extends clause does not evaluate to a constructor function or null.

2. Extract the class’s constructor

JavaScript extracts the class’s constructor.

Note: Suppose you did not define a constructor method. In that case, the computer will use the default one.

3. Parse the class’s property names

The computer analyzes the class’s class field names (not their values) according to their order of declaration.

4. Parse the class’s methods and property accessors

JavaScript analyzes the class’s methods and property accessors according to their order of declaration by doing the following:

• Add the prototypal methods and property accessors to the class’s prototype property.
• Analyze the static methods and property accessors as the class’s own properties, which you can call on the class itself.
• Analyze the private instance methods and property accessors as private properties of the class’s instance object.

5. Parse the class’s property values

The computer analyzes the class field values according to their order of declaration by doing the following:

• Save each instance field’s initializer expression for later evaluations. JavaScript will evaluate the initializer expression during the following periods:
  • When the new keyword is creating an instance object.
  • While processing the parent class’s constructor.
  • Before the super() function call returns.
• Set each static field’s keyword this to the class itself and create the static property on the class.
• Evaluate the class’s static initialization blocks and set their keyword this to the class itself.

Note:

• Only after JavaScript parses a class’s property values is the class fully initialized and available as a constructor function.
• Any attempt to access the child class before its complete initialization would return a ReferenceError.

Overview

In this article, we discussed what a JavaScript class object is. We also used examples to discuss class fields, the super keyword, and data encapsulation.

Thanks for reading!

And here’s a useful React.JS resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly guidebook for mastering the art of creating, testing, and publishing NPM libraries in the React and JavaScript ecosystem.

It uses a scalable project to explain the fundamentals of building and managing NPM packages from scratch.

Here is the main distinction between them:

nth-child() selects its items from any group of elements. nth-of-type() selects its items from a specified type of element.

• :nth-child() selects items from a general group of elements. For instance, selecting a <p> node from a mixed group that includes <h1>, <div>, and <section>.
• :nth-of-type() selects items from a specified group of elements. For instance, selecting a <p> node from a group of <p> siblings.

This article uses examples to show you exactly how the two selectors work in CSS so that you can understand their similarities and differences.

Table of Contents

1. What is the CSS :nth-child() Selector?
   • Syntax of the CSS :nth-child() Selector
   • Examples of the CSS :nth-child() Selector
2. What is the CSS :nth-of-type() Selector?
   • Syntax of the CSS :nth-of-type() Selector
   • Examples of the CSS :nth-of-type() Selector
3. Overview

So, without any further ado, let’s get started with the :nth-child() selector.

What is the CSS :nth-child() Selector?

The CSS :nth-child() selector selects one or more child elements among their direct siblings regardless of node types.

Syntax of the CSS :nth-child() Selector

The CSS :nth-child() selector accepts one argument only. Here is the syntax:

html-element:nth-child(value) {
  style declarations
}

The value argument can be one of the following:

1. A number: For example, using 3 represents the third child.
2. The keyword even or odd: We use it to represent even or odd children.
3. The formula An+B: We use it to express a series of numbers. For instance, 2n+3 expresses these numbers: [(2x0)+3], [(2x1)+3], [(2x2)+3], [(2x3)+3], and so on.

Note the following:

• :nth-child() is a CSS pseudo-class selector.
• The :nth-child() selector works on direct siblings only.
• In the An+B formula,
  • A is an integer value of your choice.
  • n is the multiplier that automatically increases from zero (0).
  • + (or -) is the addition (or subtraction) operator.
  • B is an optional offset value for increasing (or decreasing) the result derived after multiplying A and n.

Examples of the CSS :nth-child() Selector

Below are examples of how to use the CSS :nth-child() pseudo-class selector.

Apply DeepPink to the <p> element that is the third child to its parent element

The :nth-child() selector below selects the <p> element that is the third child to its parent element.

p:nth-child(3) {
  color: DeepPink;
}

If the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the second <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<p>Second paragraph element</p>
<h2>First heading 2 element</h2>
<p>Third paragraph element</p>
<h3>First heading 3 element</h3>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>

Try Editing It

The :nth-child() selector works on direct siblings only. For instance, you can re-write the HTML snippet above to include nested elements as follows:

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's fifth paragraph element</p>
  <p>Article's sixth paragraph element</p>
</article>

Try Editing It

The p:nth-child(3) selector will apply DeepPink only to the fourth <p> node because it is the third child of its parent element.

Apply DeepPink to every odd child that is a <p> node

The :nth-child() selector below selects every odd child element that is a <p> node.

p:nth-child(odd) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the fourth <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<h2>First heading 2 element</h2>
<p>Second paragraph element</p>
<h3>First heading 3 element</h3>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>

Try Editing It

Apply DeepPink to every even child that is a <p> node

The :nth-child() selector below selects every even child element that is a <p> node.

p:nth-child(even) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the first, second, fourth, and sixth <p> elements.

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Apply DeepPink to the third child element, seventh, eleventh, and so on that is a <p> node

The :nth-child() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of three (+3).

Note: 1 is the index position of the first child element.

p:nth-child(2n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first child, third, fifth, and so on that is a <p> node

The :nth-child() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of negative three (-3).

Note: 1 is the index position of the first child element.

p:nth-child(2n-3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<div><p>Fifth paragraph element</p></div>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<div><p>Nineth paragraph element</p></div>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the <p> nodes that are one of the first three children of their parent

The :nth-child() selector below applies DeepPink to <p> nodes if they are one of their parent’s first three elements.

p:nth-child(-n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<article>
  <h1>Article's first heading 1 element</h1>
  <p>Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Note that:

• 1 is the index position of the first child element.
• The -n+3 syntax always selects the first three children because:
  • -1 + 3 = 2
  • -2 + 3 = 1
  • -3 + 3 = 0

So, now that we know how the CSS :nth-child() selector works, let’s discuss :nth-of-type() so we can see the difference.

What is the CSS :nth-of-type() Selector?

The CSS :nth-of-type() selector selects one or more child elements among their direct siblings of the same node type.

Syntax of the CSS :nth-of-type() Selector

The CSS :nth-of-type() accepts one argument only. Here is the syntax:

html-element:nth-of-type(value) {
  style declarations
}

The value argument can be one of the following:

1. A number: For instance, using 3 represents the third element type.
2. The keyword even or odd: We use it to represent even or odd element types.
3. The formula An+B: We use it to express a series of numbers. For instance, 2n+3 expresses these numbers: [(2x0)+3], [(2x1)+3], [(2x2)+3], [(2x3)+3], and so on.

Note the following:

• :nth-of-type() is a CSS pseudo-class selector.
• The :nth-of-type() selector works on direct siblings only.
• In the An+B formula,
  • A is an integer value of your choice.
  • n is the multiplier that automatically increases from zero (0).
  • + (or -) is the addition (or subtraction) operator.
  • B is an optional offset value for increasing (or decreasing) the result derived after multiplying A and n.

Examples of the CSS :nth-of-type() Selector

Below are examples of how to use the CSS :nth-of-type() pseudo-class selector.

Apply DeepPink to the third <p> element type

The :nth-of-type() selector below selects the third <p> element among its siblings of the same node type.

p:nth-of-type(3) {
  color: DeepPink;
}

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the third <p> element only.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<p>Second paragraph element</p>
<h2>First heading 2 element</h2>
<p>Third paragraph element</p>
<h3>First heading 3 element</h3>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>

Try Editing It

The :nth-of-type() selector works on direct siblings only. For instance, you can re-write the HTML snippet above to include nested elements as follows:

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's fifth paragraph element</p>
  <p>Article's sixth paragraph element</p>
</article>

Try Editing It

The p:nth-of-type(3) selector will apply DeepPink only to the fifth <p> node because it is the third <p> type of its parent element.

Therefore, if you add one more <p> node to the <section> element, the p:nth-of-type(3) selector will apply DeepPink to the fifth and sixth <p> items.

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's third paragraph element</p>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Apply DeepPink to every odd <p> element type

The :nth-of-type() selector below selects every <p> child element with an odd index.

p:nth-of-type(odd) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the first and third <p> elements.

<h1>First heading 1 element</h1>
<p>First paragraph element</p>
<h2>First heading 2 element</h2>
<p>Second paragraph element</p>
<h3>First heading 3 element</h3>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>

Try Editing It

Apply DeepPink to every even <p> element type

The :nth-of-type() selector below selects every <p> child element with an even index.

p:nth-of-type(even) {
  color: DeepPink;
}

Note: 1 is the index position of the first child element.

Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink to the second, fifth, and sixth <p> elements.

<article>
  <h1>Article's first heading 1 element</h1>
  <p> Article's first paragraph element</p>
  <h2>Article's first heading 2 element</h2>
  <p>Article's second paragraph element</p>
  <p>Article's third paragraph element</p>
  <section>
    <h3>Article's first heading 3 element</h3>
    <p>Article's fourth paragraph element</p>
    <p>Article's fifth paragraph element</p>
  </section>
  <h2>Article's second heading 2 element</h2>
  <p>Article's sixth paragraph element</p>
  <p>Article's seventh paragraph element</p>
</article>

Try Editing It

Note: Browsers will apply DeepPink to the fifth paragraph because it is the second <p> node of the <section> element.

Apply DeepPink to the third <p> element type, fifth, seventh, and so on

The :nth-of-type() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of three (+3).

Note: 1 is the index position of the first child element.

p:nth-of-type(2n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first <p> element type, third, fifth, and so on

The :nth-of-type() selector below selects every <p> child element whose index is a multiple of two (2) with an offset of negative three (-3).

Note: 1 is the index position of the first child element.

p:nth-of-type(2n-3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Apply DeepPink to the first three <p> element type

The :nth-of-type() selector below applies DeepPink to the first three <p> child elements.

p:nth-of-type(-n+3) {
  color: DeepPink;
}

Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which of the elements will the browser style?

<p>First paragraph element</p>
<p>Second paragraph element</p>
<p>Third paragraph element</p>
<p>Fourth paragraph element</p>
<p>Fifth paragraph element</p>
<p>Sixth paragraph element</p>
<p>Seventh paragraph element</p>
<p>Eight paragraph element</p>
<p>Nineth paragraph element</p>
<p>Tenth paragraph element</p>
<p>Eleventh paragraph element</p>
<p>Twelfth paragraph element</p>

Try Editing It

Note:

• 1 is the index position of the first child element.
• The -n+3 syntax always selects the first three <p> child elements because:
  • -1 + 3 = 2
  • -2 + 3 = 1
  • -3 + 3 = 0

Overview

In this article, we discussed the similarities and differences between the CSS :nth-child() and :nth-of-type() selectors. We also used examples to see how they work.

Thanks for reading!

And here’s a useful React.JS resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly guidebook for mastering the art of creating, testing, and publishing NPM libraries in the React and JavaScript ecosystem.

It uses a scalable project to explain the fundamentals of building and managing NPM packages from scratch.

Session and local storage are the two main types of web storage. They are similar to regular properties objects, but they persist (do not disappear) when the webpage reloads.

This article aims to show you exactly how the two storage objects work in JavaScript. We will also use a To-Do list exercise to practice using web storage in a web app project.

Table of Contents

1. What is the Session Storage Object?
2. What is the Local Storage Object?
3. How to Access the Session and Local Storage Objects
4. What are Web Storage’s Built-In Interfaces?
   • What is web storage’s setItem() method?
   • What is web storage’s key() method?
   • What is web storage’s getItem() method?
   • What is web storage’s length property?
   • What is web storage’s removeItem() method?
   • What is web storage’s clear() method?
5. Time to Practice with Web Storage 🤸‍♂️🏋️‍♀️
   • The Problem
   • Your Exercise
   • Bonus Exercise
6. How Did You Go About Solving the Web Storage Exercise?
   • How to prevent the Session Storage pane’s To-Do items from disappearing on page reload
   • How to prevent the Local Storage pane’s To-Do items from disappearing on page reload or reopen
   • How to auto-display the Session section’s previously added tasks on page reload
   • How to auto-display the Local section’s previously added tasks on page reload or reopen
   • How to check the total items in the browser’s session storage
   • How to display the local storage’s zeroth index item’s name
   • How to empty the browser’s session storage
7. How to Continue Practicing with Web Storage 🧗‍♀️🚀
8. Web Storage vs. Cookies: What is the Difference?
9. Wrapping up

Without further ado, let’s discuss session storage.

What is the Session Storage Object?

The session storage object (window.sessionStorage) stores data that persists for only one session of an opened tab.

In other words, whatever gets stored in the window.sessionStorage object will not disappear on a reload of the web page. Instead, the computer will delete the stored data only when users close the browser tab or window.

Note the following:

• The data stored inside the session storage is per-origin and per-instance. In other words, http://freecodecamp.com’s sessionStorage object is different from https://freecodecamp.com’s sessionStorage object because the two origins use different schemes (http and https).
• Per-instance means per-window or per-tab. In other words, the sessionStorage object’s lifespan expires once users close the instance (window or tab).
• Browsers create a unique page session for each new tab or window. Therefore, users can run multiple instances of an app without interfering with each instance’s session storage. (Note: Cookies do not have good support for running multiple instances of the same app. Such an attempt can cause errors such as double entry of bookings.)
• Session storage is a property of the global Window object. So sessionStorage.setItem() is equivalent to window.sessionStorage.setItem().

What is the Local Storage Object?

The local storage object (window.localStorage) stores data that persists even when users close their browser tab (or window).

In other words, whatever gets stored in the window.localStorage object will not disappear during a reload or reopening of the web page or when users close their browsers. Those data have no expiration time. Browsers never clear them automatically.

The computer will delete the window.localStorage object’s content in the following instances only:

1. When the content gets cleared through JavaScript
2. When the browser’s cache gets cleared

Note the following:

• The window.localStorage object’s storage limit is larger than the window.sessionStorage.
• The data stored inside the local storage is per-origin. In other words, http://freecodecamp.com’s localStorage object is different from https://freecodecamp.com’s localStorage object because the two origins use different schemes (http and https).
• There are inconsistencies with how browsers handle the local storage of documents not served from a web server (for instance, pages with a file: URL scheme). Therefore, the localStorage object may behave differently among browsers when used with non-HTTP URLs, such as file:///document/on/users/local/system.html.
• Local storage is a property of the global Window object. Therefore, localStorage.setItem() is equivalent to window.localStorage.setItem().

How to Access the Session and Local Storage Objects

You can access the two web storages by:

1. Using the same technique as you'd use for accessing regular JavaScript objects
2. Using web storage’s built-in interfaces

For instance, consider the snippet below:

sessionStorage.bestColor = "Green";
sessionStorage["bestColor"] = "Green";
sessionStorage.setItem("bestColor", "Green");

The three statements above do the same thing—they set bestColor’s value. But the third line is recommended because it uses web storage’s setItem() method.

Tip: you should prefer using the web storage’s built-in interfaces to avoid the pitfalls of using objects as key/value stores.

Let’s discuss more on the web storage’s built-in interfaces below.

What are Web Storage’s Built-In Interfaces?

The web storage built-in interfaces are the recommended tools for reading and manipulating a browser’s sessionStorage and localStorage objects.

The six (6) built-in interfaces are:

• setItem()
• key()
• getItem()
• length
• removeItem()
• clear()

Let’s discuss each one now.

What is web storage’s setItem() method?

The setItem() method stores its key and value arguments inside the specified web storage object.

Syntax of the setItem() method

setItem() accepts two required arguments. Here is the syntax:

webStorageObject.setItem(key, value);

• webStorageObject represents the storage object (localStorage or sessionStorage) you wish to manipulate.
• key is the first argument accepted by setItem(). It is a required string argument representing the name of the web storage property you want to create or update.
• value is the second argument accepted by setItem(). It is a required string argument specifying the value of the key you are creating or updating.

Note:

• The key and value arguments are always strings.
• Suppose you provide an integer as a key or value. In that case, browsers will convert them to strings automatically.
• setItem() may display an error message if the storage object is full.

Example 1: How to store data in the session storage object

1. Invoke sessionStorage’s setItem() method.
2. Provide the name and value of the data you wish to store.

// Store color: "Pink" inside the browser's session storage object:
sessionStorage.setItem("color", "Pink");

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{color: "Pink"}

Try Editing It

Note: Your browser’s session storage may contain additional data if it already uses the storage object to store information.

Example 2: How to store data in the local storage object

1. Invoke localStorage’s setItem() method.
2. Provide the name and value of the data you wish to store.

// Store color: "Pink" inside the browser's local storage object:
localStorage.setItem("color", "Pink");

// Log the local storage object to the console:
console.log(localStorage);

// The invocation above will return:
{color: "Pink"}

Try Editing It

Note:

• Your browser’s local storage may contain additional data if it already uses the storage object to store information.
• It is best to serialize objects before storing them in local or session storage. Otherwise, the computer will store the object as "[object Object]".

Example 3: Browsers use "[object Object]" for non-serialized objects in the web storage

// Store myBio object inside the browser's session storage object:
sessionStorage.setItem("myBio", { name: "Oluwatobi" });

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{myBio: "[object Object]", length: 1}

Try Editing It

You can see that the computer stored the object as "[object Object]" because we did not serialize it.

Example 4: How to store serialized objects in the web storage

// Store myBio object inside the browser's session storage object:
sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
{myBio: '{"name":"Oluwatobi"}', length: 1}

Try Editing It

We used JSON.stringify() to convert the object to JSON before storing it in the web storage.

Tip: Learn how to convert JSON to JavaScript objects.

What is web storage’s key() method?

The key() method retrieves a specified web storage item’s name (key).

Syntax of the key() method

key() accepts one required argument. Here is the syntax:

webStorageObject.key(index);

• webStorageObject represents the storage object (localStorage or sessionStorage) whose key you wish to get.
• index is a required argument. It is an integer specifying the index of the item whose key you want to get.

Example 1: How to get the name of an item in the session storage object

1. Invoke sessionStorage’s key() method.
2. Provide the index of the item whose name you wish to get.

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Get the name of the item at index 1:
sessionStorage.key(1);

Try Editing It

Important: The user-agent defines the order of items in the session storage. In other words, key()’s output may vary based on how the user-agent orders the web storage’s items. So you shouldn't rely on key() to return a constant value.

Example 2: How to get the name of an item in the local storage object

1. Invoke localStorage’s key() method.
2. Provide the index of the item whose name you wish to get.

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Get the name of the item at index 1:
localStorage.key(1);

Try Editing It

Important: The user-agent defines the order of items in the local storage. In other words, key()’s output may vary based on how the user-agent orders the web storage’s items. So you shouldn't rely on key() to return a constant value.

What is web storage’s getItem() method?

The getItem() method retrieves the value of a specified web storage item.

Syntax of the getItem() method

getItem() accepts one required argument. Here is the syntax:

webStorageObject.getItem(key);

• webStorageObject represents the storage object (localStorage or sessionStorage) whose item you wish to get.
• key is a required argument. It is a string specifying the name of the web storage property whose value you want to get.

Example 1: How to get data from the session storage object

1. Invoke sessionStorage’s getItem() method.
2. Provide the name of the data you wish to get.

// Store color: "Pink" inside the browser's session storage object:
sessionStorage.setItem("color", "Pink");

// Get color's value from the session storage:
sessionStorage.getItem("color");

// The invocation above will return:
"Pink"

Try Editing It

Example 2: How to get data from the local storage object

1. Invoke localStorage’s getItem() method.
2. Provide the name of the data you wish to get.

// Store color: "Pink" inside the browser's local storage object:
localStorage.setItem("color", "Pink");

// Get color's value from the local storage:
localStorage.getItem("color");

// The invocation above will return:
"Pink"

Try Editing It

Note: The getItem() method will return null if its argument does not exist in the specified web storage.

What is web storage’s length property?

The length property returns the number of properties in the specified web storage.

Syntax of the length property

Here is length’s syntax:

webStorageObject.length;

webStorageObject represents the storage object (localStorage or sessionStorage) whose length you wish to verify.

Example 1: How to verify the number of items in the session storage object

Invoke sessionStorage’s length property.

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Verify the number of items in the session storage:
sessionStorage.length;

// The invocation above may return:
3

Try Editing It

Note: Your sessionStorage.length invocation may return a value greater than 3 if your browser’s session storage already contains some stored information.

Example 2: How to verify the number of items in the local storage object

Invoke localStorage’s length property.

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Verify the number of items in the local storage:
localStorage.length;

// The invocation above may return:
3

Try Editing It

Note: Your localStorage.length invocation may return a value greater than 3 if your browser's local storage already contains some stored information.

What is web storage’s removeItem() method?

The removeItem() method removes a property from the specified web storage.

Syntax of the removeItem() Method

removeItem() accepts one required argument. Here is the syntax:

webStorageObject.removeItem(key);

• webStorageObject represents the storage object (localStorage or sessionStorage) whose item you wish to remove.
• key is a required argument. It is a string specifying the name of the web storage property you want to remove.

Example 1: How to remove data from the session storage object

1. Invoke sessionStorage’s removeItem() method.
2. Provide the name of the data you wish to remove.

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Remove the pcColor item from the session storage:
sessionStorage.removeItem("pcColor");

// Confirm whether the pcColor item still exists in the session storage:
sessionStorage.getItem("pcColor");

// The invocation above will return:
null

Try Editing It

Note: The removeItem() method will do nothing if its argument does not exist in the session storage.

Example 2: How to remove data from the local storage object

1. Invoke localStorage’s removeItem() method.
2. Provide the name of the data you wish to remove.

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Remove the pcColor item from the local storage:
localStorage.removeItem("pcColor");

// Confirm whether the pcColor item still exists in the local storage:
localStorage.getItem("pcColor");

// The invocation above will return:
null

Try Editing It

Note: The removeItem() method will do nothing if its argument does not exist in the local storage.

What is web storage’s clear() method?

The clear() method clears (deletes) all the items in the specified web storage.

Syntax of the clear() Method

clear() accepts no argument. Here is the syntax:

webStorageObject.clear();

webStorageObject represents the storage object (localStorage or sessionStorage) whose items you wish to clear.

Example 1: How to clear all items from the session storage object

Invoke sessionStorage’s clear() method.

// Store carColor: "Pink" inside the browser's session storage object:
sessionStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the session storage object:
sessionStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the session storage object:
sessionStorage.setItem("laptopColor", "White");

// Clear all items from the session storage:
sessionStorage.clear();

// Confirm whether the session storage still contains any item:
console.log(sessionStorage);

// The invocation above will return:
{length: 0}

Try Editing It

Example 2: How to clear all items from the local storage object

Invoke localStorage’s clear() method.

// Store carColor: "Pink" inside the browser's local storage object:
localStorage.setItem("carColor", "Pink");

// Store pcColor: "Yellow" inside the local storage object:
localStorage.setItem("pcColor", "Yellow");

// Store laptopColor: "White" inside the local storage object:
localStorage.setItem("laptopColor", "White");

// Clear all items from the local storage:
localStorage.clear();

// Confirm whether the local storage still contains any item:
console.log(localStorage);

// The invocation above will return:
{length: 0}

Try Editing It

Now that we know what web storage is and how to access it, we can practice using it in a JavaScript project.

Time to Practice with Web Storage 🤸‍♂️🏋️‍♀️

Consider the following To-Do List app:

The Problem

The issue with the To-Do List app is this:

• Tasks disappear whenever users refresh the webpage.

Your Exercise

Use the appropriate Web Storage APIs to accomplish the following tasks:

1. Prevent the Session pane’s To-Do items from disappearing whenever users reload the browser.
2. Prevent the Local section’s To-Do items from disappearing whenever users reload or close their browser tab (or window).
3. Auto-display the Session section's previously added tasks on page reload.
4. Auto-display the Local section's previously added tasks on page reload (or browser reopen).

Bonus Exercise

Use your browser’s console to:

1. Check the number of items in your browser’s session storage object.
2. Display the name of your local storage’s zeroth index item.
3. Delete all the items in your browser’s session storage.

Try the Web Storage Exercise

Note: You will benefit much more from this tutorial if you attempt the exercise yourself.

If you get stuck, don’t be discouraged. Instead, review the lesson and give it another try.

Once you’ve given it your best shot (you’ll only cheat yourself if you don’t!), we can discuss how I approached the exercise below.

How Did You Go About Solving the Web Storage Exercise?

Below are feasible ways to get the exercise done.

How to prevent the Session Storage pane’s To-Do items from disappearing on page reload

Whenever users click the “Add task” button,

1. Get existing session storage’s content, if any. Otherwise, return an empty array.
2. Merge the existing to-do items with the user’s new input.
3. Add the new to-do list to the browser’s session storage object.

Here’s the code:

sessionAddTaskBtn.addEventListener('click', () => {
  // Get existing session storage's content, if any. Otherwise, return an empty array:
  const currentTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  // Merge currentTodoArray with the user's new input:
  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: sessionInputEle.value },
  ];

  // Add newTodoArray to the session storage object:
  sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

  const todoLiElements = createTodoLiElements(newTodoArray);
  sessionTodosContainer.replaceChildren(...todoLiElements);
  sessionInputEle.value = '';
});

Try Editing It

Note: The three dots (...) preceding the currentTodoArray variable represent the spread operator. We used it in the newTodoArray object to copy currentTodoArray’s items into newTodoArray.

How to prevent the Local Storage pane’s To-Do items from disappearing on page reload or reopen

1. Get existing local storage’s content, if any. Otherwise, return an empty array.
2. Merge the existing to-do items with the user’s new input.
3. Add the new to-do list to the browser’s local storage object.

Here’s the code:

localAddTaskBtn.addEventListener('click', () => {
  // Get existing local storage's content, if any. Otherwise, return an empty array:
  const currentTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  // Merge currentTodoArray with the user's new input:
  const newTodoArray = [
    ...currentTodoArray,
    { checked: false, text: localInputEle.value },
  ];

  // Add newTodoArray to the local storage object:
  sessionStorage.setItem('codesweetlyStore', JSON.stringify(newTodoArray));

  const todoLiElements = createTodoLiElements(newTodoArray);
  localTodosContainer.replaceChildren(...todoLiElements);
  localInputEle.value = '';
});

Try Editing It

Note: The localTodosContainer.replaceChildren(...todoLiElements) statement tells the browser to replace localTodosContainer’s current children elements with the list of <li>s in the todoLiElements array.

How to auto-display the Session section’s previously added tasks on page reload

Whenever users reload the page,

1. Get existing session storage’s content, if any. Otherwise, return an empty array.
2. Use the retrieved content to create <li> elements.
3. Populate the tasks display space with the <li> elements.

Here’s the code:

window.addEventListener('load', () => {
  // Get existing session storage's content, if any. Otherwise, return an empty array:
  const sessionTodoArray =
    JSON.parse(sessionStorage.getItem('codesweetlyStore')) || [];

  // Use the retrieved sessionTodoArray to create <li> elements:
  const todoLiElements = createTodoLiElements(sessionTodoArray);

  // Populate the tasks display space with the todoLiElements:
  sessionTodosContainer.replaceChildren(...todoLiElements);
});

Try Editing It

How to auto-display the Local section’s previously added tasks on page reload or reopen

Whenever users reload or reopen the page,

1. Get existing local storage’s content, if any. Otherwise, return an empty array.
2. Use the retrieved content to create <li> elements.
3. Populate the tasks display space with the <li> elements.

Here’s the code:

window.addEventListener('load', () => {
  // Get existing local storage's content, if any. Otherwise, return an empty array:
  const localTodoArray =
    JSON.parse(localStorage.getItem('codesweetlyStore')) || [];

  // Use the retrieved localTodoArray to create <li> elements:
  const todoLiElements = createTodoLiElements(localTodoArray);

  // Populate the tasks display space with the todoLiElements:
  localTodosContainer.replaceChildren(...todoLiElements);
});

Try Editing It

How to check the total items in the browser’s session storage

Use session storage’s length property like so:

console.log(sessionStorage.length);

Try Editing It

How to display the local storage’s zeroth index item’s name

Use the local storage’s key() method as follows:

console.log(localStorage.key(0));

Try Editing It

How to empty the browser’s session storage

Use the session storage’s clear() method as follows:

sessionStorage.clear();

How to Continue Practicing with Web Storage 🧗‍♀️🚀

The to-do app still has a lot of potential. For instance, you can:

• Convert it to a React TypeScript application.
• Make it keyboard accessible.
• Allow users to delete or edit individual tasks.
• Allow users to star (mark as important) specific tasks.
• Let users specify due dates.

So, feel free to continue developing what we’ve built in this tutorial so you can better understand the web storage objects.

For instance, here’s my attempt at making the two panes functional:

Before we wrap up our discussion, you should know some differences between web storage and cookies. So, let’s talk about that below.

Web Storage vs. Cookies: What is the Difference?

Web storage and cookies are two main ways to store data locally within a user’s browser. But they work differently. Below are the main distinctions between them.

Storage limit

Cookies: Have 4 kilobytes maximum storage limit.

Web storage: Can store a lot more than 4 kilobytes of data. For instance, Safari 8 can store up to 5 MB, while Firefox 34 permits 10 MB.

Data transfer to the server

Cookies: Transfer data to the server whenever browsers send HTTP requests to the web server.

Web storage: Never transfers data to the server.

Note: It is a waste of users’ bandwidth to send data to the server if such information is needed only by the client (browser), not the server.

Weak integrity and confidentiality

Cookies: Suffer from weak integrity and weak confidentiality issues.

Web storage: Do not suffer from weak integrity and confidentiality issues because it stores data per origin.

Property

Cookies: Cookies are a property of the Document object.

Web storage: Web storage is a property of the Window object.

Expiration

Cookie: You can specify a cookie’s expiration date.

Web storage: Browsers determine web storage’s expiration date.

Retrieving individual data

Cookies: There’s no way to retrieve individual data. You always have to recall all the data to read any single one.

Web storage: You can choose the specific data you wish to retrieve.

The syntax for storing data

Cookies:

document.cookie = "key=value";

Web storage:

webStorageObject.setItem(key, value);

The syntax for reading data

Cookies:

document.cookie;

Web storage:

webStorageObject.getItem(key);

The syntax for removing data

Cookies:

document.cookie = "key=; expires=Thu, 01 May 1930 00:00:00 UTC";

The snippet above deletes the cookie by assigning an empty value to the key property and setting a past expiration date.

Web storage:

webStorageObject.removeItem(key);

Wrapping up

In this article, we discussed how to use web storage and its built-in interfaces. We also used a to-do list project to practice using the local and session storage objects to store data locally and securely within users’ browsers.

Thanks for reading!

And here’s a useful React TypeScript resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly book that takes you from zero to creating, testing, and publishing NPM packages like a pro.

Here are the main distinctions between them:

This handbook uses examples to explain the two animating techniques so that you can understand their similarities and differences.

Table of Contents

1. What Are CSS Transitions?
2. Categories of CSS Transition Properties
   • What Are the Required CSS Transition Properties?
   • What is the CSS transition-property?
   • What is the CSS transition-duration Property?
   • Examples of the Required CSS Transition Properties
   • What Are the Optional CSS Transition Properties?
   • What is the CSS transition-timing-function Property?
   • What is the CSS transition-delay Property?
   • Examples of the Optional CSS Transition Properties
3. Shorthand for Defining the CSS Transition Properties
4. What is CSS Animation?
   • Components of CSS Animations
   • What are CSS @keyframes?
5. What Are CSS Animation Properties?
   • What is the CSS animation-name Property?
   • What is the CSS animation-duration Property?
   • What is the CSS animation-timing-function Property?
   • What is the CSS animation-delay Property?
   • What is the CSS animation-iteration-count Property?
   • What is the CSS animation-direction Property?
   • What is the CSS animation-play-state Property?
   • What is the CSS animation-fill-mode Property?
6. What is the CSS animation Property?
7. Important Stuff to Know about CSS Transitions and Animations
8. Wrapping up

Without further ado, let's discuss CSS transitions.

What Are CSS Transitions?

CSS transitions provide a smooth and gradual way to change a specific CSS property's value.

So, instead of allowing browsers to change a property's value immediately, CSS transitions cause the change to happen smoothly over a specified period of time.

For instance, suppose you wish to change an element's size on hover. In that case, you have two options:

1. Implement the change without CSS transitions.
2. Use CSS transitions to transition smoothly from the element's initial size to its new state.

Let's see some examples of the two options.

How to change an image's size on mouse hover without using CSS transitions

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

Try Editing It

The code above instantaneously changes the image's size from its initial width (40%) to its new dimension (100%) because we did not use CSS transitions.

With CSS transitions, you will get a much more pleasing experience. Let's see an example below.

How to change an image's size on mouse hover with CSS transitions

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

Try Editing It

The transition property applied a smooth and gradual transition from width: 40% to width: 100% on the image.

Categories of CSS Transition Properties

We have two categories of CSS transition properties:

• Required transition properties
• Optional transition properties

Let's discuss the two.

What Are the Required CSS Transition Properties?

The two required properties you need to create CSS transitions are:

• transition-property
• transition-duration

What is the CSS transition-property?

The CSS transition-property specifies the CSS property you wish to transition from its initial to its new state.

What is the CSS transition-duration Property?

The CSS transition-duration property defines the length of time in which browsers should complete the selected element's transition. In other words, transition-duration sets the total start-to-finish time.

Note the following:

• The transition-duration property only accepts time in milliseconds (ms) or seconds (s).
• Zero seconds (0s) is the transition-duration's default value. Therefore, no transition event will occur if you do not define a transition-duration property.
• transition-duration accepts only a zero (0) or a positive numeric value. Browsers will ignore the duration declaration if you provide anything else.

Examples of the Required CSS Transition Properties

Below are some examples of the two required CSS transition properties.

How to transition an element's width within three seconds

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property tells browsers to transition the img's width from its initial value (40%) to its new state (100%).
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.

Therefore, instead of an instantaneous change from the image's initial width (40%) to its new size (100%), browsers will transition smoothly between the old and new state in three seconds (3s).

How to transition a font's size within five seconds

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the p element's font-size.
2. We used the transition-duration property to define a five-second (5s) duration from the start to the end of the transition.

Therefore, instead of an immediate change from the paragraph's initial font size (1rem) to its new size (7rem), browsers will transition smoothly between the old and new state in five seconds (5s).

Let's now discuss the optional CSS transition properties.

What Are the Optional CSS Transition Properties?

The two optional CSS transition properties are:

• transition-timing-function
• transition-delay

What is the CSS transition-timing-function Property?

The CSS transition-timing-function property defines the implementation timing (speed) of the selected element's transition.

In other words, the transition-timing-function specifies the speed for implementing the transition at various intervals of its duration.

The values the transition-timing-function property accepts are:

• ease: Starts the transition slowly. Then, speeds it up and ends it slowly. ease is the transition-timing-function property's default value. It is equivalent to cubic-bezier(0.25,0.1,0.25,1).
• ease-in: Starts the transition slowly with a gradual increase in speed. It is equal to cubic-bezier(0.42,0,1,1).
• ease-out: Starts fast and ends the transition slowly. It is equivalent to cubic-bezier(0,0,0.58,1).
• ease-in-out: Starts and ends the transition slowly. It is equal to cubic-bezier(0.42,0,0.58,1).
• linear: Starts and ends the transition using a consistent speed throughout the transition's duration. It is equivalent to cubic-bezier(0,0,1,1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-bezier curve.

What is the CSS transition-delay Property?

The CSS transition-delay property defines how long the browser should wait before it starts the transition.

Note the following:

• The transition-delay property must be in milliseconds (ms) or seconds (s).
• 0s is the transition-delay's default value. It causes the transition to start immediately from the moment browsers apply it to an HTML element.
• A negative value causes the transition to begin immediately from the specified time. For instance, suppose an element's transition-delay value is -3s. In that case, the transition will start immediately at 3 seconds.
• A positive value causes the transition to begin after the specified delay time has elapsed. For instance, suppose an element's transition-delay value is 3s. In that case, the transition will start after a 3-second delay.

Examples of the Optional CSS Transition Properties

Below are some examples of the two optional CSS transition properties.

How to transition an element's width with an ease-out speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. We used the transition-timing-function property to begin the transition quickly and end it slowly.

How to transition an element's width with a linear speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property tells browsers to transition from the element's initial width to its new size using a consistent transition speed throughout.

How to transition an element's width with a two-second delay

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width property.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property transitions the img element's width using a consistent transition speed.
4. We used the transition-delay property to apply a two-second (2s) delay to the starting time of the transition.

Now that we know the CSS transition properties, we can discuss defining them with a shorthand syntax.

Shorthand for Defining the CSS Transition Properties

We use the transition property as shorthand for the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

In other words, instead of writing:

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

You can alternatively use the transition property to shorten your code like so:

img {
  transition: width 3s linear 2s;
}

Try Editing It

Here is the transition property's syntax:

transition: <property-name> <duration> <timing-function> <delay>;

Note that you can use the transition property to transition the state of multiple CSS properties.

Here's an example:

img {
  width: 40%;
  opacity: 0.4;
  transition: width 3s linear, opacity 4s ease-out, transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

Try Editing It

The snippet above used commas (,) to separate each of the transitional properties we are applying to the img element.

So, now that we know what CSS transitions are and how they work, we can discuss CSS animations.

What is CSS Animation?

CSS animations provide a smooth and gradual way to animate an element's style changes from one keyframe to another.

Components of CSS Animations

CSS animations consist of two components:

1. Keyframes
2. Animation properties

What are CSS @keyframes?

@keyframes define the styles you want browsers to apply smoothly to an element at some specified key moments (frames).

Syntax of CSS @keyframes

A CSS @keyframes at-rule consists of the following:

1. An @keyframes keyword
2. The @keyframes' name
3. A block of zero or more keyframes
4. The animation's key moment selector
5. The key moment's style declarations

Here's an illustration:

A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

Examples of CSS @keyframes

Below are examples of the CSS @keyframes.

How to define change-color's keyframes

@keyframes change-color {
  /* The first keyframe */
  0% {background-color: purple;}
  /* The last keyframe */
  100% {background-color: yellow;}
}

Here's what we did in the snippet above:

1. We created the @keyframes at-rule named change-color.
2. We defined a keyframe for browsers to apply when an associated element's animation is at its zero percent (0%) duration.
3. We defined a keyframe for browsers to apply when an associated element's animation is at its one hundred percent (100%) duration.

Note:

• You can name your @keyframes anything you wish.
• 0% is equivalent to the keyword from. And 100% is the same as the keyword to. In other words, the snippet above is equal to the following:

@keyframes change-color {
  /* The first keyframe */
  from {background-color: purple;} 
  /* The last keyframe */
  to {background-color: yellow;} 
}

• An animation's start and end states (from and to) are optional.
• Suppose you omit an @keyframes' start (0%) or end (100%) state. In that case, browsers will default to the element's existing styles for either state.
• The important rule (!important) does not work in keyframes. Browsers will ignore any keyframe declaration with an !important rule.

Let's see another example.

How to define shape-image's keyframes

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Here's what we did in the snippet above:

1. We created the @keyframes ruleset named shape-image.
2. We defined four keyframes for browsers to apply when an associated element's animation is at the specified key moments.

Tip: Use the CSSKeyframesRule interface in JavaScript to access the CSS @keyframes at-rules.

So, now that we know the CSS @keyframes ruleset, we can discuss the other component of CSS animations—animation properties.

What Are CSS Animation Properties?

CSS animation properties inform browsers about the animation you wish to apply to a specific element.

In other words, CSS animation properties describe the animation's attributes, such as its name, duration, direction, and iteration.

The nine (9) types of CSS animation properties are:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode
• animation

Let's discuss each one now.

What is the CSS animation-name property?

The CSS animation-name property defines the name of the @keyframes at-rules containing the styles you wish to apply to a specific element.

Here's an example:

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. We created change-color's @keyframes ruleset.
3. We defined two keyframes for browsers to use when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Tip: You can use the keyword none to deactivate an animation.

What is the CSS animation-duration property?

The CSS animation-duration property defines the time to complete one animation cycle.

Note the following:

• The animation-duration property must be in milliseconds (ms) or seconds (s) units.
• animation-duration's value must be zero or positive. Otherwise, browsers will ignore the duration declaration.
• Zero seconds (0s) is animation-duration's default value.
• Suppose 0s is animation-duration's value. In that case, browsers will still execute the animation by firing the animationStart and animationEnd events. But the animation-fill-mode's value will determine whether the animation is visible. For instance, if you set the animation-fill-mode to none, the animation will be invisible.

Let's see some examples of the animation-duration property.

How to animate an element's color change within three seconds

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to three seconds (3s).
3. We created change-color's @keyframes ruleset.
4. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth three-second animation from change-color's first keyframe to its last.

How to animate an image's border and width changes within seven seconds

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the img element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We created shape-image's @keyframes ruleset.
4. We defined four keyframes for browsers to apply when the image's animation is at the specified key moments.

Therefore, browsers will create a smooth seven-second animation from shape-image's first keyframe to its last.

What is the CSS animation-timing-function property?

The CSS animation-timing-function property defines an animation's implementation timing (speed) throughout its duration.

In other words, the animation-timing-function property specifies the speed for implementing the animation at various intervals of its duration.

The values the animation-timing-function property accepts are:

• ease: Starts the animation slowly. Then speeds it up and ends it slowly. ease is the animation-timing-function property's default value. It is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
• ease-in: Starts the animation slowly with a gradual increase in speed. It is equivalent to cubic-bezier(0.42, 0, 1, 1).
• ease-out: Starts fast and ends the animation slowly. It is equivalent to cubic-bezier(0, 0, 0.58, 1).
• ease-in-out: Starts and ends the animation slowly. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1).
• linear: Starts and ends the animation using a consistent speed throughout the animation's duration. It is equivalent to cubic-bezier(0, 0, 1, 1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-Bezier curve.

Let's see some examples of the animation-timing-function property.

How to animate an element's width change using a linear speed

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. The linear timing function applied a consistent speed to the div's animation.
4. We created change-width's @keyframes ruleset.
5. We defined two keyframes for browsers to apply when the div's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

Let's see another example.

How to animate an element's width change using an ease-in-out and a linear speed

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.