React.js - Complete Guide
Components, hooks, state, effects, routing and performance - modern React
with examples
Complete Study Guide | Key Concepts | Examples | Practice Questions
, 1. Thinking in React
React builds UIs from components - reusable functions that return JSX. Data flows down via props; the virtual
DOM makes updates efficient.
function Welcome({ name }) { // component + props
return <h1>Hello, {name}!</h1>; // JSX: HTML-like syntax in JS
}
function App() {
return (
<div>
<Welcome name="Ava" />
<Welcome name="Ben" />
</div>
);
}
// render: createRoot(document.getElementById('root')).render(<App />);
- JSX compiles to React.createElement calls; class becomes className, for becomes htmlFor.
- Components must return a single root element (or a fragment <>...</>).
- Props are read-only - never mutate them inside a component.
- Virtual DOM: React diffs the new tree against the old and patches only changed DOM nodes.
Page 1
Components, hooks, state, effects, routing and performance - modern React
with examples
Complete Study Guide | Key Concepts | Examples | Practice Questions
, 1. Thinking in React
React builds UIs from components - reusable functions that return JSX. Data flows down via props; the virtual
DOM makes updates efficient.
function Welcome({ name }) { // component + props
return <h1>Hello, {name}!</h1>; // JSX: HTML-like syntax in JS
}
function App() {
return (
<div>
<Welcome name="Ava" />
<Welcome name="Ben" />
</div>
);
}
// render: createRoot(document.getElementById('root')).render(<App />);
- JSX compiles to React.createElement calls; class becomes className, for becomes htmlFor.
- Components must return a single root element (or a fragment <>...</>).
- Props are read-only - never mutate them inside a component.
- Virtual DOM: React diffs the new tree against the old and patches only changed DOM nodes.
Page 1
