Excel or React JS First What Beginners Should Pick

=SUMIFS(
  Sales!E:E,
  Sales!B:B, "North",
  Sales!D:D, ">=2026-01-01"
)

# What this does:
# Sum the "Revenue" column (Sales!E)
# Where the region is "North" (Sales!B)
# And the date is 2026 or later (Sales!D)

# Now format this as a Pivot Table by month,
# add conditional formatting and a chart,
# and you have a clean regional report.
#
# This is the whole point of Excel:
# a business question → a report in minutes.

// A simple React component — the building block of a UI

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <h2>You clicked {count} times</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

// What this does:
// - Renders a clickable button
// - Updates the count in real time
// - Rerenders the component on state change
//
// This is the whole point of React:
// a user action → an updated interface, instantly.
//
// It has nothing to do with analysing data.
// It's about building interactive software.

// Import the Excel-exported CSV into a React app

import { useEffect, useState } from "react";
import Papa from "papaparse";

export default function SalesTable() {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    fetch("/data/sales.csv")
      .then((res) => res.text())
      .then((text) => {
        const { data } = Papa.parse(text, {
          header: true,
          skipEmptyLines: true,
        });
        setRows(data);
      });
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>Region</th>
          <th>Month</th>
          <th>Revenue</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i}>
            <td>{r.Region}</td>
            <td>{r.Month}</td>
            <td>{r.Revenue}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Business team updates sales.csv from Excel.
// The React app shows the latest numbers
// every time the page is refreshed.

// A simple interactive filter — the kind of thing
// Excel can't do without macros and complicated setup

import { useState, useMemo } from "react";

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

  const filtered = useMemo(() => {
    if (region === "All") return rows;
    return rows.filter((r) => r.Region === region);
  }, [rows, region]);

  const total = filtered.reduce(
    (sum, r) => sum + Number(r.Revenue || 0),
    0
  );

  return (
    <div>
      <select
        value={region}
        onChange={(e) => setRegion(e.target.value)}
      >
        <option>All</option>
        <option>North</option>
        <option>South</option>
        <option>East</option>
        <option>West</option>
      </select>

      <h2>Total: ₹{total.toLocaleString()}</h2>
      <p>{filtered.length} rows shown</p>
    </div>
  );
}

// The Excel file feeds the data.
// The React app makes it interactive.
// Together, they're a real internal tool.