⚛

React Cheat Sheet

Functional componentComponent as a function

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Arrow componentComponent using arrow function

const Welcome = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

ExportExporting a component

export default Welcome;
export { Welcome };

ExpressionEmbed JavaScript in JSX

const element = <h1>{title}</h1>;

Conditional renderShow content conditionally

{isLoggedIn ? <Logout /> : <Login />}
{isAdmin && <AdminPanel />}

List renderRender lists with map

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

ClassNameApply CSS classes

<div className="container active">

useStateState management

const [count, setCount] = useState(0);
setCount(count + 1);

useEffectSide effects

useEffect(() => {
  fetchData();
  return () => cleanup();
}, [dependency]);

useRefMutable reference

const inputRef = useRef(null);
inputRef.current.focus();

useContextAccess context value

const theme = useContext(ThemeContext);

PropsRead-only data from parent

function Card({ title, children }) {
  return <div><h2>{title}</h2>{children}</div>;
}

Event handlerHandle user events

const handleClick = (e) => {
  e.preventDefault();
  console.log('clicked');
};
<button onClick={handleClick}>