React Rendering
-
This lesson explains the React rendering process, including initial render, re-rendering, and how UI updates occur.
Rendering means displaying UI elements on the screen.
Root Element
The root element is the main entry point of a React app.
Example:
<div id="root"></div>React attaches the entire app to this element.
Rendering Elements
Example:
const element = <h1>Hello React</h1>;
root.render(element);
React converts elements into DOM nodes.
Re-rendering in React
React automatically re-renders UI when:
State changes
Props change
Example:
setCount(count + 1);React updates only what has changed, not the entire page.
Final Summary
JSX makes UI easy to write
JSX follows specific rules
Virtual DOM improves performance
React updates only changed UI