چیت‌شیت React

1import { useState } from "react";23function Counter() {4  const [count, setCount] = useState(0);5  return <button onClick={() => setCount((value) => value + 1)}>{count}</button>;6}

1const [email, setEmail] = useState("");23<input4  type="email"5  value={email}6  onChange={(event) => setEmail(event.target.value)}7/>

1function Parent() {2  const [selectedId, setSelectedId] = useState(null);34  return <ItemList selectedId={selectedId} onSelect={setSelectedId} />;5}

1{products.map((product) => (2  <ProductCard key={product.id} product={product} />3))}

1useEffect(() => {2  function onResize() {3    setWidth(window.innerWidth);4  }56  window.addEventListener("resize", onResize);7  return () => window.removeEventListener("resize", onResize);8}, []);

1const completedCount = tasks.filter((task) => task.done).length;

1if (isLoading) return <Spinner />;2if (error) return <ErrorMessage error={error} />;3if (items.length === 0) return <EmptyState />;4return <ItemList items={items} />;

1const ThemeContext = createContext("light");23function App() {4  return (5    <ThemeContext.Provider value="dark">6      <Toolbar />7    </ThemeContext.Provider>8  );9}

1function Panel({ children }) {2  return <section className="panel">{children}</section>;3}

1const inputRef = useRef(null);23function focusInput() {4  inputRef.current?.focus();5}67return <input ref={inputRef} />;