Advanced · code

Code Snippets — React

Practice typing real-world React + TypeScript code

Practice text preview

• import { useState, useEffect } from 'react'; export function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; }
• interface Props { title: string; onSave: (value: string) => void; } export const Editor: React.FC<Props> = ({ title, onSave }) => { const [text, setText] = useState(''); return <div><h2>{title}</h2><textarea value={text} onChange={e => setText(e.target.value)} /><button onClick={() => onSave(text)}>Save</button></div>; };