React and components

Three ways to see it

1. 1

   React is a JavaScript library created at Facebook in 2013 to manage user interfaces. Its central idea is the component: a self-contained piece of UI that takes inputs (called props) and returns markup. You compose small components into bigger ones until the whole page is a tree. The page is then a function of the data. Change the data, the UI updates automatically. No manual DOM mutation, no event-listener spaghetti. In 2026 React powers most large Pakistani product surfaces: SadaPay, Tajir, Bazaar, Bykea, parts of Daraz, and most Y Combinator-style startups out of Karachi and Lahore.

2. 2

   Way one, a component as a function. The simplest component is a function that returns JSX (JavaScript with HTML-like syntax). Example: function TransactionRow({ date, name, amount, status }) { return <div className='flex justify-between p-3'><span>{date}</span><span>{name}</span><span>PKR {amount}</span><span>{status}</span></div>; }. You pass in props, you get back markup. To render a hundred such rows, you map over an array: transactions.map(tx => <TransactionRow key={tx.id} {...tx} />). One component definition, many instances, each with its own data.

3. 3

   Way two, state with useState. Components have memory through hooks. useState gives a value and a setter: const [count, setCount] = useState(0). Whenever you call setCount, React re-renders the component with the new value. State is local by default, each component owns its own. The JazzCash transaction list might have state for the filter (all, sent, received), the page number, and the loading status. Click a filter button, call setFilter('sent'), React re-runs the component, the visible rows change.

The why-tree

Try this with Claude

AI-edge prompt to try with Claude: 'Generate a React TransactionList component for JazzCash-style data. Include loading, empty, and error states. Use TypeScript and Tailwind. Accept a fetchUrl prop, debounce filter changes, and memoize the list with useMemo. Include unit-test cases in vitest. Comment the state machine.' Compare the output to what you wrote. Where did the model add complexity you would not have? Where did it skip a real-world case?