Daftar Isi

1. Pengantar dan Tujuan Pembelajaran
2. Persiapan Lingkungan dan Tools
3. Struktur Proyek React
4. Membuat Komponen Dashboard
5. Menggunakan CSS Grid untuk Layout
6. Mengambil Data Cryptocurrency dengan API
7. Menampilkan Data Dinamis di Dashboard
8. Menambahkan Grafik Harga dengan Chart.js
9. Penyempurnaan dan Styling Dashboard
10. Sumber Belajar dan Source Code Lengkap

1. Pengantar dan Tujuan Pembelajaran

Dalam ebook ini, Anda akan belajar bagaimana membangun sebuah dashboard cryptocurrency yang menarik dan responsif menggunakan React dan CSS Grid. Dashboard ini akan menampilkan data harga cryptocurrency secara real-time, menggunakan API publik, serta menampilkan grafik harga yang interaktif.

Tujuan pembelajaran:

• Memahami dasar React dan cara membuat komponen.
• Menggunakan CSS Grid untuk layout yang fleksibel dan responsif.
• Mengambil data dari API cryptocurrency secara real-time.
• Menampilkan data dinamis dan grafik interaktif.
• Mengaplikasikan styling modern dengan Tailwind CSS.

2. Persiapan Lingkungan dan Tools

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa tools berikut:

• Node.js dan npm: Untuk menjalankan React dan mengelola paket.
• Code Editor: Disarankan menggunakan VSCode.
• Browser modern: Untuk testing dan debugging.
• API Cryptocurrency: Kita akan menggunakan CoinGecko API yang gratis dan mudah digunakan.

Langkah instalasi React dengan Vite (lebih cepat dan ringan):

npm create vite@latest crypto-dashboard -- --template react
cd crypto-dashboard
npm install
npm run dev
      

Setelah itu, buka http://localhost:5173 di browser Anda untuk melihat aplikasi React kosong.

3. Struktur Proyek React

Struktur folder dasar proyek React yang akan kita gunakan:

crypto-dashboard/
├─ node_modules/
├─ public/
│  └─ vite.svg
├─ src/
│  ├─ components/
│  │  ├─ Dashboard.jsx
│  │  ├─ CoinCard.jsx
│  │  └─ PriceChart.jsx
│  ├─ App.jsx
│  ├─ main.jsx
│  └─ index.css
├─ package.json
└─ vite.config.js
      

Penjelasan singkat:

• components/ : Tempat menyimpan komponen React yang reusable.
• App.jsx : Komponen utama aplikasi.
• main.jsx : Entry point React yang merender App .
• index.css : Styling global, kita akan menggunakan Tailwind CSS.

4. Membuat Komponen Dashboard

Kita mulai dengan membuat komponen utama Dashboard.jsx yang akan menampung seluruh tampilan dashboard.

import React from 'react';
import CoinCard from './CoinCard';
import PriceChart from './PriceChart';

const Dashboard = () => {
  return (
    <section className="p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-semibold mb-6 text-indigo-700">Dashboard Cryptocurrency</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <CoinCard name="Bitcoin" symbol="BTC" price="$27,000" change="+2.5%" />
        <CoinCard name="Ethereum" symbol="ETH" price="$1,800" change="-1.2%" />
        <CoinCard name="Cardano" symbol="ADA" price="$0.45" change="+0.8%" />
      </div>
      <PriceChart />
    </section>
  );
};

export default Dashboard;
      

Komponen ini menggunakan dua komponen anak: CoinCard untuk menampilkan ringkasan harga koin, dan PriceChart untuk grafik harga.

5. Menggunakan CSS Grid untuk Layout

CSS Grid sangat cocok untuk membuat layout dashboard yang rapi dan responsif. Kita menggunakan Tailwind CSS utility classes untuk mengatur grid.

Contoh penggunaan grid pada Dashboard.jsx :

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
  <CoinCard />
  <CoinCard />
  <CoinCard />
</div>
      

Penjelasan:

• grid-cols-1 : Satu kolom pada layar kecil (mobile).
• md:grid-cols-3 : Tiga kolom pada layar medium ke atas.
• gap-6 : Jarak antar grid item.

6. Mengambil Data Cryptocurrency dengan API

Kita akan menggunakan CoinGecko API untuk mengambil data harga cryptocurrency secara real-time.

Contoh kode React untuk mengambil data menggunakan fetch dan useEffect :

import React, { useState, useEffect } from 'react';

const useCryptoData = (coinIds) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${coinIds.join(',')}&order=market_cap_desc&per_page=10&page=1&sparkline=false`
        );
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching crypto data:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [coinIds]);

  return { data, loading };
};

export default useCryptoData;
      

Hook custom ini bisa digunakan untuk mengambil data beberapa koin sekaligus.

7. Menampilkan Data Dinamis di Dashboard

Setelah data berhasil diambil, kita tampilkan data tersebut di komponen CoinCard .

import React from 'react';

const CoinCard = ({ name, symbol, price, change, image }) => {
  const isPositive = change.startsWith('+');
  return (
    <div className="bg-indigo-50 p-4 rounded-lg shadow flex items-center space-x-4">
      <img src={image} alt={`Logo ${name} cryptocurrency`} className="w-12 h-12 rounded-full" />
      <div>
        <h3 className="text-lg font-semibold text-indigo-900">{name} ({symbol.toUpperCase()})</h3>
        <p className="text-indigo-700">Harga: {price}</p>
        <p className={isPositive ? 'text-green-600' : 'text-red-600'}>Perubahan: {change}</p>
      </div>
    </div>
  );
};

export default CoinCard;
      

Contoh penggunaan di Dashboard.jsx dengan data dinamis:

import React from 'react';
import useCryptoData from '../hooks/useCryptoData';
import CoinCard from './CoinCard';

const Dashboard = () => {
  const { data, loading } = useCryptoData(['bitcoin', 'ethereum', 'cardano']);

  if (loading) return <p className="text-center text-indigo-700">Loading data...</p>;

  return (
    <section className="p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-semibold mb-6 text-indigo-700">Dashboard Cryptocurrency</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        {data.map((coin) => (
          <CoinCard
            key={coin.id}
            name={coin.name}
            symbol={coin.symbol}
            price={`${coin.current_price.toLocaleString()}`}
            change={`${coin.price_change_percentage_24h.toFixed(2)}%`}
            image={coin.image}
          />
        ))}
      </div>
    </section>
  );
};

export default Dashboard;
      

8. Menambahkan Grafik Harga dengan Chart.js

Untuk menampilkan grafik harga, kita gunakan Chart.js bersama react-chartjs-2 .

Instalasi paket:

npm install chart.js react-chartjs-2
      

Contoh komponen PriceChart.jsx yang menampilkan grafik harga Bitcoin 7 hari terakhir:

import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const PriceChart = () => {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    const fetchChartData = async () => {
      const res = await fetch(
        'https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=7'
      );
      const data = await res.json();
      const labels = data.prices.map((price) => {
        const date = new Date(price[0]);
        return date.toLocaleDateString();
      });
      const prices = data.prices.map((price) => price[1]);

      setChartData({
        labels,
        datasets: [
          {
            label: 'Harga Bitcoin (USD)',
            data: prices,
            borderColor: 'rgba(99, 102, 241, 1)',
            backgroundColor: 'rgba(99, 102, 241, 0.2)',
            fill: true,
            tension: 0.3,
          },
        ],
      });
    };
    fetchChartData();
  }, []);

  if (!chartData) return <p className="text-center text-indigo-700">Loading grafik...</p>;

  return (
    <div className="bg-indigo-50 p-6 rounded-lg shadow-lg">
      <Line data={chartData} options={{ responsive: true, plugins: { legend: { position: 'top' } } }} />
    </div>
  );
};

export default PriceChart;
      

9. Penyempurnaan dan Styling Dashboard

Untuk membuat dashboard lebih menarik dan responsif, kita gunakan Tailwind CSS untuk styling dan memastikan tampilan bagus di berbagai ukuran layar.

Contoh styling tambahan pada CoinCard.jsx :

<div className="bg-white p-5 rounded-xl shadow-md flex items-center space-x-5 hover:shadow-lg transition-shadow duration-300">
  <img src={image} alt={`Logo ${name}`} className="w-14 h-14 rounded-full" />
  <div>
    <h3 className="text-xl font-semibold text-indigo-900">{name} ({symbol.toUpperCase()})</h3>
    <p className="text-indigo-700 text-lg">Harga: {price}</p>
    <p className={isPositive ? 'text-green-600 font-semibold' : 'text-red-600 font-semibold'}>Perubahan: {change}</p>
  </div>
</div>
      

Pastikan juga dashboard memiliki padding dan margin yang cukup agar tidak terasa sempit.

10. Sumber Belajar dan Source Code Lengkap

Berikut beberapa sumber belajar yang sangat membantu untuk memperdalam React, CSS Grid, dan pengambilan data API:

• Dokumentasi Resmi React
• Tailwind CSS Grid Documentation
• CoinGecko API Documentation
• Chart.js Documentation
• React Chart.js 2 Documentation

Source code lengkap proyek ini bisa Anda temukan di GitHub: