The virtual DOM is a lightweight copy of the real DOM that allows React to manage changes more efficiently by minimizing the direct manipulation required on the real DOM. This process significantly enhances the performance of web apps.

Understanding the virtual DOM is essential for developers who want to get the best out of React. It plays a key role in how React updates the UI, ensuring that changes are applied quickly without unnecessary re-renders.

In this article, you'll learn:

• What the virtual DOM is and how it works
• How the virtual DOM compares to the real DOM
• Benefits of using the virtual DOM
• How React uses the virtual DOM
• How the virtual DOM compares to the shadow DOM
• Common misconceptions about the virtual DOM

What Is the Virtual DOM and How Does It Work?

The virtual DOM is an in-memory representation of the real DOM elements. Instead of interacting directly with the real DOM, which can be slow and costly in terms of performance, React creates a virtual representation of the UI components. This virtual representation is a lightweight JavaScript object that mirrors the structure of the real DOM.

Here's a step-by-step process of how the virtual DOM works:

1. Step 1 – Initial Rendering: when the app starts, the entire UI is represented as a Virtual DOM. React elements are created and rendered into the virtual structure.
2. Step 2 – State and Props Changes: as the states and props change in the app, React re-renders the affected components in the virtual DOM. These changes do not immediately impact the real DOM.
3. Step 3 – Comparison Using Diff Algorithm: React then uses a diffing algorithm to compare the current version of the Virtual DOM with the previous version. This process identifies the differences (or "diffs") between the two versions.
4. Step 4 – Reconciliation Process: based on the differences identified, React determines the most efficient way to update the real DOM. Only the parts of the real DOM that need to be updated are changed, rather than re-rendering the entire UI. This selective updating is quick and performant.
5. Step 5 – Update to the Real DOM: finally, React applies the necessary changes to the real DOM. This might involve adding, removing, or updating elements based on the differences detected in step 3.

For example, let's say we have the following counter functionality in the App component:

import React, { useState } from 'react';

function App() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <h1>Counter: {count}</h1>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}

export default App;

The virtual DOM representation will look like this:

{
 "type": "div",
 "props": {},
 "children": [
   {
     "type": "h1",
     "props": {},
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Counter: 0"
         }
       }
     ]
   },
   {
     "type": "button",
     "props": {
       "onClick": "setCount(count + 1)"
     },
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Increment"
         }
       }
     ]
   }
 ]
}

When the Increase button is clicked once, only the h1 element is changed:

{
 "type": "h1",
 "props": {},
 "children": [
   {
     "type": "TEXT_ELEMENT",
     "props": {
       "nodeValue": "Counter: 1"
     }
   }
 ]
}

Comparing the Virtual DOM to the Real DOM

To see the advantages of the virtual DOM, it's important to understand how it differs from the real DOM. The real DOM and the virtual DOM serve similar purposes but operate in distinct ways with significant implications for performance and efficiency.

The real DOM is a built-in standard interface in browsers that represents and interacts with HTML elements, from Doctype declaration and the root html element to every other element in it.

This real DOM represents the whole HTML document as a tree structure and allows JavaScript to manipulate and change HTML documents. Sometimes when those changes occur, the whole document might re-render.

This is in contrast to the virtual DOM, which uses a diff algorithm to compare the current and previous versions of updates to the DOM. It only re-renders the parts of the UI that have changed, instead of the whole thing.

Benefits of Using the Virtual DOM in Web Development

Simplified Development

The Virtual DOM lets you write code in a more declarative style. This means that instead of writing detailed instructions on how to update the UI, you can simply describe what the UI should look like, and React takes care of the rest. This is made possible by React's declarative syntax and its component-based architecture.

Improved Performance

One of the major advantages of using the virtual DOM is the significant performance improvement it offers. Direct manipulation of the real DOM is slow and can lead to performance issues, especially in complex applications.

Enhanced User Experience

The Virtual DOM contributes to a better UX by ensuring that UI updates are smooth, responsive, and without full-page refreshes. Users are less likely to experience lag or jank, resulting in a more seamless interaction with the app.

Cross-platform Development

The principles of the Virtual DOM are not limited to web development only. React Native – a version of React for building cross-platform mobile apps – uses a similar approach. This increases productivity and reduces development time because you can reuse code across web and mobile platforms

Common Misconceptions About the Virtual DOM

There are a few misconceptions about the virtual DOM. Let's look at five of these misconceptions and the realities of each of them.

The Virtual DOM Is a Browser Feature

Reality: the virtual DOM is an abstraction implemented by React, not a browser feature. Browsers have the real DOM, which is the standard way to represent and interact with HTML documents. The virtual DOM exists solely in memory within React and is used to optimize updates to the real DOM.

The Virtual DOM Replaces the Real DOM

Reality: The virtual DOM acts as an intermediary between React and the browser, not a replacement for the real DOM. The real DOM is still what the browser uses to render the UI, but the updates to it are managed through the Virtual DOM.

React is the Only Library and Framework that Uses the Virtual DOM

Reality: React only popularized the concept of the virtual DOM, it is not the only library or framework that uses it. Other frameworks like VueJS and SolidJS also use the virtual DOM to update the UI.

The Virtual DOM Solves All Performance Problems

Reality: The virtual DOM can significantly improve performance, but it is not a magical solution to all problems. Poor coding practices, unnecessary renders, and large component trees can still lead to performance issues.

The Virtual DOM and Shadow DOM Are the Same

Reality: The virtual DOM and shadow DOM are not the same thing. The virtual DOM is a lightweight copy of the Real DOM with which React optimize UI updates. On the other hand, shadow DOM is a browser technology used to encapsulate the styles and structure of web components.

Real DOM vs Virtual DOM vs Shadow DOM

Now that we've established that the virtual DOM, shadow DOM, and real DOM are not the same, let's look at the differences between the three of them.

Conclusion

As you've read in this article, the Virtual DOM is a key React feature that enhances performance and efficient UI updates. With this, React can batch updates, minimize reflows and repaints, and apply changes efficiently. This makes UI updates fast and smooth, providing a better user experience in the process.

Understanding the Virtual DOM and how it works can help you build performant React applications.

Learn React and Next JS

Want to discover more cool React features like the virtual DOM? Enroll in my React 18 course on Udemy! I'll guide you through the React world by creating a cool 2048 game with animations from scratch.

The problem with prop drilling is that, as the application grows in complexity, passing data through multiple levels of components can become messy, cumbersome, and error-prone.

The React Context API was released in 2018 to avoid prop drilling by simplifying state management and making sharing data across the component tree more efficient and error-free.

This article will explore the Context API, starting from understanding the need for it in React applications, to setting it up and using it effectively. We will also look at common use cases, compare it with other state management solutions, and discuss best practices to ensure you use the Context API to its full potential.

Understanding the Need for Context in React

Let's look at a basic example in which we have a ParentComponent that holds some count state, and you need to pass that state down to a deeply nested GrandchildComponent.

Here's the ParentComponent that holds the state and setState but not using them:

'use client';

import { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const [count, setCount] = useState(0);

 return (
   <>
     <div className="text-center mt-3">
       <h2 className="text-3xl">Parent Component</h2>
       <small>Not using the count state</small>
     </div>


     <ChildComponent count={count} setCount={setCount} />
   </>
 );
};

export default ParentComponent;

This is the ChildComponent that does not use the state and the setState too, but still has to take them from the ParentComponent and pass them to the GrandChildComponent that needs them:

'use client';

import GrandChildComponent from './GrandChildComponent';

const ChildComponent = ({ count, setCount }) => {
 return (
   <>
     <div className="text-center mt-3">
       <h2 className="text-3xl">Child Component</h2>
       <small>Not Using the count state too</small>
     </div>

     <GrandChildComponent count={count} setCount={setCount} />
   </>
 );
};

export default ChildComponent;

This is the GrandChildComponent that needs the state and setState, and uses them:

'use client';

const GrandChildComponent = ({ count, setCount }) => {
 return (
   <div>
     <div className="text-center mt-3">
       <h2 className="text-3xl">Grandchild Component</h2>
       <small>Using the count state</small>
     </div>
     <div className="text-center">
       <h3 className="text-2xl">Count is: {count}</h3>
       <button
         onClick={() => setCount(count + 1)}
         className="bg-pink-600 p-2 rounded text-white"
       >
         Increase Count
       </button>
     </div>
   </div>
 );
};

export default GrandChildComponent;

And here's what things look like in the browser once the ParentComponent is imported into the Home component of a Next JS project:

Prop drilling in React

That is prop drilling in action. You can see the ChildComponent that does not use the count state and the setCount still has to absorb both because they'll be used in the GrandChildComponent.

That is how you'll continue to pass the state around in the app. So what if you have components that are still deeper in the tree? Like GreatGrandChild and even GreatGreatGrandChild? Why does a parent have to bother their younger generation with their problems?

In larger applications, prop drilling can make the code harder to maintain and understand. Each intermediary component must be aware of the props it needs to pass down, even if it does not use them.

This is why the Context API exists to prevent this cumbersome prop drilling and make using state in deeply nested components less cumbersome and more straightforward.

How Does the Context API Work?

The Context API provides a means to share values like state, functions, or any data across the component tree without passing props down manually at every level. This is particularly useful for global data that many components need to access.

To start using the Context API, the first thing you need to do is to create a context using the createContext() method. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components. When the value prop of the Provider changes, all descendants that consume the context will re-render.

The Consumer allows any descendant component to use the context. It takes a function as a child, where the function argument is the current context value. In modern React, the useContext hook is often used instead of Consumer for better readability and simplicity.

How to Set Up a Context Provider

To show you how to set up a context provider, I will use the count state and setCount function from the prop drilling example.

Remember the first thing to do is to create a context using the createContext method. I'll do that in a context/counterContext.js file. This is the convention for naming a context file – functionalityContext.js or .ts.

These are the full steps for setting up a context provider:

• Import createContext and useState from React
• Create a CounterContext constant and set it to createContext
• Pass in the default values to createContext
• Create the CounterProvider component that'll take in children
• Define your state and setState
• Return a CounterContext.Provider that'll take in the count and setCount as the values of the value prop
• Pass in children – it represents everything to be nested when the Context is consumed
• Export CounterContext and CounterProvider

import { createContext, useState } from 'react';

const CounterContext = createContext({
 count: 0,
 setCount: () => {},
});

const CounterProvider = ({ children }) => {
 const [count, setCount] = useState(0);

 return (
   <CounterContext.Provider value={{ count, setCount }}>
     {children}
   </CounterContext.Provider>
 );
};

export { CounterContext, CounterProvider };

This same process applies the same way to any context you want to create.

How to Consume Context in React Components

To consume a context, the first thing you need to do is to import it and wrap it around the app.

For our small counter app, you can do that inside the layout file of a Next JS 14 project by importing CounterProvider from the counterContext file and wrapping it around {children} inside the body tag:

import { CounterProvider } from '@/context/counterContext';

export default function RootLayout({
 children,
}: Readonly<{ children: React.ReactNode }>) {
 return (
   <html lang="en">
     <body className={inter.className}>
       {/* Wrap the CounterProvider around the childre */}
       <CounterProvider>{children}</CounterProvider>
     </body>
   </html>
 );
}

Now, all pages and components will have access to the count state and setCount function.

Now, inside the GrandChild component where the count state and setCount function are being used, import useContext from 'react' and CounterContext from the counterContext file, then remove the props.

Also, pull out the count state and setCount from the CounterContext you imported like this:

const { count, setCount } = useContext(CounterContext);

You can leave the count and setCount as they are and things will work fine:

'use client';

import { useContext } from 'react';
import { CounterContext } from '@/context/counterContext';

const GrandChildComponent = () => {
 const { count, setCount } = useContext(CounterContext);

 return (
   <div>
     <div className="text-center mt-3">
       <h2 className="text-3xl">Grandchild Component</h2>
       <small>Using the count state</small>
     </div>
     <div className="text-center">
       <h3 className="text-2xl">Count is: {count}</h3>
       <button
         onClick={() => setCount(count + 1)}
         className="bg-pink-600 p-2 rounded text-white"
       >
         Increase Count
       </button>
     </div>
   </div>
 );
};

export default GrandChildComponent;

Everything still works fine:

Context API to mitigate prop drilling in React

Common Use Cases for the Context API

The Context API is versatile and can be used in various scenarios where managing state and sharing data across multiple components is necessary. Here are some common use cases:

• Global state management in medium to large apps: the Context API can handle global state management like cart items in an e-commerce app or the currently playing song in a music app.
• Authentication management: using the Context API and other solutions like it to manage the auth state is a common use case for it. States like the current user and auth tokens can be shared across the application using the Context API. This allows any component to access the user authentication status and perform actions like login and logout, or display certain items based on the state.
• Theme Management: Another popular use case for the Context API is theme management (dark mode and light mode toggles). You can do this by storing the theme state in a context, and then accessing and updating the theme in any component without having to pass props through multiple layers.

Other use cases are localization, user preferences like notification settings, open, close, and toggle states of a modal, API request management, breadcrumbs navigation, step progress, and any other point where the state is involved.

Comparing Context API with Other State Management Solutions

The Context API is one of several tools available for managing state in a React application. There are others like Redux and Redux Toolkit, Zustand, and MobX. Each of them has its own strengths and ideal use cases.

Redux

Redux is a third-party library that provides a predictable state container and follows the Flux architecture pattern. It requires more boilerplate code and has a steeper learning curve compared to the Context API.

This steeper learning curve has been significantly lowered by the introduction of Redux Toolkit – a simpler and more lightweight form of Redux.

Redux provides additional features like middleware, time-travel debugging with Redux Devtools, and tools for handling side effects. It is often considered more suitable for larger applications with complex state management needs.

Zustand

Zustand is an external library built on the Context API and hooks. It provides a lightweight API for managing global state in React apps by using a single store (or multiple stores when needed). It is more well-suited for small to medium React apps with moderate state management needs.

Zustand automatically handles updates, subscriptions, and efficient re-renders. It supports middleware, DevTools integration, time-travel debugging, and offers features like partial state updates, immutable updates, and selector functions.

MobX

MobX is another third-party library that uses observable data and reactions to manage state. It has a more imperative programming style compared to Redux's functional approach.

MobX is easier to learn and use for smaller applications just like the Context API. It provides features like computed values and automatic derivations.

Best Practices for Using Context API in React

If you want to use the Context API effectively, there are a few best practices to follow to ensure your application remains maintainable, performant, and scalable. Here are some guidelines and tips for using the Context API:

Always Provide Default Values

Providing default values can help you avoid undefined errors when a context is used outside its provider.

const UserContext = createContext({
 user: { name: 'Guest', age: null },
 setUser: () => {},
});

Don't Overuse Context

Overusing context can lead to performance issues and make state management harder to understand. Only use context for the global state that truly needs to be accessed by many components.

You can do this by creating multiple contexts for different parts of your application instead of a single, all-encompassing context.

const ThemeContext = React.createContext();
const AuthContext = React.createContext();

This reduces unnecessary re-renders and keeps the state management modular.

Avoid Frequent Updates

Use local state for frequently changing data. This is because frequent updates to context values can cause all consuming components to re-render, which might negatively impact performance.

const UserContext = createContext();

const UserProvider = ({ children }) => {
 const [user, setUser] = useState({ name: 'John Doe', age: 30 });
 const [isOnline, setIsOnline] = useState(true); // local state for a frequently changing data

 return (
   <UserContext.Provider value={{ user, setUser }}>
     {children}
   </UserContext.Provider>
 );
};

Use Custom Hooks to Encapsulate Logic

Endeavour to create custom hooks to encapsulate the logic for consuming context. This improves code readability and reusability.

const useUser = () => {
 const context = useContext(UserContext);
 if (!context) {
   throw new Error('useUser must be used within a UserProvider');
 }
 return context;
};

Memoize Context Values

Using the useMemo hook to memoize context values can help prevent unnecessary re-renders of consuming components.

const UserProvider = ({ children }) => {
 const [user, setUser] = useState({ name: 'John Doe', age: 30 });

 const value = useMemo(() => ({ user, setUser }), [user, setUser]);

 return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

Summary

In this article, we explored the Context API, starting with understanding its need and how it works. Using a counter example, we set up a Context Provider and consumed the context in a component to demonstrate its usage.

We discussed common use cases for the Context API and compared it with other state management solutions like Redux, MobX, and Zustand. Finally, we covered best practices for using the Context API effectively.

I hope everything covered in this article helps you get a hang of the Context API and how to use it in your React projects.

Learn React and Next JS

Wanna master more amazing React features like the Context API? Join my React and Next JS course on Udemy! You'll learn how to build the 2048 game from scratch and get insights into solving common mistakes React developers face every day.

P.S. It would mean the world to me if you decide to share this article on your social media.

With React's component-based architecture, there are a ton of options for styling. These include traditional CSS, utility-first approach, CSS-in-JS solutions, and more.

In this article, we'll explore various ways to style React components. We'll dive into the best practices for responsive and accessible design, and take a look at performance considerations to guide you in choosing the most effective styling approach for your projects.

How to Style React Components with Inline Styling

Every JSX element has a style property you can add to its opening tag. This means you can add inline styling to JSX in a React component like in traditional HTML.

The primary difference is that you must specify inline styles as objects. In this object, the keys are the CSS properties written in camelCase, and the values are strings corresponding to valid CSS values.

And because the stylings have to be an object, you have to add them inside two curly braces if you're passing them directly to the element:

<h1 style={{ textAlign: 'center', marginTop: '2rem', color: '#F43596' }}>
  Hello
</h1>

You can define the same styles as a separate object and pass it into the style property:

export default function Home() {
  const myStyles = {
       textAlign: 'center',
       marginTop: '2rem',
      color: '#F43596',
  };

  return (
      <main>
        <h1 style={myStyles}>Hello</h1>
       </main>
  );
}

If you want to handle conditional CSS with inline styling in React, you can use a combination of the useState hook and ternary operator:

'use client';

import { useState } from 'react';

const ConditionalInlineStyling = () => {
 const [isActive, setIsActive] = useState(false);

 const buttonStyle = {
   margin: '0 auto',
   backgroundColor: isActive ? 'green' : 'gray',
   cursor: isActive ? 'pointer' : 'not-allowed',
   color: 'white',
   padding: '0.6rem 1.2rem',
   border: 'none',
 };

 return (
   <div style={{ textAlign: 'center', marginTop: '2rem' }}>
     <button style={buttonStyle}>
       {isActive ? 'Active' : 'Inactive'}
     </button>
   </div>
 );
};

export default ConditionalInlineStyling;

Conditional inline styling in React

The advantage of using inline styling is that it's quick and scoped to an element, while the disadvantage is that it's limited in features, as you cannot directly handle pseudo-classes and pseudo-elements.

How to Use CSS Stylesheets in React

Using external stylesheets is a common styling approach in React because it's straightforward.

All you need to do is create a CSS file, define your styles in it, and then import the stylesheet into your React component.

But you import the stylesheet using the import keyword and then specify the relative path of the stylesheet, not with the link tag as you do in HTML.

import 'relative-path-to-css-file.css'

I have moved the inline styling for the ConditionalInlineStyling component into a separate CSS file and imported it into the page like below:

'use client';

import { useState } from 'react';
import '@/styles/styles.css'; // Import the CSS file


const ConditionalStyledComponent = () => {
 const [isActive, setIsActive] = useState(false);

 return (
   <div className="container">
     <button
       className={`button ${isActive ? 'button-active' : 'button-inactive'}`}
     >
       {isActive ? 'Active' : 'Inactive'}
     </button>
   </div>
 );
};

export default ConditionalStyledComponent;

Everything still works fine:

Conditional styling with CSS file in React

The advantage of using traditional stylesheets to style React components is that it's easy to start with, and the only learning curve is how you import it into a component.

How to Use CSS Modules for Component-Specific Styling

CSS Modules offer a powerful solution for writing component-specific styles in React. They let you scope styles to individual components, thereby letting you avoid naming conflicts and simplifying style maintenance.

If you're using Next JS or any other popular React framework, you don't need any additional steps to start using CSS modules.

To use CSS modules in React, create a file with the .module.css extension. For example, styles.module.css. You then need to import the file into your component with the import keyword and a name you want, for example, styles or classes, followed by the relative path of the CSS modules file:

import styles from 'relative-path-to-css-modules-file.module.css';

The name you choose is now an object, the keys are the classes in the CSS modules file and the values are the respective properties in the class.

To use a class from the CSS modules file, you scope the choice import name (style or classes) to a class name. For example <div className={styles.container}>.

I have moved all the styles for the ConditionalInlineStyling component into a CSS modules file I call styles.module.css. Here's how I imported and used it:

'use client';

import { useState } from 'react';
import styles from '@/styles/styles.module.css'; // Import the CSS modules file

const ConditionalStyledComponent = () => {
 const [isActive, setIsActive] = useState(false);


 return (
   <div className={styles.container}>
     <button
       className={`${styles.button} ${
         isActive ? styles.buttonActive : styles.buttonInactive
       }`}
     >
       {isActive ? 'Active' : 'Inactive'}
     </button>
   </div>
 );
};

export default ConditionalStyledComponent;

Tailwind CSS and Utility-First Styling in React

Tailwind CSS is a utility-first CSS framework that accelerates styling directly in your markup.

Tailwind does this by offering a comprehensive set of pre-defined utility classes. Instead of writing custom CSS and importing them, you apply the classes to your JSX or HTML elements, minimizing the need for custom CSS.

You can add Tailwind CSS to a Next JS starter by selecting Tailwind in the prompts after running npx create-next-app@latest and everything will be set up for you.

create-next-app CLI tool asking to enable Tailwind CSS

Or you can add Tailwind to an existing project by running the commands below:

$ npm install tailwindcss
$ npx tailwindcss init

You'll then need to do the configuration yourself, according to your needs. After that, make sure you have the following directives in your globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

I have rewritten the ConditionalInlineStyling component to show you what using Tailwind CSS looks like:

'use client';

import { useState } from 'react';

const ConditionalStyledComponent = () => {
 const [isActive, setIsActive] = useState(true);

 return (
   <div className="text-center mt-8">
     <button
       className={`px-4 py-2 ${
         isActive
           ? 'bg-green-600 text-white cursor-pointer'
           : 'bg-gray-500 text-white cursor-not-allowed'
       }`}
     >
       {isActive ? 'Active' : 'Inactive'}
     </button>
   </div>
 );
};

export default ConditionalStyledComponent;

Conditional styling with Tailwind CSS in React

Tailwind CSS is great because it doesn't have a steep learning curve and is the best option for quick prototyping. Other utility-first frameworks are Bootstrap, Bulma, and Chakra UI.

How to Style React Apps with CSS-in-JS

CSS-in-JS is a styling approach in which CSS is written in JavaScript, allowing you to style your components using JavaScript syntax.

This method offers a more dynamic and modular way to manage styles, making it easier to handle themes, scoped styles, and both pseudo-classes and pseudo-elements.

styled-components is the most Popular CSS-in-JS library. Others are Emotion and styled-jss.

To use styled-components, you first need to add it to your project by installing it with NPM or any other package manager:

npm install styled-components

You then need to import styled from styled-components:

import styled from 'styled-components'

To define styles for an element or a whole component, you have to define a component and assign it to styled.element-name, then define the styles you want inside the backticks.

For example, the syntax below will create styles for a Button component you can use directly:

const Button = styled.button `
  /* CSS styles go here */
`;

Here's how I have rewritten the component to use styled-components:

'use client';

import { useState } from 'react';
import styled from 'styled-components';

const Button = styled.button`
 background-color: ${(props) => (props.isActive ? 'green' : 'gray')};
 color: white;
 padding: 0.6rem 1.2rem;
 border: none;
 cursor: ${(props) => (props.isActive ? 'pointer' : 'not-allowed')};
 transition: background-color 0.3s;
`;

const Container = styled.div`
 display: flex;
 justify-content: center;
 align-items: center;
`;


const ConditionalStyledComponent = () => {
 const [isActive, setIsActive] = useState(false);

 return (
   <Container>
     <Button isActive={isActive}>
       {isActive ? 'Active' : 'Inactive'}
     </Button>
   </Container>
 );
};

export default ConditionalStyledComponent;

To use pseudo-classes with styled-components, use the & sign to represent the current component, then specify the pseudo-class, for example, :hover.

Here's how I did it:

'use client';

import styled from 'styled-components';

const Button = styled.button`
 background-color: green;
 color: white;
 padding: 0.6rem 1.2rem;
 border: none;
 transition: background-color 0.3s;


 &:hover {
   background-color: crimson;
   cursor: pointer;
 }
`;

const Container = styled.div`
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 2rem;
`;

const Hover = () => {
 return (
   <Container>
     <Button>Hover me</Button>
   </Container>
 );
};

export default Hover;

Hover animation using styled-components

Best Practices for Responsive and Accessible Design

Use Responsive Units Everywhere Necessary

Using responsive units like percentages (%), em, rem, and viewport units (vw and vh) instead of fixed units like px helps your layout adapt fluidly to different screen sizes.

Percentage values allow elements to scale relative to their container, making it easier to create fluid layouts.

Units like em and rem are based on font size, ensuring that elements scale proportionally to the text size. This is particularly useful for responsive typography, where relative units allow text to scale based on user settings and preferences.

Viewport units (vw and vh) are relative to the viewport size, making them ideal for creating elements that scale with the browser window.

Use Media Queries for Responsive Design

Media queries are foundational to responsive design, as they let you apply different styles based on the device screen size.

By using media queries, you can create breakpoints at specific screen widths and heights to adjust your layout, font sizes, and other styles.

Like traditional CSS, CSS-in-JS libraries like styled-components and Emotion support media queries within their syntax, allowing you to define responsive styles directly in your JavaScript files.

Take Advantage of Flexbox and Grid

The CSS Grid and Flexbox algorithms revolutionized responsive design. If you're not using them, you're missing out on a cool CSS feature.

CSS Grid allows you to create complex grid-based layouts that adjust automatically to different screen sizes. This makes it easy to define areas of your layout that should expand or contract.

Flexbox provides a flexible box model that can rearrange and resize items dynamically.

With CSS grid and Flexbox, you can create responsive navigation bars, form layouts, and other UI components that adjust gracefully as the user resizes the screen.

Use Sufficient Color Contrast for Readability and Accessibility

Color contrast between text and background is vital for readability and accessibility. High contrast improves readability and ensures that content is accessible to a wider audience.

Analyzing color contrast visually is not an easy task, that's why there are tools like the WebAIM Color Contrast Checker to help you verify that your color choices meet the necessary contrast ratios.

Performance Considerations for Styling React Components

Avoid Inline Styles for Large Components

The convenience that comes with using inline styles can trick you into using it everywhere.

Excessive inline styles can lead to performance issues because they are recalculated on every render. This potentially causes unnecessary reflows and repaints.

In large components, consider using CSS classes or CSS-in-JS libraries that generate static class names, which are more efficient and easier for the browser to handle.

Minimize and Optimize CSS Files

Because large CSS files can increase the load time of your application, you should consider minimizing your CSS by removing unused styles and compressing the file size.

Tools like CSS Nano and PurgeCSS let you compress and minimize CSS files. These tools strip out unnecessary CSS rules, reducing the overall size and improving load times. Additionally, consider splitting your CSS into smaller, component-specific files that can be loaded on demand.

Use CSS-in-JS with Caution

When a component renders, CSS-in-JS libraries generate and inject styles, which can become costly if overused. To reduce this, use static styles whenever possible and avoid excessive use of dynamic styles that rely on props or state. Also, consider using the CSS helper or styled function judiciously to keep styles efficient.

Use Simple and Efficient Selectors

Deeply nested selectors or overly generic selectors can slow down the browser's rendering engine. Aim for simple and efficient selectors that target specific elements or classes. This practice reduces the time the browser spends matching elements to styles.

Conclusion

React is agnostic of the styling approach you use. That's why it offers a range of styling methods for various needs. Each approach offers unique advantages for creating responsive and accessible designs.

Choosing the appropriate styling method should align with your project requirements and personal preferences. By looking at the strengths of each method, you can develop performant, maintainable, and visually appealing apps that serve a diverse user base across multiple devices.

Learn React and Next JS

Do you want to master React so you can start building real-world applications? Then join my React and Next JS course on Udemy today! I'll teach you React with hands-on coding by building an exciting 2048 game from the ground up, complete with stunning animations!

This article covers how to set up event handlers and proceeds to more elegant techniques for event management. You'll learn how to create events in React components, pass arguments to the handlers, and prevent default behaviors.

We'll also cover common event handling patterns and best practices to ensure your applications are performant and easy to maintain.

Basic Principles of Event Handling in React

Event handling in React is guided by a few basic principles that align with its component-based architecture. These principles include:

• Synthetic event system
• Naming conventions
• Passing event handlers as props
• Inline function and component methods

React uses a synthetic event system that ensures events behave consistently across different browsers. This wraps the native event system in browsers, providing a unified API regardless of the browser in which React is run.

Naming conventions revolve around a set of consistent naming that developers use for identifying events and the handler functions at a glance. Every event uses a camelCase naming convention, and the handler function they run is prefixed with "handle", followed by the event name. For example, an onClick event running a handleClick function.

Event handlers are the functions that run when the event is fired. They're usually defined before the render, just above the return statement. On many occasions, they are also passed as props to components. This aligns with React component-based architecture, allowing event logic to be embedded within the components using them.

In React components, events typically run inline functions or standalone functions within the component when fired. With this, you can utilize hooks like useState for state and useCallback for memoizing handler functions. This helps manage state changes and optimize performance.

How to Create Event Handlers in React Components

Creating an event in React starts with attaching the event name to the element that will fire it, with the handler function referenced in it:

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

What follows is to define that handler function, because it's the function that will run when the event is triggered:

const handleClick = () => {
   alert('You clicked me');
};

This is the full code that has been imported into the page.jsx file of a Next.js starter:

'use client';

const Counter = () => {
 const handleClick = () => {
   alert('You clicked me!');
 };

 return (
   <div className="p-10 flex items-center">
     <button
       onClick={handleClick}
       className="bg-green-400 px-4 py-2 rounded mx-auto"
     >
       Click me
     </button>
   </div>
 );
};

export default Counter;

And here's what shows in the browser when the button is clicked:

Next.js application displaying alert window

You can also trigger the event without a separate function. You can do this by defining the function to run as an anonymous function inside the event:

<button onClick={() => alert('You clicked me!')}>
  Click me
</button>

If you want to update the component state based on an event, you might need the useState hook. Here's an example that shows that using a simple counter application:

'use client';

import { useState } from 'react';

const Counter = () => {
 const [count, setCount] = useState(0);

 return (
   <div className="flex items-center justify-center space-x-8 p-10">
     <button
       onClick={() => setCount(count - 1)}
       className="bg-red-500 hover:bg-red-600 text-white font-bold px-4 py-2 rounded "
     >
       Decrement
     </button>
     <p className="text-4xl font-semibold text-gray-800">{count}</p>
     <button
       onClick={() => setCount(count + 1)}
       className="bg-green-500 hover:bg-green-600 text-white font-bold px-4 py-2 rounded "
     >
       Increment
     </button>
   </div>
 );
};

export default Counter;

Counter App in Next.js (Animated GIF)

onChange and onSubmt are other popular events in React. onChange is used on input elements and onSubmit is used on a form element.

Here's an example of an onChange event:

'use client';

import { useState } from 'react';

const MyInput = () => {
 const [inputValue, setInputValue] = useState('');

 const handleChange = (e) => {
   setInputValue(e.target.value);
 };

 return (
   <div>
     <input
       type="text"
       value={inputValue}
       onChange={handleChange}
       className="border border-green-400 p-2 rounded shadow"
       placeholder="Type something..."
     />
     <p className="mt-4 text-green-400">You typed: {inputValue}</p>
   </div>
 );
};

export default MyInput;

Handling input changes in React

We'll look at an example of an onSubmit event in the section on how to prevent the default browser behavior when submitting a form.

Other examples of events include keyboard events like onKeyDown, onKeyPress, and onKeyUp, mouse events like onMouseUp, onMouseDown, onMouseEnter onDrag, and more. Any popular event in JavaScript is available in React. The only difference is that events are written in camelCase in React.

How to Pass Arguments to Event Handlers

Passing arguments to event handlers in React is a common requirement when you need to perform actions on specific data associated with an event. For example, deleting or editing a resource.

To do this, the handler function needs to take in a parameter:

const handleClick = (item) => {
   console.log('Button click for:', item);
 };

You then pass an argument corresponding to that parameter into the anonymous function of the event:

<button onClick={() => handleClick(item)}>Click Me</button>

Here's an example handling task deletion in a TaskManager component:

'use client';

import { useState } from 'react';

const TaskManager = () => {
 const [tasks, setTasks] = useState([
   { id: 1, text: 'Read an article' },
   { id: 2, text: 'Read a book' },
   { id: 3, text: 'Write an article' },
   { id: 4, text: 'Code' },
 ]);

 // Function takes a a taskId parameter
 const deleteTask = (taskId) => {
   setTasks((currentTasks) =>
     currentTasks.filter((task) => task.id !== taskId)
   );
   console.log('Deleted task with ID:', taskId);
 };

 return (
   <div className="p-5 max-w-md mx-auto bg-gray-100 rounded-lg shadow">
     <ul className="list-none space-y-2">
       {tasks.map((task) => (
         <li
           key={task.id}
           className="flex justify-between items-center bg-white p-3 rounded shadow-sm"
         >
           {task.text}
           <button
             // onClick event takes a task.id argument to account for the taskId parameter of the function
             onClick={() => deleteTask(task.id)}
             className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded"
           >
             Delete
           </button>
         </li>
       ))}
     </ul>
   </div>
 );
};


export default TaskManager;

Item delete is a great example of parametrized event handler

Common Event Handling Patterns in React

Event handling patterns refer to the techniques for handling user interactions within React components.

These patterns include but aren't limited to:

• Binding event handlers with useCallback to memoize the handler
• Event handlers with parameters (you've seen this in the section on how to pass arguments to event handlers)
• Conditional event handling
• Event delegation
• Event bubbling
• Optimized handling for lists
• Inline arrow functions (anonymous functions that you pass into event handlers)

Here's an example using useCallback to prevent creating a new function on every render:

'use client';

import { useCallback } from 'react';

function HandlerComponent() {
 const handleClick = useCallback(() => {
   console.log('Button clicked');
 }, []);

 return (
   <button onClick={handleClick}>
     Click Me
   </button>
 );
}

export default HandlerComponent;

And here's an example of conditional event handling:

'use client';

import { useState } from 'react';

function CheckLogin() {
 const [isLoggedIn, setLoggedIn] = useState(false);

 const toggleLogin = () => {
   setLoggedIn(!isLoggedIn);
 };

 const handleLogin = () => {
   if (isLoggedIn) {
     console.log('User is logged in');
   } else {
     console.log('User is logged out');
   }
 };

 return (
   <div>
     <h2 className="text-3xl text-center mb-4">
       {isLoggedIn ? 'User is logged in' : 'User is not logged in'}
     </h2>
     <button
       onClick={handleLogin}
       className="bg-green-400 hover:bg-green-500 px-2 py-3 rounded mr-3"
     >
       Check Login
     </button>
     <button
       onClick={toggleLogin}
       className="bg-green-400 hover:bg-green-500 px-2 py-3 rounded"
     >
       {isLoggedIn ? 'Log Out' : 'Log In'}
     </button>
   </div>
 );
}

export default CheckLogin;

Next.js app checks if user is logged-in

How to Prevent the Default Browser Behavior in Event Handlers

Default browser behavior is the automatic actions the browser performs when a specific event is fired. In event handling, the most common default browser behavior is that it refreshes when a form is submitted.

To prevent the browser from refreshing when a form is submitted, or prevent any other default behavior, pass the event parameter into the function handling the onSubmit event, then use that event to call a preventDefault function.

const handleSubmit = (event) => {
 // prevent the default behavior
 event.preventDefault();
};

return (
 // reference the function in onSubmit
 <form onSubmit={handleSubmit}>
   <input
     type="text"
     value={inputValue}
     onChange={handleInputChange}
     placeholder="Enter something..."
   />
   <button type="submit">Submit</button>
 </form>
);

Best Practices for Efficient Event Handling in React

Here are the most important rules for event handling in React:

Avoid Using Anonymous Arrow Functions Inside Events

It looks convenient to use arrow functions directly in events, like onClick={() => console.log('button clicked')}). The downside to this is that it can lead to performance issues because a new function is created on every render.

Always define the handler function to run when the event is fired outside the render method to avoid those performance issues.

Memoize Events with useCallback hook

For components that re-render often, memoizing the handlers in it with the useCallback hook can prevent unnecessary re-renders. This is useful when passing events as props to child components that might re-render unnecessarily.

Use Event Delegation

For multiple similar elements, like items in a list, consider using event delegation. Attach a single event listener to the parent element and use the event target to handle user interaction with child elements. This reduces the number of event listeners and can improve performance.

Prevent Default Behavior Where Necessary

Use event.preventDefault() in your event handlers when you need to stop the browser from performing default actions, like submitting a form. However, you should use this method prudently to avoid blocking browser behaviors unnecessarily.

Clean Up Event Listeners

If you set up your event listeners in useEffect, always return a cleanup function to remove the event listener. Otherwise, it'll cause memory leaks.

Test Event Handlers

Make sure your event handlers are covered in your unit and integration tests. Testing frameworks like Jest combined with React Testing Library can help verify that your event handlers are functioning as expected.

Conclusion

In this article, you learned the fundamentals of event handling in React, focusing on how to use the React synthetic event system to create events in React web apps.

We explored defining event handlers, passing arguments, and preventing default browser behaviors to enhance user experiences.

In addition, you learned about the benefits of using useCallback to optimize event handlers for efficient performance under various user interactions.

With these insights, you should be able to implement event handling in your projects, so you can improve both functionality and user engagement.

Bring your React skills to the next level

Would you like to learn more about event handling or other React concepts? Then join my React course on Udemy. I will show you how to become a better React developer by building a 2048 Game. Building games make learning more fun and enjoyable.

So join now and start your journey to mastering React!

This is where the React Developer Tools, AKA React DevTools comes into play. It allows you to inspect and debug your React applications by providing access to the components, states, hooks, props, what renders what, and more.

This article will show you how to use React DevTools by focusing on components, props, and state inspection. We'll also examine how to use it to enhance application performance.

For demonstration, we'll use the 2048 game code. You can grab it in this GitHub repository.

How to Install React Developer Tools

Installing the React developer tools extension for your browser is the most common way to use it.

If you use Chrome, visit the Chrome Webstore and search for "React", then select "React Developer Tools" and click the "Add to Chrome" button to install it.

React Devtools in Chrome Web Store

React DevTools is also available as a standalone electron app, an NPM package, and an add-on for both Edge and Firefox browsers. If you use the Safari browser, consider using the NPM package.

If you use the extension on Chrome but want to migrate your data to either Edge and Firefox, it will be automatically installed for you!

How to Navigate the React Developer Tools Interface

After installing the DevTools as an extension, open your browser console and you should see two additional tabs – Components and Profiler.

Google Chrome with React DevTools extension

The Components tab displays a tree view of the components in your application. It also gives you access to the hooks and props in each component.

Components tab in React DevTools

The Profiler tab allows you to analyze the runtime performance of your applications and identify costly re-renders or performance bottlenecks. From there, you can import and export recorded performance sections and see how long a component renders or why it re-renders.

Profiler tab in React DevTools

If you click the gear icon on the right side in any of the tabs, you should see a pop-up with 4 tabs – General, Debugging, Components, and Profiler.

React DevTools settings

In the 4 tabs, you can adjust settings related to theme, display, debugging options, component filters, and recording settings for the profiler.

How to Inspect React Components with DevTools

In the Components tab, you can select a component and inspect it, just like you'd do with HTML elements in a traditional browser's dev tools.

To do that, click the select icon on the top-left corner, then select any part of the app to see the component that represents it:

Inspecting components in React DevTools

As you make changes that involve adding something, new components will be added to the tree.

Live component updates in React DevTools

On the right-hand side in the Components tab are the props, hooks, renderer, and the source for any component you select in the tree.

Component details in React DevTools

How to Explore Component State and Props

Remember that when you select a component in the tree, the state and props in that component are available on the right-hand side.

In the screenshot below, I have selected a Tile component for you to see the props:

Tile component selected

You can see that the Tile component has id, position, and value properties. From here, you can add a new prop and edit the existing props.

For example, I just changed a value prop from 2 to 4 and it reflected in the UI in real-time:

change value from 2 to 4

You can also make changes to a piece of state. For instance, the scorecard you can see in the UI is a piece of state in the GameProvider context. It updates your score as you play the game.

You can select the GameProvider context, look for the score state, and change it to something else:

Change score state

How to Debug React Applications with React DevTools

The traditional browser developer tools is good for debugging your HTML, CSS, and JavaScript code, but it has limitations concerning debugging React applications.

This is the primary reason React DevTools was created in the first place, as it has the essential built-in features that can show you everything you need to debug your React apps.

One of the errors the browser can help you debug is a reference error. For instance, if there's an error in any of your components, the browser can show you the error message and the line affected.

For example, I've forced an error by changing cells to cell on line 62 in the board.tsx file of the app. This is what the error message looks like in the browser:

Reference Error in React 19

You can then go to the line of code where the error occurred and make the necessary adjustments so the app can run again.

React DevTools also shows you a reference error and the component in which it occurs.

Reference Error in React DevTools

How React DevTools Takes Debugging to the Next Level

In the Components tab, above the items on the right-hand side, are iconized buttons you can use to:

• Force the selected component to an errored state
• Inspect the matching DOM element
• Suspend the selected component
• Log the component data to the console
• View the source code for the elements in the selected component

Component utilities in React DevtTools

For example, if the tiles in the game are not showing as they should, it's probably a styling issue.

Unstyled tiles in 2048 Game

This particular error will not stop your app from running, so the best way to debug it is to use React DevTools instead of looking through your code, especially if it's large.

You can select the Tile component and log its data to the console. When you do this, the props, hooks, and nodes of that component will be logged for you.

Utility allowing to log component data to the console in React DevTools

To see the component's data, you have to switch to the console tab and inspect the nodes to see what might have gone wrong.

Component data printed in the console React DevTools

In the image above,it shows that there is a div element with an undefined className. This tells you that you've misspelt a className value, so you need to go back to your code and correct it.

If the error you're getting has to do with props or hooks, then you need to open up any of them to see what went wrong.

You can also look through the source code of any component causing an issue. For instance, if the scoreboard is not showing as it has to, select the component and click the "View source code for this element" icon.

View source of this component utility in React DevTools

After the source code is displayed, you can step through the end of each line. Any line end that is red when you do that is the one causing the error.

You can then go back to your editor and make the necessary changes on that line.

Performance Analysis with React DevTools

Doing performance analysis with React can help you understand the efficiency of your application and identify any performance bottlenecks. This is what the Profiler tab lets you do.

To do this, switch to the Profiler tab and click the "Start profiling" icon to start recording.

Record button in the Profile tab of React DevTools

Perform the actions in your app you want to analyze. This could be page loads, user interactions like button clicks, swiping, or dynamic content loading. When you're done, click "Stop" to end the recording.

The Profiler will then display a flame graph and a list of commits. Each commit represents a render phase of your React application. Components that take longer to render will have wider bars.

You can then select a specific commit to view detailed information about the render performance of components during that commit:

Profiling results in React DevTools

You can also download the profiling session, or import a profiling session. This means you can share the session with your teammates.

Common Issue and Solution: How to Fix React DevTools Not Showing

If DevTools fails to show up, it could be because it doesn't have access to the React sites you're viewing in the browser.

To fix this, type chrome://extensions/ into the address bar and hit enter, then search for the extension and make sure it's toggled on.

How to enable React DevTools extension in Google Chrome

If that doesn't fix the issue, click the "Details" button and make sure you grant an "On all sites" access under the "Site access" option

How to change extension's site access settings in Google Chrome

Conclusion

From inspecting the component hierarchy and modifying state and props to profiling performance and understanding complex re-renders, React Developer Tools offers a comprehensive set of features that can improve the quality of your React applications.

Whether you're a beginner aiming to have a better understanding of the inner workings of React, or an experienced developer looking to optimize your applications, investing the time to master React Developer Tools will be profitable in your development processes.

Learn React and Next JS

Are you ready to dive deep into React and start creating real-world applications? Enroll in my React and Next JS course on Udemy! You'll learn through hands-on coding as we build an incredible 2048 game from scratch with cool animations.

Join now and start your journey to becoming an employable React developer!

Click to get started

That's why you should learn how to use CSS variables to reduce the amount of CSS code you write and take your styling to a new level.

The most successful web apps have spectacular designs. Unfortunately, to reach the desired effects, web developers need to prepare large amounts of styles. This forces us to repeat values, such as colors, in many different elements.

Fortunately, modern stylesheets support CSS variables, which lets you reduce repetition in your codebase. You don't need external tools such CSS modules, Less or SASS to take advantage of it.

In this comprehensive guide, I'm going to show you how to effectively use CSS variables, covering basic examples in plain HTML and CSS to more advanced frameworks like React and Next.js.

Prerequisites

This guide is dedicated to beginners so you don't need any special knowledge to benefit from it.

I included a few examples in React and Next.js and they are dedicated to beginner React developers. Only those examples will require basic React knowledge to understand them. Feel free to skip them if you don't work with React.

What are CSS Variables?

CSS variables (officially called CSS custom properties) allow developers to manage and reuse values in CSS stylesheets. Web developers can define reusable variables that can use be used across many CSS files, making code easier to update. CSS variables make it super easy to implement features such as dark mode.

Modern websites require large amounts of styles and this results in repeated CSS values in many different stylesheets. The ecosystem was working hard to address this issue by inventing tools such as SASS, Less and CSS modules but all of those tools have a flaw – they need to be compiled to CSS files in the end.

Fortunately, thanks to CSS variables, we can simplify our stylesheets without sophisticated tools and build processes.

How To Create CSS Variables

Defining a CSS variable is quite simple. You can define a CSS variable using the -- prefix followed by a name of your choice, then assigning it a value using the var() function.

Here's how you do it:

:root {
  /* Backgrounds */
  --primary-background: #faf8ef;
  /* Colors */
  --primary-text-color: #776e65;
}

As you can see, I defined CSS variables inside the :root pseudo-class to make them globally available.

Each variable started with --, followed by a name: --primary-background or --primary-text-color. Lastly, I assigned values to those variables.

Using this, I'll be able to change website colors just by modifying the values of those variables.

How To Use CSS Variables

Now let me show you how to use CSS variables to define global background and text color for your website:

body {
  margin: 0;
  background: var(--primary-background);
  color: var(--primary-text-color);
}

To use a variable, you need to refer to them by using the var() function and passing the variable name as an argument.

That's it! Now your website is using CSS variables to render styles.

Note: var() helper is a built-in CSS function so you don't need any libraries to use it.

How To Use CSS Variables in React?

Many web developers build their web apps in React so I will show you how you can get values and update CSS variables in React. Many modern web apps support dark mode and this feature can become one of a React developer's nightmares.

Next, I'll show you an easy method to add a dark mode in React apps just by using CSS variables.

How To Set the Value of CSS Variable in React?

Changing the value of CSS variables in React might be tricky since React doesn't offer any tools to directly interact with the DOM tree. That's why we'll use plain JavaScript to read and set CSS variables.

Here's how you can set a CSS Variable in React:

import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    document.documentElement.style.setProperty('--primary-background', `black`);
    document.documentElement.style.setProperty('--primary-text-color', `white`);
  }, [])

  return <div style={{color: "var(--primary-text-color"}}>Hello World</div>
};

As you can see, I took advantage of the global document variable to get into the DOM tree and modify style properties. I used setProperty method that requires two arguments:

• CSS custom property (CSS variable) name.
• The value of the variable.

Note: It doesn't matter if you work in React or plain JavaScript, you can always call document.documentElement.style.setProperty to modify CSS variable values. It's a JavaScript built-in function.

How To Get the Value of CSS Variables in React?

Sometimes you might need to read the value of a CSS variable and store it in React. In this case, I would suggest utilizing useState and useEffect hooks.

Here's how I would approach this issue:

import { useEffect, setState } from 'react';

export default function Example() {
  const [color, setColor] = useState('black');

  useEffect(() => {
    const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color');
    setColor(cssColor);
  }, [])

  return <div style={{color: color}}>Hello World</div>
};

As you can see, I retrieved the value of a --primary-text-color variable to the cssColor constant. In the next line, I updated component's state by using setColor helper created by useState hook. Using the method, my CSS variable can be used easily in React Components.

That's it. Now you can use this variable in your React app.

Conclusion

CSS variables can be used in different kinds of websites and no JavaScript is needed to take advantage of them. Everybody can benefit of them – no matter their level of experience in web development. Understanding CSS variables can greatly improve your styling experience and make you more efficient.

I hope you liked this article. It would mean the world to me if you share it on your social media.

If you have any questions or just want to hear updates from me, you can find me on Twitter.

Learn React

If you are still learning React or you want to learn more tricks like this one, you should join my course on Next.js. Next.js is the most popular React framework that powers the most of React app these days. I will teach you how to use it by building an awesome 2048 game with animations. No fluff. Tactics only.

🚀 Join my Next.js Crash Course.

This course includes:

• 🎥 5.5 hours on-demand video
• 📱 Access on mobile and TV
• 🗓️ Full lifetime access
• 🎓 Certificate of completion

Click to get started

But when a project is managed by multiple developers, the focus shifts into consistency especially in terms of written code.

Keeping a consistent code style and formatting across many team members and project is a challenging task. It's almost impossible to do it manually, but that's where Prettier comes into play.

In this guide, you will learn how to install Prettier in Visual Studio Code and how to use it to format code.

Prerequisites

Before you follow this guide, you will need to download and install Visual Studio Code.

What is Prettier?

Prettier is a powerful code formatter that automates this process from start to finish. It gives you confidence that your code adheres to defined coding standards without any manual actions (unless you want to have it manual).

Prettier not only supports all JavaScript libraries and frameworks, such as Angular, React, Vue, and Svelte, but also works with TypeScript.

That's why it is used by many people in tech worldwide.

How To Install Prettier in Visual Studio Code

To install Prettier in Visual Studio Code, you need to:

1. Open the Extensions tab.
2. Type prettier in the search box.

Visual Studio Code / Extensions

At the top of the list you will find the Prettier - Code formatter extension. You need to open it, and click the Install button:

Visual Studio Code / Extensions / Prettier - Code Formatter

After the successful installation you will see the text saying "This extension is enabled globally":

Visual Studio Code / Extensions / Prettier - Code Formatter (Installation completed)

How To Activate Prettier in Visual Studio Code

When your Prettier extension is installed, you need to configure Visual Studio Code to take advantage of it. You can do in the Settings tab.

Side node: to open the Settings tab, you can use COMMAND + , on macOS or CTRL + , on Windows and Linux:

Visual Studio Code / Main view

At the top of the Settings tab you will find a search box. Now, you need to type formatter, and then Editor: Default Formatter will pop up on the settings list:

Visual Studio Code / Settings

Now, open the dropdown and select Prettier - Code formatter from the list:

Visual Studio Code / Settings / Default Formatter

Now, Prettier is your default code formatter, but you might want to enable Visual Studio Code to automatically format code when you save files.

If you want to, just tick the checkbox in the Format On Save section:

Visual Studio Code / Settings / Format On Save

How To Format Code with Prettier in Visual Studio Code

Let's take a look at one React component I created:

Visual Studio Code / Unformatted React 18 Component

As you can see, this code is completely misaligned, it misses semicolons, and it is very difficult to read. The code could formatted in a better way, right? Here's where Prettier comes into play.

To format code, we need to open the command palette – you can use COMMAND + SHIFT + P on macOS or CTRL + SHIFT + P on Windows and Linux.

Now, you need to find Format Document. Feel free to use the search box:

Visual Studio Code / Format Document command

After running Format Document your code becomes neat and clean:

Visual Studio Code / Formatted React 18 Component (with Prettier)

Conclusion

Integrating Prettier into Visual Studio Code is a game-changer for developers striving to maintain a consistent and high-quality codebase.

By automating the formatting process, you are not only adhering to coding standards but are also reducing the struggle that comes with manual code formatting. That's why every developer should use Prettier to ensure consistency in their codebase.

I hope this article helped you a lot. It'd mean the world to me if you shared it on your social media.

If you have any questions you can reach me on Twitter.

Learn React

Looking for a practical course to learn React?

🚀 Join my React 18 Course on Udemy.

This course includes:

• 🎥 5.5 hours on-demand video
• 📱 Access on mobile and TV
• 🗓️ Full lifetime access
• 🎓 Certificate of completion

Click below to enroll.

Click to get started

I'll discuss the features and benefits of using the React Testing Library to test your React applications and how to configure it with Next.js. To conclude this tutorial, I will show you how I tested the board of my 2048 game.

To understand this guide, you don't need any deep knowledge, but it will be easier to learn if you know React basics. The ultimate goal is to set up tests for your Next.js apps, so understanding React will give you a smooth start with testing.

Let's get started!

Why Does Testing Matter?

To become a React developer, and increase your changes of finding a job, you need to learn about testing for several reasons:

First, testing confirms that your React application works as expected. It allows you to catch bugs and errors in the early stages of development before your company gets calls from angry customers.

Testing also allows you to refactor your code with confidence by ensuring that your changes don't break existing features. Without testing in place, after each refactoring you would need to manually click through your application to double-check. This would be so tedious and time-consuming.

Developers with decent testing skills are always more in-demand because they know how to design and build quality applications that can be maintained for many years.

What is React Testing Library?

React Testing Library is a group of testing utilities designed to help you esure the correctness of your React and Next.js projects.

React Testing Library homepage

It doesn't matter if your project is written in TypeScript and uses React or Next.js – you can always take advantage of React Testing Library to test your application. It's easy to use and reduces the amount of code you need to write to prepare test cases.

React Testing Library was designed to simplify your life as a developer and help you write tests that don't make you frustrated. Your tests will only break when your app breaks, not its implementation.

The best part is that React Testing Library isn't limited to unit tests. You can use it to prepare integration tests, end-to-end (E2E tests), and many others. That's why it is such a powerful tool.

How to Set Up React Testing Library with Next.js

Using React Testing Library with Next.js is a very simple process. You only need four things:

1. An existing Next.js project
2. Jest and React Testing Library installed with npm
3. Jest configured in your Next.js project
4. To write your first test

Sounds simple, doesn't it?

The quickest way to create a new Next.js application is by typing npx create-next-app@latest in your command line. You will need to answer a few questions and the application will be automatically created for you.

If you have an existing Next.js project, you just need to install the testing suite using npm:

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

In this guide, we'll use the Jest testing suite to execute tests which is a fairly common tool built by Facebook. If you wish to replace Jest with something else, you can easily use Vitest, Playwright, or Cypress – just check out the Next.js docs for more details.

To configure Jest in Next.js, you need to create a jest.config.js file in your project root and paste the following content in (it's a boilerplate):

// file: jest.config.js
const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"], // <= setup file here 
  testEnvironment: "jest-environment-jsdom",
};

module.exports = createJestConfig(customJestConfig);

As you can see, the config file requires us to create one more file to make our tests work. This setup file will be included before every test and we'll use it to import React Testing Libary in every test so we don't need to do it manually.

Let's create the setup file now. It must be called jest.setup.js and should contain the following line:

// file: jest.setup.js
import "@testing-library/jest-dom";

The configuration of your testing suite is almost complete.

How to Create the npm test Command

To finish configuration of our testing suite, we need to create an npm test command and link it with Jest and React Testing Library. We'll do that in package.json by adding a test command onto the scripts section:

{
  "name": "2048-in-react",
  "version": "0.2.0",
  "homepage": "https://mateuszsokola.github.io/2048-in-react/",
  ...,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch" // <== HERE
  },
  ...
}

Now whenever you run the npm test command you will run the testing suite:

Empty test summary.

The testing suite works, but the tests are still missing. This makes sense because we haven't created any tests yet.

How to Test Components using React Testing Library

Before we write our first test, let's create a directory where we'll store them. By default, tests are stored in the directory called __tests__. This name seems strange but it has a good reason to have double underscore pre- and postfixes. Thanks to these, your test directory will be always at the top of your project tree.

Next.js project tree with the test directory at the top (place 1)

Now we are ready to create your first test.

We could make a random empty test that tests nothing, but I would rather use a real world example. Let's take one test from my 2048 game (here's the source code) – I picked one that ensures the game board is rendered correctly.

If you don't know the 2048 game, I will only tell that it is played on the 4 x 4 board. It means the game board needs have 16 cells (4 x 4 = 16).

Now let's create a new file called board.test.jsx in the test directory __tests__:

// __tests__/compontents/board.test.jsx
import { render } from "@testing-library/react";
import Board from "@/components/board";

describe("Board", () => {
  it("should render board with 16 cells", () => {
    const { container } = render(
      <Board />
    );
    const cellElements = container.querySelectorAll(".cell");

    expect(cellElements.length).toEqual(16);
  });
});

As you can see, this test is rendering the board and checks that there are 16 DOM elements that have a cell class. Nothing more than that. If the number of cells is different, this test will fail.

Let's take a brief look into the terminal. It's all green and that means our test was implemented properly and it's passing:

Your first successful test

What's Next?

Congratulations! Now you know how to set up one of the most popular testing libraries for React. I think it'll help you bring your Next.js application to a whole new level in terms of quality.

If you know how to build React apps, now you should double down on testing because this skill will help you to land your first job.

I hope this article helped you a lot. I'd mean the world to me if you share it on your social media.

If you have any questions you can reach me on Twitter.

Learn React & Next.js

Learning Next.js can be intimidating and often frustrating. Most online courses are focused on React and Next.js features rather than building applications. That's why I created a course that will help you to learn React and Next.js while build a magnificent 2048 game from scratch!

I believe learning should be fun and unleash creativity. Would you rather build yet another TODO list instead of an awesome game?

You can join my React and Next.js course on Udemy and build the 2048 game along with me.

It’s the only course you need.

Click to enroll

As always, we'll work on a real world example and solve problem I stumbled across while building my 2048 Game in React. All the code snippets are inspired by this project. If you want to review the code before reading this article, you can find it on GitHub.

The 2048 Game

Let me explain the rules of the 2048 game first. The player must combine tiles that have the same numbers until they reach the number 2048. The tiles can contain only numbers that represent a power of two starting from 2 – this means 2, 4, 8, 16, 32, and so on – until they reach the number 2048. The board has dimensions of 4 x 4 tiles, so that it can fit up to 16 tiles.

Here's an example:

2048 Game Preview

In this article, I will only teach you how to render arrays in React and show you some best practices when comes to rendering lists in React components.

Unfortunately, we cannot create the entire game because it would make this article confusing. But if you want to do it from scratch, you should consider enrolling to my course on Udemy where I will walk you through creating the 2048 Game with animations in React 18.

Prerequisites**

Before we start, make sure you know some basics of React. Nothing sophisticated – just be sure you've worked with React before, otherwise you might feel a bit lost.

If you don't yet know React, freeCodeCamp has a 5-hour React course for beginners so feel free to watch it before reading this article. You can also enroll in my React 18 course.

Now let's get started.

How to Render Array Elements

As I mentioned at the beginning, the game board has dimensions of 4 x 4 tiles. That means the best data structure to store tiles on the board will be a multidimensional array, like the one you see below:

const board = [
    [0, 0, 0, 0],
    [2, 0, 0, 0],
    [2, 0, 0, 0],
    [0, 0, 0, 0],
]

Unfortunately, this data structure will be expensive, since it requires nested loops iterating across each other. That's why I decided to flatten this array into a one-dimensional one:

const tilesOnBoard = [0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0]

As you can see, there are a lot of empty elements in this array, and it gives room for further improvements. We can reduce the amount of operations by replacing tile values with objects containing tile information.

For example, you can introduce a new type to store the meta data of every tile like this:

type TileModel = {
  position: [number, number];
  value: number;
};

As you can see, this data type makes tiles smart. Every tile will know its position and value. I decided to store the position as an array of two elements. These elements will represent x and y coordinates. Rather than pixels, I will use array indices on the board array I mentioned in the first step.

Now let's improve the tilesOnBoard array and make it store only existing tiles without empty values:

const tilesOnBoard = [
    { position: [1, 0], value: 2 },
    { position: [2, 0], value: 2 },
]

Thanks to this simplification, I can render tiles by using the simple map functor that will iterate through all array elements and create Tile components out of them.

const renderTiles = () => {
  return tilesOnBoard.map((tile: TileModel, index: number) => (
    <Tile key={index} {...tile} />
  ));
};

Let's focus on the second argument of the map functor for a moment. As you can see, it uses the item index of the tilesOnBoard array. I am using it as a key property to initialize React components – in this case Tile components.

If you've never used key props, React needs keys to identify which elements have changed, are added, or are removed. Keys should be assigned to every item inside the array of components.

That's why I assigned array indices to all tiles. Unfortunately, array indices aren't the best unique identifiers, as you can see below:

Strange behavior when array indices are used as key props

It might be hard to spot what's happening here, so let me briefly explain. Basically, React is reusing existing HTML elements to render new tiles. This isn't an intended behavior – instead, I should have removed merged tiles and created a new tile after every move.

But why is this happening? After the tiles are getting merged, a new tile is created, and that means the array still has two elements with the same array indices.

React uses a mechanism called the Virtual DOM to detect changes and modify elements on the DOM tree. Unfortunately, this mechanism is optimized for speed so that it doesn't analyze the entire component but only the key prop. This means React cannot differentiate the new tile creation from a style change on an existing div element. That's why we are experiencing this issue.

To confirm that my reasoning is right, let's take a brief look at the Element tab in Chrome DevTools:

DOM Element reusability due to array indices used as key props

As you can see, two existing div elements only changed their style attributes but nothing was added or removed. This isn't an intended behavior, but it tells us that array indices are poor unique identifiers for React components.

If you aren't familiar with Chrome Developer Tools, you should read my article on implementing mobile touch events in React 18 where I do a deep dive on how to use it.

Unique Identifiers As Key Props

To fixing array rendering problems in React, we'll need to use some unique identifiers such as incremental ids, uuids, or others. To focus on the essentials, I decided to use a library called uid, which you can install by running the following in your terminal:

npm install --save uid

Now I need to modify tiles to support those identifiers. First, I added a new property id in the tile meta data type:

type TileModel = {
  id: string;
  position: [number, number];
  value: number;
};

And I assigned an id to every element in the tilesOnBoard array (here's where the uid library comes into play):

const tilesOnBoard = [
    { id: uid(), position: [1, 0], value: 2 },
    { id: uid(), position: [2, 0], value: 2 },
]

The last thing I did was to change the renderTiles helper:

const renderTiles = () => {
  return tilesOnBoard.map((tile: TileModel) => (
    <Tile key={tile.id} {...tile} />
  ));
};

As you can see, I removed an index argument from the map functor, and replaced the key prop with an unique id which I added to the tile meta data.

Now the 2048 game works like a charm:

Conclusion

In this article, you learned that indices aren't the best option to render arrays of components in React and that they might lead to strange behaviors. If there is only one thing you should remember from this article it's that you should always use unique identifies as the key prop of React components.

Wanna learn more tricks like this one? You should join to my React 18 course on Udemy. I will teach you how to create 2048 game in React from scratch and show you solutions to the most common mistakes React developers make.

Prerequisites

Before we start, you need to have some basic command line knowledge. Nothing sophisticated, but make sure you've used it before reading this article otherwise you might feel a bit lost.

What Is NVM?

Node Version Manager (NVM) is a command-line utility that enables you to manage multiple installations of Node.js and easily switch between them.

Whether you need to work on projects requiring different Node.js versions or want to experiment with the latest releases without affecting your existing setups, NVM provides an easy way to do so.

Why Do You Need Multiple Node Version?

Nowadays, companies often build their application in the microservice architecture. This means that applications tend to be divided into many smaller services, where every service has its dedicated role.

It might sound like an over-engineering but there are a few benefits from this approach. In some cases, companies decide to build their applications using micro services to reach high availability and allow deployments without downtime. In the end, they can deploy one service at a time.

This approach also has downsides related to complexity and managing multiple projects. Imagine that your application is divided into many micro services, where the first one was built over 5 years ago.

The service is likely running on a legacy version of Node.js. In an ideal world, you would have to upgrade Node version to the newest version but it isn't always possible. In the end, the users' satisfaction comes first, and if they need new features, their needs must be fulfilled first.

Sometimes, a new feature might require you to introduce a new micro service. In this case, you should always try to use the newest Node version available. I will show you how to install multiple Node versions on your machine.

But I Am a Front End Developer

You'll still need NVM as a front end developer.

Nowadays, every JavaScript library and framework requires Node runtime and that's why you should manage Node versions for the frontend projects as well. The example project we will be using in this article is built in React 18 & Next.js.

Let's get started.

How to Install NVM on Linux and Mac

Installation on Linux and Mac is ultra simple.

Just open your terminal and run the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

This script will configure NVM on your machine and you will be able to use immediately. Nothing else is required.

Just try to run nvm command in your terminal, and you should see the following output:

nvm command output

If you see something like nvm: command not found then you can run these commands:

source ~/.bashrc
source ~/.zshrc

It's expected that one of them fails. This commands will reload you bash / zsh profile and enable NVM in your command prompt.

How to Install NVM on Windows

You can easily install NVM on Windows – just open the nvm-windows repository on GitHub, scroll down to the Assets section, and download the nvm-setup.exe file.

NVM Windows repository

Now the installer file will be downloaded. Once the download is completed, double-click on the nvm-setup.exe file and follow the instructions:

NVM for Windows Installer by Corey Butler

After the installation, open PowerShell and run nvm command, you should see the following output:

NVM in PowerShell by Corey Butler

If nvm command returns command not found you should restart your computer to refresh your user settings.

How to Set Node Version For Your Project

Now, we are reaching the root of this guide – setting dedicated Node version for your project.

First, create a .nvmrc file in your project root folder and specify the expected Node version.

It is 20.10.0 in my case:

Node version in .nvmrc file

Now open your terminal and navigate to your project and run the nvm use command. NVM will automatically load the expected Node version by your project.

nvm use command

If you don't have the expected version on your machine, you'll be prompted to install it:

prompt to install node version

In this case, you need to install required Node version by running nvm install x.y.z. Replace x.y.z with the expected Node version. It was 20.10.0, in my case.

Conclusion

Working on multiple projects can be a hassle, especially when they require different Node versions. However, with NVM, changing the Node version is as quick as blinking an eye.

You should always use it, whether you're working alone on your personal project or with multiple colleagues on a large enterprise application.

If this article helped you, please share it on your social media or give me a shout-out on Twitter. Thank you!

Learn React 18 & Next.js

This article is a part of my React and Next.js course on Udemy. I will help you to get started with React and Next.js by creating a 2048 Game with awesome animations. I believe creating games makes learning more fun, and you'll have something cool to show your friends.

👇👇👇👇

🧑‍🎓 Enroll to my course on Udemy

Today I will help you create your first custom hook and explain how they can improve your codebase.

Why Create Custom Hooks?

You might be wondering – why would I even want to create new React hook? In the end, React has all the essential hooks in place and anything else seems slightly excessive. That's true React comes with many powerful hooks, but did you know that custom hooks can improve the quality of your code?

Imagine you have a piece of React code that's used across many components. As a programmer, you don't want to repeat yourself, and you make repeated code reusable as much as possible. That's why it's a good idea to wrap those snippets into utilities, components, or custom hooks.

Crafting your own hooks will not only simplify your components, but also significantly reduce the size of your codebase. Remember, less code typically means better readability and lower code complexity, too.

I hope I have you "hooked" now – pun intended.

🛠️ Prerequisites**

Before you read this guide, you need to be familiar with React. Don't get me wrong – you don't need to be an expert, but some understanding of the basics are necessary.

If you don't feel like a strong enough React dev, you might consider enrolling in my Udemy course where you will learn React 18 by creating a 2048 game from scratch. You can find more details and a discount code at the end of this tutorial.

Also, you can check out this free tutorial where you'll learn the key concepts you need to get started with React.

🪝 Your First Custom Hook – usePreviousProps

In my articles, I'm always trying to use real world examples – and this guide will not be any different. We will create a hook responsible for tracking previous values of component props. This means we will build a custom hook called usePreviousProps from scratch.

One of the most common use cases for a hook like this is when you're dealing with animations. For instance, imagine that you need to highlight a newly created element. How could you determine if it's new without comparing current values to previous ones? That's where our new hook comes into play.

The benefits of a custom hook like ours might be a bit vague, but it's a really powerful tool. Literally, the custom usePreviousProps hook we'll create today is used in some of my open source projects, and even a few production-grade apps I've built. So you can be sure this hook has a real use case, and it only takes 12 lines to implement.

Now let's get our hands dirty!

🪚 How to Create a Custom Hook

First, we need to create a new file in the hooks directory of your project – I decided to call it use-previous-props.js.

Keep in mind that React hooks rarely use JSX syntax (HTML), which is why we are using the .js extension. If you need to enable JSX syntax need to change the extension to .jsx. But think twice before doing this – if you really need JSX, you should probably crate a standalone component instead of a hook.

// file: hooks/use-previous-props.js

import { useEffect, useRef } from "react";

export default function usePreviousProps(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

As you can see, our hook is very similar to a regular functional component. The only difference is the return statement – it returns a JavaScript value instead of an HTML element.

React hooks often return values, functions, or both. For example, the useState hook returns an array with two elements: the current state value and a function to update that value.

Now let me explain how the usePreviousProps hook actually works:

• const ref = useRef() is used to persist the reference across re-renders of the component. In our case, we will use it to store the previous value.
• The useEffect hook will update ref.current value whenever the component re-renders. This means that when value changes, the ref.current value will be updated to store the most recent value of the prop. Importantly, all of this happens after the component finishes rendering, so it stores the previous value during the re-render.
• return ref.current returns the value from the ref reference.

Now our custom usePreviousProps hook is ready to use!

😎 How to Use a Custom Hook

Last week I published the tutorial How to Create Animations in React 18.

If you didn't read my last tutorial, it includes the custom usePreviousProps hook to create highlighting animations:

Highlighting animation

Here is the code responsible for this animation:

export default function Tile({ value }) {
  const [scale, setScale] = useState(1);

  const previousValue = usePreviousProps(value);
  const hasChanged = previousValue !== value;

  useEffect(() => {
    if (hasChanged) {
      setScale(1.1);
      setTimeout(
          () => setScale(1), 
          100 /* 100ms == 0.1s */
      );
    }
  }, [hasChanged, setScale]);

  const style = {
    transform: `scale(${scale})`
  };

  return (
    <div className="tile" style={style}>
      {value}
    </div>
  );
};

Let's focus on this line: const previousValue = usePreviousProps(value).

Here, previousValue contains the previous value for this component. If it's a new component it returns undefined.

On the next line, the hasChanged constant helps determine if the component should be highlighted. If it's new and returned undefined earlier, it triggers the highlighting animation.

A few lines later, I declared the useEffect hook that will check if a component has changed its value. If that happened, React will execute the highlighting animation.

🏁 Summary

Today you've learned that React hooks are fairly similar to functional components. The only difference is their output, where they return JavaScript values, arrays, or functions rather than JSX elements.

As you can see, creating custom hooks isn't rocket science, and I hope I've inspired you to experiment and create one of your own.

If this article helped you, please share it on your social media or give me a shout-out on Twitter. Thank you!

🏫 Would You Like to Build Your Own 2048 Game?**

If you want to improve your React skills, consider joining my online course on Udemy. I will help you to get started with React 18 by building a fully-functional 2048 Game. I believe creating games makes learning more fun, and you'll have something cool to show your friends.

Also, I'm giving a 50% discount for freeCodeCamp readers. Just use the code 50DISCOUNT to enroll.

👇👇👇👇

🧑‍🎓 Join my React 18 course on Udemy

What you'll learn:

• How to build 2048 game with React 18 and Next.js.
• Essential React hooks such as useState, useRef, useCallback, useEffect, and many more.
• Managing state using Reducer and React Context.
• How to create responsive mobile apps that support touch events (like mobile swiping).
• Integrate TypeScript into your React projects.
• Testing React apps.

Well today I'll show you how you can create awesome CSS animations in React 18.

As always, we'll work on the real world example but we'll just focus on the animations only to avoid confusion. If you want to see the final results applied to a proper application, then don't worry. I've attached the source code of a pet project so feel free to play with it.

Before we start, I need to give you some context – I designed those animations for my 2048 Game in React. This game is a part of my online course on Udemy but I will tell you more about it at the end of this article.

You can find the source code on GitHub. Here's the final result of what we'll be creating:

All animations of 2048-in-react

🛠️ Prerequisites**

Before we start, make sure you know some basics of React and CSS. It would be great if you are familiar CSS transitions but it isn't necessary. Actually I'm hoping this article will encourage you to go down that rabbit hole on your own. Believe me – nothing is more rewarding than users admiring your work.

Also, you don't need any tools, but if you want to run the example project on your computer, then you will need to install Node.js first.

🕹️ Quick Introduction

If you aren't familiar with the 2048 game, here's the gist: the player must combine tiles containing the same numbers until they reach the number 2048. The tiles can contain only numbers that represent a power of two starting from 2 – this means 2, 4, 8, 16, 32, and so on. The board has dimension of 4 x 4 tiles, so that it can fit up to 16 tiles.

Let me briefly show you what animations I prepared for the game's users:

The first animation is supposed to visualize the tile movement.

The "tile sliding" animation

The game would look janky if tiles disappeared and popped up in different places. CSS transitions help make the movement smooth for users.

The second animation highlights tile creation and their merges.

The "tile highlighting" animation

This animation helps users spot tiles that are changed after the movement.

I think that's all I need to tell you about the project. Let's get our hands dirty!

🌟 How to Create the Highlighting Animation

We'll start with the animation responsible for highlighting changes. I must admit I had a hard time to find a "beautiful" way to visualize it. The main objective was to bring the user's focus to tiles that changed their values or were created. I decided to rescale those tiles because it didn't want the animation to be too "intrusive".

So how is this going to work? First, we'll increase the size of the tile to 110%. Once the tile reaches 110% of its original size, we will downscale it back to 100%. The entire animation will last 0.2s (0.1s upscale, 0.1s downscale). I think that's enough to show the user's updated elements.

We can accomplish this animation using the following CSS transitions:

.tile {
  // ...
  transition-property: transform;
  transition-duration: 100ms;
  transform: scale(1);
}

Brief explanation of those CSS properties:

• transition-property – defines the property on which the transition will be applied. In our case, we want to animate the transformation – the change of the element's size.
• transition-duration – defines transition duration. In our case – 0.1s.
• transform – this property allows us to rotate, scale, skew, or translate an element. Side note: the scale(1) means 100%, and we will use it as a default value.

The CSS transition is ready. Now we need to implement rescaling in React.

export default function Tile({ value }) {
  const [scale, setScale] = useState(1);

  const previousValue = usePreviousProps(value);
  const hasChanged = previousValue !== value;

  useEffect(() => {
    if (hasChanged) {
      setScale(1.1);
      setTimeout(
          () => setScale(1), 
          100 /* 100ms == 0.1s */
      );
    }
  }, [hasChanged, setScale]);

  const style = {
    transform: `scale(${scale})`
  };

  return (
    <div className="tile" style={style}>
      {value}
    </div>
  );
};

Let me briefly explain this code:

1. It sets the initial scale using the useState hook. By default, it's 1 to reflect 100% of the tile size.
2. We take advantage of the usePreviousProps hook to retrieve the previous value of the tile. If the tile is freshly created, the previous value will be undefined.
3. The useEffect hook plays a key role in our animation – it's checking if the tile's value has changed. If yes, it will scale it up to 110% and after 0.1s it will set it back to 100%.
4. The style constant is used to inject inline CSS attributes into the div element.

And the result is the following:

Tile creation (aka "hightlighting")

🛝 How to Create the Sliding Animation

The second animation is responsible for tile movements. I hope you agree with me that users might feel confused if they can't trace tiles moving across the board. After every move they would need to analyze the entire board again. It'd be a poor user-experience.

Let's think about how we can fix it. We could definitely take advantage of CSS properties responsible for positioning, such as left and top. If we follow this approach, we need to add a few additional CSS transitions. Let's do it.

.tile {
  position: absolute;
  // ...
  transition-property: left, top, transform;  // added: left, top
  transition-duration: 250ms, 250ms, 100ms; // added: 250ms, 250ms
  transform: scale(1);
}

Once we've declared the transitions, we can implement the logic responsible for tile movement.

export default function Tile({ value, position }) {
  // ...
  const boardWidthInPixels = 464; 
  const tileCount = 4;

  const positionToPixels = (position) => {
    return (position / tileCount) * boardWidthInPixels;
  };    

  const style = {
    top: positionToPixels(position[0]),
    left: positionToPixels(position[1]),      
    transform: `scale(${scale})`
  };

  // ...
};

As you can see, the equation in the positionToPixels function needs to know the position of the tile, the total number of tiles per row and column, and the total board length in pixels (width or height – same, it is a square). The calculated value is passed down to the style constant which we passed down to the div element in the previous step.

The result is the following:

Animation for tile movement

🏁 Summary

Adding CSS transitions into your React project may seem intimidating at first but it really isn't. As you can see, just a few lines of code significantly improved the user-experience of my game.

Keep in mind that while animations can indeed improve user experience, they can also ruin it. Always aim to find the right balance when you are applying them. It takes some practice, and that's why I hope this article encouraged you to experiment on your own.

The best way to learn is by practicing and learning from others. That's why you should check the source code on my 2048 Game on Github. Don't forget to give it a star 🌟 . It's the easiest way to bookmark it in your profile so you never lose it.

If this article helped you, please share it on your social media or give me a shout-out on Twitter. Thank you!

🏫 Would You Like to Build Your Own 2048 Game?

As I told you at the beginning, I created an online course on Udemy where I teach how to create a fully-functional 2048 Game in React 18. I'm giving 50% discount for freeCodeCamp readers. Just use the code 50DISCOUNT to enroll.

🧑‍🎓 Join my React 18 course on Udemy

What you'll learn:

• How to build 2048 game with React 18 and Next.js.
• Essential React hooks such as useState, useRef, useCallback, useEffect, and many more.
• Managing state using Reducer and React Context.
• How to create responsive mobile apps that support touch events (like mobile swiping).
• Integrate TypeScript into your React projects.
• Testing React apps.

I created this course because I believe programming should be fun and unleash creativity. Rather than build yet another TODO list or a shopping cart, let's create something that you can show to your friends or maybe even a hiring manager!

The most difficult part is building the navigation – and swiping in particular can cause a lot of headaches. There are libraries you can use to help with this, but why not build it on your own?

In this tutorial, I will teach you how to create your own mobile swiping component in React. You can do it in 50 lines of JavaScript.

Initially, I created this component for my pet project, the 2048 Game in React, and have now decided to share how I did it.

If you want to try it out before reading the whole article, you can play the game here (use your mobile device). In this tutorial, we will focus on mobile swiping only.

You can find the following resources on GitHub:

• 📱 Source code of the component
• 🕹️ Source code of 2048 Game

Here is the sneak peak (the quality isn't the best because I was trying to keep the size small):

The final result in my pet project

Table of Contents:

1. Prerequisites
2. How to Simulate a Mobile Device in Your Browser
3. The MobileSwiper Component
4. Let's Make it Swipable
5. Summary

🛠️ Prerequisites

Before we start, make sure you know a little bit about React and JavaScript. You don't need any sophisticated tools, but if you want to run the example project on your computer, then you will need to install Node.js first.

Also, I'm using Google Chrome to simulate a mobile device on my computer. Keep in mind that if you use any different browser, then the steps might be slightly different.

🔍 How to Simulate a Mobile Device in Your Browser

Before we start coding, I need to show you how to simulate a mobile device in Google Chrome.

Open your browser, right click on your page, and choose "Inspect" from the dropdown menu.

How to open Developer Tools in Google Chrome

Your browser view should now be split into two parts. The second part contains Chrome's Developer Tools.

Now, click on the "laptop & mobile" icon (1 in the image below) in top left corner of the Developer tools. Then select the "Dimensions" (2) of the device you want to simulate. I chose iPhone SE because this device has the smallest resolution supported by my game.

Choose device dimensions in Developer Tools (Google Chrome)

Now we are ready to simulate swiping by using our mouse or touchpad. Just pay attention to the GIF below – my cursor turned into a circle which is supposed to visualize the area covered by a person's finger.

When I try to swipe, my browser thinks I am actually scrolling through the website. In my case, this isn't an expected behavior. I would like to instead use swipes to play the game.

By default, scrolling events are associated with swipes

🤓 The MobileSwiper Component

First, we need to create a mobile-swiper.jsx file. In this file, we declare a standard React component. Our component needs to accept two properties – children and onSwipe.

export default function MobileSwiper({ children, onSwipe }) {
    return null   
}

Let me briefly explain them:

• children allows MobileSwiper to accept and render any content placed between its opening and closing tags. It enables you to inject the entire board inside this component – but we will get to this later.
• onSwipe is a callback that our component will trigger each time the user swipes within the "swipable" area.

Let's define the swipable area now. First, you need to add a reference to the DOM element in which you want to allow swiping. You can do this by using the useRef hook. So declare a constant called wrapperRef:

import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)

    return null

}

Side note: The useRef is a React Hook that lets you reference a value that’s not needed for rendering. It’s particularly common to use it to manipulate the DOM. React has built-in support for this.

Now you just need to return the <div /> that references the constant you created using the useRef hook.

import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)

    return <div ref={wrapperRef}>{children}</div>
}

Let's think for a moment how we can detect swiping. I believe the easiest way is comparing the starting and ending position of the user's finger.

This means we need to store the initial position of the user's finger in state. Basically, we will store x and y coordinates using the useState hook.

import { useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    return <div ref={wrapperRef}>{children}</div>
}

Now we need to create two event callbacks:

• handleTouchStart will set the starting position of the user's finger.
• handleTouchEnd will set the final position of the user's finger and calculate the shift (delta) based on the starting point.

Let's start with the handleTouchStart event handler:

import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
      }, [])

    return <div ref={wrapperRef}>{children}</div>
}

Let me briefly explain it:

1. I wrapped this helper into the useCallback hook to cache and improve its performance. If you don't know this hook, you can read about it in the official React docs.
2. The if statement checks if the user is swiping within the swipable area. If they swipe outside of this area, we will proceed with scrolling.
3. e.preventDefault() disables the default scrolling event.
4. The last two lines store x and y coordinates in state.

Now let's implement the handleTouchEnd event handler:

import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
    }, [])

      const handleTouchEnd = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY

        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])

    return <div ref={wrapperRef}>{children}</div>
}

As you can see, steps 1-3 are exactly the same as in the handleTouchStart callback. Now, we'll take the final x and y coordinates of user's finger and deduct the initial x and y from those. Thanks to that we can calculate horizontal and vertical shift of the user's finger (deltas).

Then we pass those deltas onto the onSwipe callback. If you remember, we declared it in the component's props at the beginning.

Now we need to connect those callbacks into the event listener. To do so, we can use the useEffect hook from React.

import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
      }, [])

      const handleTouchEnd = useCallback(
    (e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY

        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])   

     useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart)
        window.addEventListener("touchend", handleTouchEnd)

        return () => {
            window.removeEventListener("touchstart", handleTouchStart)
            window.removeEventListener("touchend", handleTouchEnd)
        }
      }, [handleTouchStart, handleTouchEnd])

    return <div ref={wrapperRef}>{children}</div>
}

You can read more about the useEffect hook in the official React docs.

The MobileSwiper component is ready now.

🔌 Let's Make It Swipable

The last thing we need to do is hook our component to the application. As I mentioned, I will be using this component in my 2048 Game (Source code). If you want to use it somewhere else, the handleSwipe helper and the MobileSwiper component will remain the same.

Let's plug it into the Board component:

import { useCallback, useContext, useEffect, useRef } from "react"
import { Tile as TileModel } from "@/models/tile"
import styles from "@/styles/board.module.css"
import Tile from "./tile"
import { GameContext } from "@/context/game-context"
import MobileSwiper from "./mobile-swiper"

export default function Board() {
    const { getTiles, moveTiles, startGame } = useContext(GameContext);

    // ... removed irrelevant parts ...

    const handleSwipe = useCallback(({ deltaX, deltaY }) => {
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
                moveTiles("move_right")
            } else {
                moveTiles("move_left")
            }
        } else {
            if (deltaY > 0) {
                moveTiles("move_down")
            } else {
                moveTiles("move_up")
            }
        }
    }, [moveTiles])

     // ... removed irrelevant parts ...

    return (
        <MobileSwiper onSwipe={handleSwipe}>
              <div className={styles.board}>
                <div className={styles.tiles}>{renderTiles()}</div>
                <div className={styles.grid}>{renderGrid()}</div>
              </div>
        </MobileSwiper>
      )
}

Let's start with the handleSwipe handler. As you can see, we're comparing if deltaX is greater than deltaY to decide if the user swiped horizontally (left / right) or vertically (top / bottom).

If it was a horizontal swipe, then:

• negative deltaX means they swiped to the left.
• positive deltaX means they swiped to the right.

If it was a vertical swipe, then:

• negative deltaY means they swiped up.
• positive deltaY means they swiped down.

Now, let's focus on the MobileSwiper component. You can find it in the return statement. We're passing the handleSwipe helper to the onSwipe property and wrapping the entire HTML code of the Board component to enable swiping on it.

Now when we try it out, the result isn't ideal. Scrolling events are mixed with mobile swipes, as you can see below:

Board with duplicated events – swipes and scrolling

This is happening because modern browsers use passive event listeners to improve the scrolling experience on mobile devices. This means that the preventDefault we added to our event callbacks never happens.

To disable scrolling behavior, we need to disable passive listeners on the MobileSwiper component:

import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    // ... removed to improve visibility ...

     useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart, { passive: false })
        window.addEventListener("touchend", handleTouchEnd, { passive: false })
        // ... removed to improve visibility ...
      }, [handleTouchStart, handleTouchEnd])

    // ... removed to improve visibility ...
}

Now the scrolling behavior is gone and the 2048 Game looks just awesome:

Final result - swiping works!

🏁 Summary

Today I showed you that you don't always need libraries to handle mobile gestures in React. Some simple events such as swiping can be implemented using basic React features. We just used a bunch of React hooks and wrote two simple event handlers.

The entire implementation has exactly 50 lines of code. I hope I inspired you to try to deal with mobile events on your own.

If this article helped you, please let me know on Twitter. Educators like me often feel like we are speaking into a vacuum and nobody cares what we teach. A simple "shoutout" shows it was worth an effort and inspires me to create more content like this.

Please share this article on your social media. Thank you!

🎥 Create Your Own 2048 Game

This article is a part of my course on Udemy where I teach how to create a fully-functional 2048 Game in Next.js from scratch.

🧑‍🎓 Join my Next.js course on Udemy

Use code FREECODECAMP to enroll to get a 60% discount.

I believe programming should be fun and unleash creativity. You don't have to build yet another TODO list or a shopping cart. Instead, you can build something that you can show to your friends or maybe even a hiring manager!

PS. If you prefer to watch screencasts, then this lesson is available on Udemy for free. You can find it under the "Responsive Layout and Missing Game Feature" section in the lecture called "Game layout and mobile swipes".

What makes this guide particularly helpful is that I'll teach you how to integrate with GitHub Actions, too. This means your application will be automatically deployed every time you push code to your GitHub repository.

We'll just focus on deployment rather than building the entire Next.js app from scratch. For our example project, we'll use one from a previous article I wrote on freeCodeCamp in my article How to Build 2048 Game in React. I recently upgraded the codebase to use React 18 and added the Next.js framework.

If you want to see the end result of before reading the whole article, you can check it here.

As I mentioned above, we're using a project I made in my previous tutorial – and so that you can use it here, you can find its source code on Github. Feel free to clone or fork this repository, and just follow the steps in the tutorial to make it with me.

Prerequisites

Before we start, make sure you know a little bit about React and Next.js. We'll also be using GitHub, so it's important to understand some basics. You don't have to be an expert, just have some basic experience with these things.

Brief Introduction

Today we are going to explore two new things – GitHub Actions and GitHub Pages. If you haven't heard of them, let me quickly explain:

GitHub Actions are like little workflows that can do tasks on your projects. It's like having a helper that automatically does things you tell it to do. You can use Actions to run tests, for quality checks, or to build your application. In our case, we're going to use these workflows to publish my 2048 Game on GitHub Pages.

Now, what are GitHub Pages? Think of them like a web hosting option for developers and open source projects. You can use GitHub Pages to share your portfolios, host websites of your open-source projects, or just publish your pet projects like we're doing today.

If you want to learn more, you can read more on their official websites:

• GitHub Actions
• GitHub Pages

Now let's get our hands dirty.

Step 1 – Activate GitHub Pages for Your Repository

To publish our Next.js application, we have to activate GitHub Pages for our repository. Let's navigate to the Settings tab (1 in the image below), select Pages from the menu on the left-hand side (2), and find the dropdown menu that allows us to specify the deployment Source (3).

GitHub Project Settings

Now let's change the deployment Source to GitHub Actions.

GitHub Project Settings – GitHub Pages configuration

From now on, our project has a dedicated page. We only need to create an action that will publish content there.

Step 2 – Configure the Next.js Build Process

Before deploying the Next.js app, it's important to change the build output. By default, Next.js uses Node.js to run the application, and this is incompatible with GitHub Pages.

GitHub Pages is designed to host static files, which means we can publish only HTML, CSS, JavaScript (and other static files) there. So we'll need to enable static page generation in Next.js.

To do so, we will change the output mode to export inside next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",  // <=== enables static exports
  reactStrictMode: true,
};

module.exports = nextConfig;

Now after running next build, Next.js will generate an out folder containing static assets for our application. In the next steps, we will take this directory and upload it to GitHub Pages.

Side note for seasoned Next.js developers: you can use getStaticProps and getStaticPaths to generate static files for each page in your pages directory.

Step 3 – Configure Base Path to Fix Missing Images

Github publishes Pages under a sub-path of a domain and takes the project name as a sub-path. It sounds confusing, so let's take a URL to my 2048 game as an example:

https://mateuszsokola.github.io/2048-in-react/

As you can see, Github assigned a dedicated subdomain for me called mateuszsokola (after my username). But the project is published under the sub-path, which in my case is /2048-in-react. Unfortunately, this will lead to issues with missing images and styles.

By default, Next.js maps all static assets the domain. This means that the favicon.ico file will be resolved to mateuszsokola.github.io/favicon.ico instead of mateuszsokola.github.io/2048-in-react/favicon.icon.

To fix this, we can set up a path prefix by adding basePath inside the next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/2048-in-react",
  output: "export",
  reactStrictMode: true,
};

module.exports = nextConfig;

In my case, it is /2048-in-react since my project is called 2048-in-react.
Remember to include the (/) at beginning of the path.

Step 4 – Configure Github Actions

Now it's time to set up Github Actions for Next.js deployment. Reusability is a good practice so I divided the deployment into two separate actions:

• setup-node action – This action is responsible for setting up Node.js and installing all dependencies. Having a standalone action for the Node.js setup enables us to reuse it for other pipelines. For example, in my 2048 Game, I have pipelines that run code linter and tests. Likely you will have more than one action as well.
• publish action – This action handles the build process and publishes the Next.js app to GitHub Pages each time we merge code into the main branch.

Now, you can understand why it's beneficial to split the deployment into two actions.

Let me begin by explaining the setup-node action. Here is the code:

# File: .github/workflows/setup-node/action.yml
name: setup-node
description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧"
runs:
  using: "composite"
  steps:
    - name: Setup Node.js ⚙️
      uses: actions/setup-node@v4
      with:
        node-version: 20

    - name: Cache dependencies ⚡
      id: cache_dependencies
      uses: actions/cache@v3
      with:
        path: node_modules
        key: node-modules-${{ hashFiles('package-lock.json') }}

    - name: Install dependencies 🔧
      shell: bash
      if: steps.cache_dependencies.outputs.cache-hit != 'true'
      run: npm ci

Important: Put this file in the .github/workflows/setup-node directory in your project. Make sure to call the file action.yml.

What does this code do?

• It declares a composite action. The composite action allows you to bundle multiple workflow steps into a single action, combining multiple run commands into a single reusable action.
• It creates a new build environment and sets up Node.js 20 there.
• It installs npm dependencies and uses a caching mechanism to speed up this process.

These are the most important parts of the setup-node action. Now, let's move on to the last action, which is publish.

# File: .github/workflows/publish.yml
name: publish-to-github-pages
on:
  push:
    branches:
      - master

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
        uses: ./.github/workflows/setup-node

      - name: Setup Pages ⚙️
        uses: actions/configure-pages@v4
        with:
          static_site_generator: next

      - name: Build with Next.js 🏗️
        run: npx next build

      - name: Upload artifact 📡
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Publish to GitHub Pages 🚀
        id: deployment
        uses: actions/deploy-pages@v4

Put this file in the .github/workflows directory in your project. You can name the file as you like – I called it publish.yml.

What does this code do?

• This action is executed when code is pushed or merged into the main branch.
• It uses the setup-node action to set up the environment.
• The action has two stages: in the first stage, the Next.js app is bundled. In the second stage, we upload the artifacts from the first stage to GitHub Pages.

These are the most important aspects of the deployment pipeline. I skipped the permissions and concurrency setup since they remain unchanged for all deployments.

Now, your action is ready to use.

Commit and Push

After committing and pushing your changes to the main branch, GitHub will automatically initiate the deployment to GitHub Pages.

To inspect the process, navigate to the Actions tab (1 in the image below), and select the publish-to-github-pages action from the menu on the left hand side (2). You will see a all your deployments on the screen (they are called workflows).

GitHub Actions – Workflows responsible for publishing to GitHub Pages

Now, we need to select the first one of those workflows, and you will see a two-stage deployment. In the deploy stage, you can find a link to your website on GitHub Pages.

GitHub Project Workflow – Successful deployment

Wrapping Up

Github Pages isn't sufficient for hosting websites with millions of views. But it's an excellent choice for building your portfolio or hosting a website for your open-source project.

Nowadays, there are many free options to host our websites, but I wanted to show you this alternative. GitHub Pages is built by developers for developers – you can consider it a developer's natural habitat. I think every developer should be familiar with it.

I hope this article will be a gentle push towards learning more about GitHub Actions. Feel free to experiment with different approaches and try to create your own. Every application needs to be shipped and consider this article just as a starting point.

Here are the resources:

• 2048 Game on Github Pages
• Source code on Github. It'd mean the world to me if you star ⭐ this repository.

If this article helped you, please let me know on Twitter. Educators, like me, often feel like we are speaking into a vacuum and nobody cares what we teach. A simple "shoutout" shows it was worth an effort and inspires me to work even harder to create more content like this.

Feel free to share this article on your social media.

Thank you.

If you wish to know more about me – My name is Matéush. I am a software engineer and digital nomad. I can say I have an extraordinary career. I lived in three different countries and worked in various environments from startups to large enterprises.

Recently I started to share advice on growing a software developer career. I believe I created my blog for my younger self — a bit lost, motivated to become one of the best developers, and seeking a path into the world of “big tech”.

What makes this article unique is that we will focus on creating delightful animations. Aside from React, we will use TypeScript and we'll make some CSS transitions using LESS.

We are only going to use modern React interfaces such as hooks and the Context API.

This article contains a few external resources such as:

• 2048 Game (GitHub Pages)
• Animation Examples for 2048 (GitHub Pages)
• Source Code (GitHub)
• ...and a YouTube video. It took me more than a month to prepare this tutorial, so it would mean the world to me if you watch it, smash the like button, and subscribe to my channel.

Thank you!

2048 Game Rules

In this game, the player must combine tiles containing the same numbers until they reach the number 2048. The tiles can contain only integer values starting from 2, and that are a power of two, like 2, 4, 8, 16, 32, and so on.

Ideally, the player should reach the 2048 tile within the smallest number of steps. The board has dimension of 4 x 4 tiles, so that it can fit up to 16 tiles. If the board is full, and there is no possible move to make like merging tiles together - the game is over.

While creating this tutorial I took shortcuts to focus on the game mechanics and animations. What did I get rid of?

• In our example, the game always creates a new tile with the number 2. But in the proper version it should generate a random number (either 2 or 4 - to make it harder to play).
• Also, we will not handle wins and loses. You can play after you complete the number 2048, and nothing happens when the board is unsolvable - you need to click the reset button.
• I skipped the scoring.

If you want you can implement those missing features on your own. Just fork my repository and implement it on your own setup.

The Project Structure

The application contains the following elements:

• Board (component) – responsible for rendering tiles. It exposes one hook called useBoard.
• Grid (component) – renders 4x4 grid.
• Tile (component) – responsible for all animations related to the tile, and rendering the tile itself.
• Game (component) – combines all elements above together. It includes a useGame hook which is responsible for enforcing the game rules and constrains.

How to Build the Tile Component

We want to invest more time in animations, so I will start the story from the Tile component. In the end, this component is responsible for all animations in the game.

There are only two fairly simple animations in 2048 – tile highlighting, and sliding it across the board. We can handle those animations with CSS transitions by declaring the following styles:

.tile {
  // ...
  transition-property: transform;
  transition-duration: 100ms;
  transform: scale(1);
}

At the current moment I defined only one transition that will highlight the tile when it is created or merged. We will leave it like that for now.

Let's consider how the Tile meta data is supposed to look, so we can easily use it. I decided to call it TileMeta since we don't want to have the name conflict with other entities such as the Tile component:

type TileMeta = {
  id: number;
  position: [number, number];
  value: number;
  mergeWith?: number;
};

• id – the unique identifier of the tile. It is important so that the React DOM doesn't re-render all tiles from scratch on every change. Otherwise, we would see all tiles highlighted on every action of the player.
• position – the position of the tile on the board. It is an array with two elements, the x and y coordinate (the possible values are 0 - 3 in both cases).
• value – the tile value. Only the power of two, starting from 2.
• mergeWith – (optional) the id of the tile which is going to absorb the current tile. If it is present, the tile should be merged into another tile, and disappear.

How to Create and Merge Tiles

We want to somehow highlight that the tile changed after the player's action. I think the best way would be changing the tile's scale to indicate that a new tile has been created or one has been changed.

export const Tile = ({ value, position }: Props) => {
  const [scale, setScale] = useState(1);

  const prevValue = usePrevProps<number>(value);

  const isNew = prevCoords === undefined;
  const hasChanged = prevValue !== value;
  const shallAnimate = isNew || hasChanged;

  useEffect(() => {
    if (shallAnimate) {
      setScale(1.1);
      setTimeout(() => setScale(1), 100);
    }
  }, [shallAnimate, scale]);

  const style = {
    transform: `scale(${scale})`,
  };

  return (
    <div className={`tile tile-${value}`} style={style}>
      {value}
    </div>
  );
};

To trigger the animation, we need to consider two cases:

• a new tile – the previous value will be null.
• the tile changed the value– the previous value will be different than the current one.

And the result is the following:

You might've noticed that I'm using a custom hook called usePrevProps. It helps to track the previous values of the component properties (props).

I could use references to retrieve the previous values but it would clutter up my component. I decided to extract it into a standalone hook, so the code is readable, and I can use this hook in other places.

If you want to use it in your project, just copy this snippet:

import { useEffect, useRef } from "react";

/**
 * `usePrevProps` stores the previous value of the prop.
 *
 * @param {K} value
 * @returns {K | undefined}
 */
export const usePrevProps = <K = any>(value: K) => {
  const ref = useRef<K>();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
};

How to Slide Tiles Across the Board

The game will look janky without animated sliding of tiles across the board. We can easily create this animation by using CSS transitions.

The most convenient will be to use properties responsible for positioning, such as left and top. So we need to modify our CSS styles to look like this:

.tile {
  position: absolute;
  // ...
  transition-property: left, top, transform;
  transition-duration: 250ms, 250ms, 100ms;
  transform: scale(1);
}

Once we've declared the styles, we can implement the logic responsible for changing a tile's position on the board.

export const Tile = ({ value, position, zIndex }: Props) => {
  const [boardWidthInPixels, tileCount] = useBoard();
  // ...

  useEffect(() => {
    // ...
  }, [shallAnimate, scale]);

  const positionToPixels = (position: number) => {
    return (position / tileCount) * (boardWidthInPixels as number);
  };

  const style = {
    top: positionToPixels(position[1]),
    left: positionToPixels(position[0]),
    transform: `scale(${scale})`,
    zIndex,
  };

  // ...
};

As you can see, the equation in the positionToPixels function needs to know the position of the tile, the total amount of tiles per row and column, and the total board length in pixels (width or height – same, it is a square). The calculated value is passed down to the HTML element as an inline style.

Wait a minute... but what about the useBoard hook and zIndex property?

• useBoard allows us to access the properties of the board within the children components without passing them down. The Tile component needs to know the width and total count of tiles to find the right spot on the board. Thanks to React Context API we can share properties across multiple layers of components without polluting their properties (props).
• zIndex is a CSS property that defines the order of tile on the stack. In our case it is the id of the tile. As you can see on the gif below, the tile can be stacked on each other, so the zIndex enabled us to specify which one will be on top.

How to Build the Board

Another important part of the game is the Board. The Board component is responsible for rendering the grid and tiles.

It seems like the Board has duplicated business logic with Tile component, but there is a small difference. The Board holds information about its size (width and height), and number of columns and rows. It's the opposite of the Tile which only knows its own position.

type Props = {
  tiles: TileMeta[];
  tileCountPerRow: number;
};

const Board = ({ tiles, tileCountPerRow = 4 }: Props) => {
  const containerWidth = tileTotalWidth * tileCountPerRow;
  const boardWidth = containerWidth + boardMargin;

  const tileList = tiles.map(({ id, ...restProps }) => (
    <Tile key={`tile-${id}`} {...restProps} zIndex={id} />
  ));

  return (
    <div className="board" style={{ width: boardWidth }}>
      <BoardProvider containerWidth={containerWidth} tileCountPerRow={tileCountPerRow}>
        <div className="tile-container">{tileList}</div>
        <Grid />
      </BoardProvider>
    </div>
  );
};

The Board component uses the BoardProvider to distribute the width of the tile container and amount of tiles per row and column to all tiles and the grid component.

const BoardContext = React.createContext({
  containerWidth: 0,
  tileCountPerRow: 4,
});

type Props = {
  containerWidth: number;
  tileCountPerRow: number;
  children: any;
};

const BoardProvider = ({
  children,
  containerWidth = 0,
  tileCountPerRow = 4,
}: Props) => {
  return (
    <BoardContext.Provider value={{ containerWidth, tileCountPerRow }}>
      {children}
    </BoardContext.Provider>
  );
};

The BoardProvider uses the React Context API to propagate properties down to every child. If any component needs to use any value available on the provider it can retrieve it by calling the useBoard hook.

I am going to skip this topic since I spoke more about it in my video on Feature Toggles in React. If you wish to learn more about them you can watch it.

const useBoard = () => {
  const { containerWidth, tileCount } = useContext(BoardContext);

  return [containerWidth, tileCount] as [number, number];
};

How to Build the Game Component

Now we can specify the rules of game, and expose the interface to play the game. I am going to start with the navigation since it will help you understand why the game logic is implemented that way.

import { useThrottledCallback } from "use-debounce";

const Game = () => {
  const [tiles, moveLeft, moveRight, moveUp, moveDown] = useGame();

  const handleKeyDown = (e: KeyboardEvent) => {
      // disables page scrolling with keyboard arrows
    e.preventDefault();

    switch (e.code) {
      case "ArrowLeft":
        moveLeft();
        break;
      case "ArrowRight":
        moveRight();
        break;
      case "ArrowUp":
        moveUp();
        break;
      case "ArrowDown":
        moveDown();
        break;
    }
  };

  // protects the reducer from being flooded with events.
  const throttledHandleKeyDown = useThrottledCallback(
    handleKeyDown,
    animationDuration,
    { leading: true, trailing: false }
  );

  useEffect(() => {
    window.addEventListener("keydown", throttledHandleKeyDown);

    return () => {
      window.removeEventListener("keydown", throttledHandleKeyDown);
    };
  }, [throttledHandleKeyDown]);

  return <Board tiles={tiles} tileCountPerRow={4} />;
};

As you can see, the game logic will be handled by the useGame hook that exposes the following properties and methods:

• tiles – an array of tiles available on the board. It uses the TileMeta type described above.
• moveLeft – a function that slides all tiles to the left side of the board.
• moveRight – a function that slides all tiles to the right side of the board.
• moveUp – a function that slides all tiles to the top of the board.
• moveDown – a function that slides all tiles to the bottom of the board.

We use the throttledHandleKeyDown callback to prevent players from flooding the game with tons of moves at the same time. Basically, the player needs to wait until the animation is complete before they can trigger another move.

This mechanism is called throttling. I decided to use the useThrottledCallback hook from the use-debounce package.

How to Use the useGame Hook

I mentioned above that the Game component will be handling the rules of the game as well. We are going to extract the game logic into a hook rather than writing it directly onto the component (since we don't want to clutter the code).

The useGame hook is based on the useReducer hook which is a built-in hook within React. I will start by defining the shape of the reducer's state.

type TileMap = { 
  [id: number]: TileMeta;
}

type State = {
  tiles: TileMap;
  inMotion: boolean;
  hasChanged: boolean;
  byIds: number[];
};

The state contains the following fields:

• tiles – a hash table responsible for storing tiles. The hash table makes it easy to lookup entries by their keys, so it is a perfect match for us since we want to find tiles by their ids.
• byIds – an array containing all ids in the expected order (that is, ascending). We must keep the right order of tiles, so React doesn't re-render the whole board every time we change the state.
• hasChange – keeps track of tile changes. If nothing has changed the new tile will not be generated.
• inMotion – determines if tiles are still moving. If they are, the new tile will not be generated until the motion is completed.

Actions

useReducer requires to specify the actions that are supported by this reducer.

type Action =
  | { type: "CREATE_TILE"; tile: TileMeta }
  | { type: "UPDATE_TILE"; tile: TileMeta }
  | { type: "MERGE_TILE"; source: TileMeta; destination: TileMeta }
  | { type: "START_MOVE" }
  | { type: "END_MOVE" };

What are those actions responsible for?

• CREATE_TILE – creates a new tile, and appends it into the tiles hash table. It changes the hasChange flag to false since this action is always triggered when a new tile is appended to the board.
• UPDATE_TILE – updates an existing tile. It doesn't modify the id which is important to keep the animations working. We will use it to reposition the tile and change its value (during merges). Also, it changes the hasChange flag to true.
• MERGE_TILE – merges a source tile into a destination tile. After this operation, the destination tile will change its value (the value of the source tile will be added into it). And it will remove the source tile from the tiles table and byIds array.
• START_MOVE – tells the reducer it should expect multiple actions, so it must wait until all animations are complete before it will be able to generate a new tile.
• END_MOVE – tells the reducer all actions were completed, and it can safely create a new tile.

If you want you can write the logic for this reducer on your own or copy mine:

type TileMap = { 
  [id: number]: TileMeta;
}

type State = {
  tiles: TileMap;
  inMotion: boolean;
  hasChanged: boolean;
  byIds: number[];
};

type Action =
  | { type: "CREATE_TILE"; tile: TileMeta }
  | { type: "UPDATE_TILE"; tile: TileMeta }
  | { type: "MERGE_TILE"; source: TileMeta; destination: TileMeta }
  | { type: "START_MOVE" }
  | { type: "END_MOVE" };

const initialState: State = {
  tiles: {},
  byIds: [],
  hasChanged: false,
  inMotion: false,
};

const GameReducer = (state: State, action: Action) => {
  switch (action.type) {
    case "CREATE_TILE":
      return {
        ...state,
        tiles: {
          ...state.tiles,
          [action.tile.id]: action.tile,
        },
        byIds: [...state.byIds, action.tile.id],
        hasChanged: false,
      };
    case "UPDATE_TILE":
      return {
        ...state,
        tiles: {
          ...state.tiles,
          [action.tile.id]: action.tile,
        },
        hasChanged: true,
      };
    case "MERGE_TILE":
      const {
        [action.source.id]: source,
        [action.destination.id]: destination,
        ...restTiles
      } = state.tiles;
      return {
        ...state,
        tiles: {
          ...restTiles,
          [action.destination.id]: {
            id: action.destination.id,
            value: action.source.value + action.destination.value,
            position: action.destination.position,
          },
        },
        byIds: state.byIds.filter((id) => id !== action.source.id),
        hasChanged: true,
      };
    case "START_MOVE":
      return {
        ...state,
        inMotion: true,
      };
    case "END_MOVE":
      return {
        ...state,
        inMotion: false,
      };
    default:
      return state;
  }
};

If you don't understand why we defined those actions, don't worry – now we are going to implement a hook which will hopefully shed some light on it.

How to Implement the Hook

Let's look into the function which is responsible for a player's moves. We will focus on the move left only since the other ones are almost the same.

  const moveLeftFactory = () => {
    const retrieveTileIdsByRow = (rowIndex: number) => {
      const tileMap = retrieveTileMap();

      const tileIdsInRow = [
        tileMap[tileIndex * tileCount + 0],
        tileMap[tileIndex * tileCount + 1],
        tileMap[tileIndex * tileCount + 2],
        tileMap[tileIndex * tileCount + 3],
      ];

      const nonEmptyTiles = tileIdsInRow.filter((id) => id !== 0);
      return nonEmptyTiles;
    };

    const calculateFirstFreeIndex = (
      tileIndex: number,
      tileInRowIndex: number,
      mergedCount: number,
      _: number
    ) => {
      return tileIndex * tileCount + tileInRowIndex - mergedCount;
    };

    return move.bind(this, retrieveTileIdsByRow, calculateFirstFreeIndex);
  };

  const moveLeft = moveLeftFactory();

As you can see, I decided to bind two callbacks to the move function. This technique is called the inversion of control – so the consumer of the function will be able to inject their own values into the executed function.

If you don't know how bind works you should learn about it because it is a very common question on job interviews.

The first callback called retrieveTileIdsByRow is responsible of finding all non-empty tiles available in a row (for horizontal moves – left or right). If the player does the vertical (up or down) moves we will look for all tiles in a column.

The second callback called calculateFirstFreeIndex finds the closest position to the board's border based on the given parameters such as tile index, index of the tile in row or column, number of merged tiles, and the maximum possible index.

Now we are going to look into the business logic of the move function. I've explained the code of this function in the comments. The algorithm might be a bit complex, and I believe It will be easier to understand it if I document the code line by line:

  type RetrieveTileIdsByRowOrColumnCallback = (tileIndex: number) => number[];

  type CalculateTileIndex = (
    tileIndex: number,
    tileInRowIndex: number,
    mergedCount: number,
    maxIndexInRow: number
  ) => number;

  const move = (
    retrieveTileIdsByRowOrColumn: RetrieveTileIdsByRowOrColumnCallback,
    calculateFirstFreeIndex: CalculateTileIndex
  ) => {
    // new tiles cannot be created during motion.
    dispatch({ type: "START_MOVE" });

    const maxIndex = tileCount - 1;

    // iterates through every row or column (depends on move kind - vertical or horizontal).
    for (let tileIndex = 0; tileIndex < tileCount; tileIndex += 1) {
      // retrieves tiles in the row or column.
      const availableTileIds = retrieveTileIdsByRowOrColumn(tileIndex);

      // previousTile is used to determine if tile can be merged with the current tile.
      let previousTile: TileMeta | undefined;
      // mergeCount helps to fill gaps created by tile merges - two tiles become one.
      let mergedTilesCount = 0;

      // interate through available tiles.
      availableTileIds.forEach((tileId, nonEmptyTileIndex) => {
        const currentTile = tiles[tileId];

        // if previous tile has the same value as the current one they should be merged together.
        if (
          previousTile !== undefined &&
          previousTile.value === currentTile.value
        ) {
          const tile = {
            ...currentTile,
            position: previousTile.position,
            mergeWith: previousTile.id,
          } as TileMeta;

          // delays the merge by 250ms, so the sliding animation can be completed.
          throttledMergeTile(tile, previousTile);
          // previous tile must be cleared as a single tile can be merged only once per move.
          previousTile = undefined;
          // increment the merged counter to correct position for the consecutive tiles to get rid of gaps
          mergedTilesCount += 1;

          return updateTile(tile);
        }

        // else - previous and current tiles are different - move the tile to the first free space.
        const tile = {
          ...currentTile,
          position: indexToPosition(
            calculateFirstFreeIndex(
              tileIndex,
              nonEmptyTileIndex,
              mergedTilesCount,
              maxIndex
            )
          ),
        } as TileMeta;

        // previous tile becomes the current tile to check if the next tile can be merged with this one.
        previousTile = tile;

        // only if tile has changed its position will it be updated
        if (didTileMove(currentTile, tile)) {
          return updateTile(tile);
        }
      });
    }

    // wait until the end of all animations.
    setTimeout(() => dispatch({ type: "END_MOVE" }), animationDuration);
  };

The complete code of this hook has more than 400 lines of code, so instead of pasting it here I decided to keep it on GitHub – so please review the complete code there.

Homework

I mentioned above that a few features are missing. If you want to understand the code in depth, you could fork my repository, and implement the following features:

• score – you can define your own algorithm.
• support wins and loses.
• for new tile generation, pick a random tile value - either 2 or 4. The 4 shouldn't appear fewer than 5% of the times.

If you want me to review your code you can invite me to your pull request on GitHub - my username is mateuszsokola. Maybe I will record a video about how I review your code.

Summary

I hope you enjoyed my tutorial. This time I decided to focus on the essence of the topic rather than building basic React and CSS, so I skipped those basic parts. I believe it makes this article easier to digest.

Any feedback or questions? Shout at me on twitter!

If you found this article helpful please share it, so more developers can learn from it. Occasionally I publish videos on my YouTube channel, and it would be great if you subscribe to my channel, hit the like button, and drop a comment under your favourite video.

Stay tuned!