React Basics

Before React existed, updating a web page was painful.

Imagine you have a dashboard that shows a user's name in three places — in the header, in a greeting, and in a profile section. The user updates their name. You now have to:

If you forgot one, the page showed inconsistent data. If the page had 50 elements that depended on the user's name, you had 50 manual updates to manage. This was the reality of building web applications before React.

React solved this by inverting the model. Instead of manually updating the page when data changes, you tell React: "when this data is X, the page should look like Y." React figures out what changed and updates only the parts that need updating.

The Excel Analogy

Here is the best way to understand React.

Open a spreadsheet. Put the number 50000 in cell A1. In cell B1, write the formula =A1*1.18. Cell B1 shows 59000.

Now change A1 to 75000. B1 automatically updates to 88500. You did not touch B1. You did not tell it to recalculate. The spreadsheet did it automatically because B1 depends on A1.

React works exactly like this.

• The data (A1) is called state
• The UI (B1) is a component that depends on that state
• When state changes, React automatically updates every component that depends on it

You change the data. The UI recalculates. Automatically. No manual DOM manipulation.

Components — The Building Blocks

In Excel, you define a named range once and reference it anywhere. Change the named range, and every formula referencing it updates.

In React, you define a component once and use it anywhere. Change the component, and every place it is used updates.

A component is a function that returns some UI. That is the entire definition.

The <h1> inside that function looks like JSX — a special syntax that React understands. It gets compiled into JavaScript. You write it like HTML, React runs it as JavaScript.

Every time you write <Greeting /> anywhere in your application, that h1 appears. One definition. Infinite reuse.

Props — Passing Data to Components

Named ranges in Excel are rigid. They always show the same value. But a chart in Excel can reference different cells depending on how you configure it.

In React, props are how you pass data to a component. Props make components configurable.

Here is a stat card component — the kind you see in every admin dashboard:

The interface StatCardProps block declares what data this component accepts. The { title, value, label } in the function parameters pulls that data out.

Three cards. One component definition. Different data in each.

This is the equivalent of a named range in Excel — define the formula once, reference it with different inputs.

State — Data That Changes

Props are data passed in from outside. They are read-only — a component cannot change its own props, just like a chart cannot change the cell it is referencing.

State is data that lives inside a component and can change. When state changes, the component re-renders — it recalculates its output automatically, like a spreadsheet cell recalculating when a dependency changes.

useState(0) creates a piece of state with an initial value of 0. It gives you two things: the current value (count) and a function to change it (setCount). When setCount is called, React re-renders the component with the new value.

The user clicks the button. setCount(count + 1) runs. count becomes 1. React re-renders. The {count} in the paragraph automatically shows 1. No manual DOM manipulation. No finding elements. The UI described itself in terms of data, and React kept them in sync.

Try It: React useState in Action

The playground below is a real working React app. The left side is the UI your clients would see. The right side is the actual useState code that powers it. The bottom table shows you the state array — the data React holds in memory right now.

Add invoices and watch three things happen at once: the UI updates, the code updates to reflect the new state, and the table gains a new row. That is the React mental model made visible.

A Real Component: The Udyogaseva Stat Card

Here is an actual pattern from the Udyogaseva admin dashboard. This is real production code — the kind of component that shows live platform statistics to administrators.

Notice what this component handles:

• A loading state (isLoading) — shows a Skeleton placeholder instead of content while data is fetching
• An icon that is configurable via props
• The value formatted with toLocaleString() — so 2841 displays as 2,841

(The screenshot shows the actual Udyogaseva admin dashboard with these stat cards — five in a row showing Candidates, Recruiters, Active Jobs, Applications, and CA Firms.)

The Core Insight

You now understand the three fundamental concepts of React:

Everything else in React is built on these three ideas. When you look at a React codebase and feel lost, come back to these definitions. Every component in Udyogaseva — from the simplest badge to the most complex form — is a combination of components, props, and state.

In the next lesson, we look at how these combine into a mental model for how a full application is structured.

Interactive: TypeScript Catches Bugs Before Users Do

See the difference between catching a bug instantly in your editor versus discovering it days later in production.

• I can explain what a Component is without using technical terms
• I understand Props — passed in from outside, like arguments. I understand State — owned internally, changes on interaction.
• I understand why changing one component updates all usages — the single-source-of-truth principle
• I have described a component to Claude Code and reviewed the output against my spec
• I understand what TypeScript adds — it catches wrong props and type mismatches before the code runs