Exploding Button React Tutorial for Beginners

Welcome! This tutorial will walk you through creating a simple React application that has a button which "explodes" or disappears when clicked, using a neat CSS animation.

The following piece of code includes all the necessary components to achieve this:

import React, { useState } from 'react';

export default function Button() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(true);
  };

  return (
    <div>
      <style>
        {`
        .button {
          font-size: 1.5rem;
          padding: 0.5rem 1rem;
          color: white;
          background-color: #007BFF;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
          opacity: 1;
        }

        .button.clicked {
          animation: explode 1s forwards;
        }

        @keyframes explode {
          0% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.5); opacity: 0.5; }
          100% { transform: scale(2); opacity: 0; }
        }
        `}
      </style>
      <button 
        className={`button ${isClicked ? 'clicked' : ''}`}
        onClick={handleClick}
        onAnimationEnd={() => setIsClicked(false)}
      >
        Click me
      </button>
    </div>
  );
}

Breakdown

Let's break down what's happening in the code.

JavaScript/React

First, we're importing the necessary items from the React library itself and the useState hook. This hook allows us to add state to our functional component.

We declare a new functional component called Button. Inside it, we declare a new piece of state isClicked using the useState hook and initialize it with false. The useState hook returns an array with two items: the current state value (isClicked) and a function to update it (setIsClicked).

We then declare a handleClick function which, when called, will set isClicked to true.

In the render return of the component, we define a button HTML element with an onClick event handler that triggers our handleClick function when the button is clicked.

Also, we add an onAnimationEnd event that sets isClicked to false when the animation is finished. This will make the button reappear and be ready to be clicked and "explode" again.

CSS-in-JS

CSS-in-JS is a pattern where CSS is composed using JavaScript instead of defined in external .css files. In this case, we're defining the styles directly in our component using a style tag.

The button class defines the basic look of our button.

The button.clicked class is what gets applied when our button is clicked, which starts our animation.

The @keyframes explode is where we define what our "explode" animation does. It starts by scaling the button up to 1.5 times its original size at the 50% mark, and simultaneously reduces the opacity to 0.5. At the end of the animation (100%), it scales up even further to twice the original size and completely fades out by setting the opacity to 0.

The className attribute on our button element utilizes a template string to dynamically apply the 'clicked' class if isClicked is true. This triggers our 'explode' animation.

And there you have it! You've created a button that disappears in a dynamic animation when clicked. This exercise is a great way to practice using React state, handling events and implementing CSS animations within a React component.

---