Akademyas Studio
Roadmap: React
Edit the content for the React roadmap page.
Page title
Save
#overview
Kicker
Title
Body
Code language
Image URL
Code
Note title
Note body
#spa
Kicker
Title
Body
Code language
Image URL
Code
// Route changes in an SPA update the view, not the whole document function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/profile" element={<Profile />} /> </Routes> </BrowserRouter> ); }
Note title
Note body
#components
Kicker
Title
Body
Code language
Image URL
Code
function Badge({ label }) { return <span className="badge">{label}</span>; } export default function App() { return <Badge label="New" />; }
Note title
Note body
#jsx
Kicker
Title
Body
Code language
Image URL
Code
const items = ["HTML", "CSS", "JS"]; <ul> {items.map((item) => <li key={item}>{item}</li>)} </ul>
Note title
Note body
#props
Kicker
Title
Body
Code language
Image URL
Code
function UserCard({ name, xp }) { return <div>{name} • {xp} XP</div>; }
Note title
Note body
#state
Kicker
Title
Body
Code language
Image URL
Code
const [count, setCount] = React.useState(0); const inc = () => setCount((c) => c + 1);
Note title
Note body
#effects
Kicker
Title
Body
Code language
Image URL
Code
React.useEffect(() => { document.title = "Count: " + count; }, [count]);
Note title
Note body
#events
Kicker
Title
Body
Code language
Image URL
Code
<button onClick={() => setOpen(true)}>Open</button>
Note title
Note body
#forms
Kicker
Title
Body
Code language
Image URL
Code
const [name, setName] = React.useState(""); <input value={name} onChange={(e) => setName(e.target.value)} />
Note title
Note body
#fetch
Kicker
Title
Body
Code language
Image URL
Code
React.useEffect(() => { let cancelled = false; fetch("/api/items") .then((r) => r.json()) .then((data) => { if (!cancelled) setItems(data); }); return () => { cancelled = true; }; }, []);
Note title
Note body