¿Cómo crear un botón Me gusta receptivo en ReactJS?

React es una biblioteca de JavaScript utilizada para desarrollar interfaces de usuario interactivas. Haremos una función Me gusta usando React JS. 
Módulos requeridos:

• npm
• Reaccionar
• fuente impresionante

npm install --save @fortawesome/react-fontawesome

Configuración básica: Inicie un proyecto con el siguiente comando:

• NPX : es una herramienta de ejecución de paquetes que viene con npm 5.2+, npx es una herramienta CLI fácil de usar. El npx se usa para ejecutar paquetes de Node. Simplifica en gran medida una serie de cosas, una de las cuales es verificar/ejecutar un paquete de Node rápidamente sin instalarlo local o globalmente.

npx create-react-app like-app

• Ahora ve a la carpeta

cd like-app

• Inicie el servidor: inicie el servidor escribiendo el siguiente comando en la terminal:

npm start

• Ahora cree un directorio dentro de src con un nombre de archivo: Like.js

mkdir components && cd components && touch Like.js

La estructura del directorio se verá similar a esto:

Edite Like.js de la siguiente manera. 

• Like.js: las siguientes son las importaciones para la aplicación de funciones similares requerida. La segunda importación denota la famosa biblioteca de iconos – Biblioteca » Font-Awesome «.

  JavaScript

  import React, { Component } from "react"; import { faHeart } from "@fortawesome/free-solid-svg-icons"; import { faHeartBroken } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

• Like.js: ahora definamos el estado de nuestro componente. Contiene una variable llamada like . Si es falso, mostraremos un corazón en blanco, sin embargo, si es cierto, mostraremos un corazón sólido.

  JavaScript

  state = { liked: false };

• Like.js: The toggle(): esta función es el núcleo del componente que cambia el estado cuando se hace clic en el corazón. Alterna el estado del corazón entre vacío y sólido.

  JavaScript

  toggle =() => {     let localLiked = this.state.liked;     localLiked = !localLiked;     this.setState({ liked: localLiked });   };

• Like.js: esta es la función principal de representación que devuelve el HTML del componente. Observe detenidamente cómo hemos utilizado la representación condicional para representar diferentes corazones en función del estado de la variable gustada .

  JavaScript

  render() {     return (       <div className="container">         <center>              <p>Click on the Like Button</p>              <div             className="container"             style={{ border: "1px solid black", width: "15%" }}             onClick={() => this.toggle()}           >             {this.state.liked === false ? (               <FontAwesomeIcon icon={faHeart} />             ) : (               <FontAwesomeIcon icon={faHeartBroken} />             )}           </div>         </center>       </div>     );   }

Like.js: Código final del componente que se puede exportar y usar dentro de cualquier otro componente.

import React, { Component } from "react";
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
  
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
class Like extends Component {
  state = { liked: false };
  toggle = () => {
    let localLiked = this.state.liked;
  
    // Toggle the state variable liked
    localLiked = !localLiked;
    this.setState({ liked: localLiked });
  };
  render() {
    return (
      <div className="container">
        <center>
          <p>Click on the Like Button</p>
          <div
            className="container"
            style={{ border: "1px solid black", width: "15%" }}
            onClick={() => this.toggle()}
          >
            {this.state.liked === false ? (
              <FontAwesomeIcon icon={faHeart} />
            ) : (
              <FontAwesomeIcon icon={faHeartBroken} />
            )}
          </div>
        </center>
      </div>
    );
  }
}
  
export default Like;

Salida : la salida final se verá así. Abra http://localhost:3000/ en el navegador: