REACT.JS
A library for building user interfaces based on components. React introduced the concept of the Virtual DOM, making UI updates efficient, predictable, and declarative.
Declarative UI
In traditional JS, you manually tell the browser *how* to change the DOM. In React, you simply declare *what* the UI should look like for a given state, and React handles the updates.
Components
Isolated pieces of UI logic and visuals.
State
Data that changes over time, triggering updates.
Props
Data passed down from parent to child.
Hooks
Functions to tap into lifecycle features.
function Button() {
const [count, setCount] = useState(0);
return (
<button onClick={() => ...}>
Clicks: {count}
</button>
);
}
const [count, setCount] = useState(0);
return (
<button onClick={() => ...}>
Clicks: {count}
</button>
);
}
Render Cycle
Phase: idle
View (Component)
1. State Update
setCount(c + 1)
2. Render
React calculates diff
3. Commit
DOM updated
Why Virtual DOM?
Touching the real DOM is slow. React keeps a lightweight copy in memory. When state changes, it compares the new copy with the old one (Diffing) and only updates the specific text or attribute that changed.