React’s component-based architecture means you build your app out of small, reusable pieces called components.
Each component:
- Handles its own HTML (structure), CSS (style), and JavaScript (logic).
- Can be reused in multiple places without rewriting code.
- Works like a LEGO block — you snap pieces together to make bigger sections of your app.
This makes apps easier to build, test, and maintain, because you focus on one piece at a time instead of the whole app at once.
JSX (JavaScript XML) is a special syntax in React that lets you write HTML-like code directly inside JavaScript.
It makes it easier to design and manage UI because you can write structure and logic together.
<h1>looks like HTML but is actually JSX.{user}lets you insert JavaScript values inside the markup.React turns JSX into JavaScript function calls that create real HTML in the browser.
Declarative UI
Describes what the UI should look like for a given state, and React automatically updates it when the state changes.
You don’t have to manually change the DOM — you just declare the final result, and React figures out the steps to get there.
Example in simple terms:
You say: “Show a button with
Count: 0.”When count changes to
1, you just declare: “Show a button withCount: 1.”React updates only what’s needed in the UI, making it fast and efficient.
Unidirectional Data flow:
Unidirectional Data Flow in React means data always moves in one direction — from a parent component down to its child components.
The parent component stores the data (state).
It passes this data to child components using props.
The child component can use the data but cannot change it directly.
If data needs to change, the child tells the parent, and the parent updates the state — which flows down again.
Virtual DOM
When something changes in your app (like a button click), React updates the Virtual DOM first, not the real one.
React then compares the Virtual DOM with the old version (this process is called diffing).
It finds only the parts that changed.
React updates just those parts in the real DOM, instead of reloading the whole page.