¿Cómo crear una aplicación de criptomonedas en ReactJS?

En este artículo, vamos a crear una aplicación de criptomonedas que enumere todas las criptomonedas disponibles en el mercado. La siguiente aplicación cubre cómo obtener información de una API y luego mostrarla en forma de tabla al usuario.

Enfoque: Nuestra aplicación contiene dos secciones, una para buscar el nombre de la criptomoneda y la otra para mostrar todas las criptomonedas disponibles en el mercado. Inicialmente, buscaremos todos los datos de la API y los almacenaremos dentro de una variable de estado. Luego mapearemos todos los datos y los mostraremos en una tabla. Siempre que un usuario busque alguna criptografía específica, la filtraremos y mostraremos solo los resultados coincidentes.

import "./App.css";
import Axios from "axios";
import { useEffect, useState } from "react";
 
function App() {
 
  // Setting up the initial states using
  // react hook 'useState'
  const [search, setSearch] = useState("");
  const [crypto, setCrypto] = useState([]);
 
  // Fetching crypto data from the API only
  // once when the component is mounted
  useEffect(() => {
    Axios.get(
`https://api.coinstats.app/public/v1/coins?skip=0&limit=100¤cy=INR`
    ).then((res) => {
      setCrypto(res.data.coins);
    });
  }, []);
 
  return (
    <div className="App">
      <h1>All Cryptocurrencies</h1>
      <input
        type="text"
        placeholder="Search..."
        onChange={(e) => {
          setSearch(e.target.value);
        }}
      />
      <table>
        <thead>
          <tr>
            <td>Rank</td>
            <td>Name</td>
            <td>Symbol</td>
            <td>Market Cap</td>
            <td>Price</td>
            <td>Available Supply</td>
            <td>Volume(24hrs)</td>
          </tr>
        </thead>
        {/* Mapping all the cryptos */}
        <tbody>
          {/* Filtering to check for the searched crypto */}
          {crypto
            .filter((val) => {
              return val.name.toLowerCase().includes(search.toLowerCase());
            })
            .map((val, id) => {
              return (
                <>
                  <tr id={id}>
                    <td className="rank">{val.rank}</td>
                    <td className="logo">
                      <a href={val.websiteUrl}>
                        <img src={val.icon} alt="logo" width="30px" />
                      </a>
                       
<p>{val.name}</p>
 
                    </td>
                    <td className="symbol">{val.symbol}</td>
                    <td>₹{val.marketCap}</td>
                    <td>₹{val.price.toFixed(2)}</td>
                    <td>{val.availableSupply}</td>
                    <td>{val.volume.toFixed(0)}</td>
                  </tr>
                </>
              );
            })}
        </tbody>
      </table>
    </div>
  );
}
 
export default App;

.App {
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px;
  font-size: 16px;
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
}
h1{
  color: forestgreen;
}
input{
  padding-left: 5px;
  font-size: 20px;
  width: 250px;
  height: 30px;
}
table{
  width: 1000px;
  border-collapse: separate;
  border-spacing: 0 1em;
}
thead{
  background-color: rgb(44, 44, 44);
  color: white;
  text-align: center;
}
tbody > tr{
  text-align: right;
}
.rank{
  text-align: center;
  font-weight: bold;
}
.logo{
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
  gap: 10px;
}
.symbol{
  text-align: center;
}