Why Every Data Analyst Should Learn React JS in 2026

# Needs Node.js (LTS) installed
npm create vite@latest sales-dashboard -- --template react
cd sales-dashboard
npm install
npm install recharts

# Start the development server
npm run dev
# Open the local URL it prints, usually http://localhost:5173

sales-dashboard/
  public/
    sales.json          <- data exported from SQL or Python
  src/
    App.jsx             <- main dashboard component
    KpiCard.jsx         <- small reusable card
    SalesChart.jsx      <- chart component
    main.jsx            <- entry point (created by Vite)
  package.json

// src/KpiCard.jsx
export default function KpiCard({ label, value, format = "number" }) {
  const shown =
    format === "currency"
      ? value.toLocaleString("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 })
      : value.toLocaleString("en-IN");

  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 16, minWidth: 160 }}>
      <div style={{ fontSize: 13, color: "#666" }}>{label}</div>
      <div style={{ fontSize: 24, fontWeight: 700 }}>{shown}</div>
    </div>
  );
}

import KpiCard from "./KpiCard";

function Summary({ rows }) {
  // Same idea as SUM() and COUNT() in Excel
  const revenue = rows.reduce((sum, r) => sum + r.revenue, 0);
  const orders = rows.reduce((sum, r) => sum + r.orders, 0);

  return (
    <div style={{ display: "flex", gap: 12 }}>
      <KpiCard label="Revenue" value={revenue} format="currency" />
      <KpiCard label="Orders" value={orders} />
    </div>
  );
}

export default Summary;

import { useEffect, useMemo, useState } from "react";
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
import Summary from "./Summary";

export default function App() {
  const [rows, setRows] = useState([]);
  const [region, setRegion] = useState("All");

  useEffect(() => {
    fetch("/sales.json").then((res) => res.json()).then(setRows);
  }, []);

  const regions = ["All", ...new Set(rows.map((r) => r.region))];

  const filtered = useMemo(
    () => (region === "All" ? rows : rows.filter((r) => r.region === region)),
    [rows, region]
  );

  // Total revenue per month for the chart
  const byMonth = useMemo(() => {
    const totals = {};
    filtered.forEach((r) => { totals[r.month] = (totals[r.month] || 0) + r.revenue; });
    return Object.entries(totals).map(([month, revenue]) => ({ month, revenue }));
  }, [filtered]);

  return (
    <main style={{ padding: 24, fontFamily: "sans-serif" }}>
      <h1>Sales dashboard</h1>
      <select value={region} onChange={(e) => setRegion(e.target.value)}>
        {regions.map((r) => <option key={r}>{r}</option>)}
      </select>
      <Summary rows={filtered} />
      <div style={{ height: 320, marginTop: 24 }}>
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={byMonth}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip />
            <Line type="monotone" dataKey="revenue" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </main>
  );
}

[
  {"month": "2026-01", "region": "North", "revenue": 125000, "orders": 310},
  {"month": "2026-01", "region": "South", "revenue": 98000,  "orders": 260},
  {"month": "2026-02", "region": "North", "revenue": 131000, "orders": 325},
  {"month": "2026-02", "region": "South", "revenue": 102500, "orders": 271},
  {"month": "2026-03", "region": "North", "revenue": 127500, "orders": 318},
  {"month": "2026-03", "region": "South", "revenue": 110000, "orders": 289}
]

// Sample data for practice only - months must be sorted
// so the line chart reads left to right in order.

# Aggregate in pandas, then export a small JSON file for React
import pandas as pd

df = pd.read_csv("orders.csv", parse_dates=["order_date"])
df["month"] = df["order_date"].dt.strftime("%Y-%m")

summary = (
    df.groupby(["month", "region"], as_index=False)
      .agg(revenue=("amount", "sum"), orders=("order_id", "nunique"))
      .sort_values(["month", "region"])
)

summary.to_json("sales-dashboard/public/sales.json", orient="records", indent=2)
print(len(summary), "rows exported")

REACT DATA APP — PORTFOLIO PLAN

Business question : ______________________________
Dataset (public)  : ______________________________
Cleaning done in  : SQL / Python / Excel
Summary exported  : ______ rows, fields: ____________

Features
[ ] 3-4 KPI cards
[ ] One filter (region, product or date range)
[ ] One trend chart + one comparison chart
[ ] Short written insight under each chart

Deliverables
[ ] Live link (static hosting)
[ ] GitHub repo with README and screenshots
[ ] Same analysis rebuilt in Power BI for comparison

DASHBOARD QUALITY CHECKLIST

Data
[ ] Numbers match the source query (spot-check 3 values)
[ ] Only aggregated, non-sensitive data shipped to the browser
[ ] Units and currency labelled

Design
[ ] Most important KPI top-left
[ ] Axis labels and tooltips readable
[ ] Works on a phone screen

Interaction
[ ] Filter has an All option
[ ] Empty state shown when a filter returns no rows
[ ] Loading message while data is fetched