ReactjsBeginners GuideFrontendWeb Development How React Thinks: Components, JSX, and the Render Model

Nilupul Perera

6 min read10 hours ago

React Zero to Senior, Part 1: Foundations · Article 1 of 24

Press enter or click to view image in full size React Zero to Senior, Article 1: How React Thinks

What you’ll learn: what problem React solves, how to start a project with Vite, how JSX really works, and the one mental model (UI as a function of state) that the rest of this series builds on.

Versions used in this article: React 19.3.1, React DOM 19.3.1, Vite 8, Node.js 22 LTS. Code lives in the series repo under 01-how-react-thinks/

Why React exists

Imagine a page with a counter. When the user clicks a button, the number on screen must change. With plain JavaScript you write the steps yourself: find the element, read its text, add one, write it back.

That works for one counter.…