Learning React - Ep.1

This is the 1st post in my attempt to document my journey of learning React in depth. These posts will focus less on syntax and code snippets and more on conceptual understanding and intuition.

I’ve used React before, but this time I want to go beyond “I know how to use React.” I want to understand why React works the way it does.

So I’m starting with the fundamentals.

At its core, React is about building a tree of components whose output describes what the UI should look like.

A component is simply a function:

function UserCard({ name }) {
  return <div>Hello, {name}</div>;
}

When React renders this component, the JSX doesn't directly become a DOM node. It first creates a React element tree representing the UI.

For example:

<App>
  <Navbar />
  <UserCard name="Vidhish" />
</App>

This hierarchical structure allows React to reason about the UI and determine what needs to change in the actual DOM.

Then come props and state.

Props are inputs passed from a parent:

<UserCard name="Vidhish" />

They make components reusable and allow data to flow through the component tree.

State represents information that can change over time:

const [count, setCount] = useState(0);

Calling:

setCount(count + 1);

doesn't directly modify the DOM.

Instead, it tells React that the component's state has changed. React renders the component again with the new state and determines the necessary DOM updates.

That mental model is already changing how I look at React.

Components → Element Tree → Props/State → Re-render → DOM updates

I'm planning to document the concepts I learn along the way, from these fundamentals to hooks, reconciliation, rendering, performance, and eventually React internals.

The goal isn't just to learn React APIs. It's to build a mental model of what React is actually doing when our code runs.

If you're learning React too, what concept gave you your first real “aha!” moment?