Core React fundamentals from react.dev/learn including components, JSX, state, props, hooks, and Thinking in React methodology. Use when building React components, structuring UIs, managing state, passing props, or when the user mentions React, JSX, useState, or component architecture.
Reference for core React concepts from react.dev/learn. Covers ~80% of daily React usage.
React apps are made of components—pieces of UI with their own logic and appearance. Components are JavaScript functions that return markup.
function MyButton() {
return <button>I'm a button</button>;
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
Rules:
export default specifies the main component in the fileJSX is optional but widely used. Stricter than HTML:
<br /> not <br><div>...</div> or <>...</> (Fragment)function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}
className for CSS classes (not class)style={{ width: user.imageSize, height: user.imageSize }}—outer {} is JSX, inner {} is a JS objectCurly braces {} escape into JavaScript inside JSX:
<h1>{user.name}</h1>
<img src={user.imageUrl} alt={'Photo of ' + user.name} />
Use standard JavaScript—no special syntax:
// if/else
let content = isLoggedIn ? <AdminPanel /> : <LoginForm />;
// Ternary inside JSX
<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
// Short-circuit when no else branch
<div>{isLoggedIn && <AdminPanel />}</div>
Use map() and provide a unique key for each item:
const listItems = products.map(product => (
<li key={product.id}>{product.title}</li>
));
return <ul>{listItems}</ul>;
Keys: Use a stable unique ID from your data (e.g. product.id). React uses keys to track insertions, deletions, and reorders.
Pass handler functions—do not call them. React invokes them on user interaction.
function MyButton() {
function handleClick() {
alert('You clicked me!');
}
return <button onClick={handleClick}>Click me</button>;
}
State lets a component remember information and re-render when it changes.
import { useState } from 'react';
function MyButton() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
Clicked {count} times
</button>
);
}
useState(0) returns [currentValue, setterFunction][something, setSomething]use are HooksLifting state up: Move state to the closest common parent so siblings can share it.
export default function MyApp() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<MyButton count={count} onClick={handleClick} />
<MyButton count={count} onClick={handleClick} />
</div>
);
}
function MyButton({ count, onClick }) {
return (
<button onClick={onClick}>
Clicked {count} times
</button>
);
}
Props = data passed from parent to child. State = component's memory, changes over time.
Five steps for building UIs from react.dev/learn/thinking-in-react:
Identify the minimal set of changing data. Ask for each piece:
What remains is state. Keep it DRY—compute derived values, don't store them.
For each piece of state:
value + onChangeonFilterTextChange={setFilterText})<input
value={filterText}
onChange={(e) => onFilterTextChange(e.target.value)}
/>
| Concept | Pattern |
|---|---|
| Component | function Name() { return <... /> } |
| Props | function Child({ prop1, prop2 }) { ... } |
| State | const [val, setVal] = useState(initial) |
| Event | onClick={handler} (pass function, don't call) |
| List | items.map(item => <li key={item.id}>...</li>) |
| Conditional | {condition && <Component />} or {a ? b : c} |