How to Create a Responsive Like Button in ReactJS?

Creating a responsive like button in ReactJS is a fantastic method to increase the interactivity of your web application. The steps required to create a responsive like button in ReactJS will be discussed in this blog post, along with some sample code, to get you started.

Let's first examine a React component's basic structure. A React component is a JavaScript function that generates a React element. A React element is a straightforward JavaScript object that describes a DOM node. A button element that a user can click to express their approval of a piece of material would be a component for a "like" button

Step 1: Setting up the React Project

To get started, you will need to have a React project set up. If you don't already have one, you can use the create-react-app command to set up a new project.

npx create-react-app my-app
cd my-app
npm start

This creates a new project in the directory "my-app" and launches a development server so you can preview your changes online.

Step 2: Creating the Like Button Component

After setting up a simple React project, we can now construct a new component for our "like" button. In the project's src directory, create a new file called LikeButton.js

import React, { useState } from 'react';
function LikeButton() {
   const [likes, setLikes] = useState(0);
   return (
      <button onClick={() => setLikes(likes + 1)}>
         {likes} Likes
      </button>
   );
}
export default LikeButton;

We are importing React and the useState hook from the react package into this code. We may add state to our component—in this case, the number of likes—using the useState hook. When the button is clicked, the initial state is set to 0, and the setLikes function is used to update the state and re-render the component with the revised amount of likes.

Step 3: Adding the Like Button to the App

We need to include our like button component in our app now that we have it. To accomplish this, we will add the LikeButton component to the JSX and import it into the App.js file.

import React from 'react';
import LikeButton from './LikeButton';
function App() {
   return (
      <div>
         <LikeButton />
      </div>
   );
}
export default App;

Step 4: Styling the Like Button

Finally, we can style our "like" button to resemble a real button. To accomplish this, simply import a CSS file into the LikeButton.js code and add it.

// LikeButton.js
import './App.css';

Define CSS in App.css as below −

//App.css
.like-button-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px;
}
.like-button {
   border: none; 
   outline: none;
   background-color: transparent;
   font-size: 18px;
   font-weight: bold;
   color: #333;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   padding: 10px 20px;
   border: 2px solid #333;
}
.like-button:hover {
   color: #fff;
   background-color: #333;
}
.like-button.liked {
   color: #ff69b4;
   border-color: #ff69b4;
}
/* For mobile screens */
@media (max-width: 768px) {
   .like-button-container {
      flex-direction: column;
   }
   .like-button {
      font-size: 16px;
      margin-bottom: 10px;
      padding: 8px 16px;
      border-width: 1px;
   }
} 

Step 5: Adding a Conditional Style for the Liked State

A conditional style can be added to our button to show when it has been liked. To track whether the button has been liked or not, we may add a new state variable to our component. Once the button has been liked, we can use this state variable to give it a different class.

// LikeButton.js
import React, { useState } from "react";
import "./App.css";
function LikeButton() {
   const [likes, setLikes] = useState(0);
   const [liked, setLiked] = useState(false);
   return (
      <button
         className={`like-button ${liked ? 'liked' : ''}`}
         onClick={() => {
            setLikes(likes + 1);
            setLiked(true);
         }}
      >
         {likes} Likes
      </button>
   );
}
export default LikeButton;

And in our CSS file, we can add a new class for the liked state.

Step 6: Making the Like Button Responsive

Using CSS media queries, we can style the "like" button differently depending on the size of the screen. For instance, if the screen width is less than 500px, we can alter the button's text size.

On smaller displays, we can use flexbox to make the button fill the entire width of its container.

/* App.css */
.like-button-container {
   display: flex;
   justify-content: center;
}

/* LikeButton.js */
return (
   <div className="like-button-container">
      <button
         className={`like-button ${liked ? 'liked' : ''}`}
         onClick={() => {
            setLikes(likes + 1);
            setLiked(true);
         }}
      >
         {likes} Likes
      </button>
   </div>
);

After completing these steps, your ReactJS application should now have a fully responsive and operational "like" button. This "like" button can still be modified and enhanced to better suit the requirements of your application.

Output

You could also give people the option to dislike posts, and you could also save the number of likes in a database so that it would remain constant after page refreshes. The capability to display the names of users who liked a post might also be added. Calling an API endpoint that returns a list of users who liked a post and displaying them in a list will accomplish this.

By including a share button and connecting it to the share endpoint of the social media network, you can also add a functionality that enables people to share the post on those platforms.

Conclusion

You should be able to create a simple "like" button using the sample code supplied, which can then be customized and enhanced to meet the unique requirements of your application.

However, remember that this is just one approach to creating a like button in ReactJS, and there are many other ways you can achieve the same result.