FSWD · MERN Stack · The first letter lights up
Remember rendering twenty menu items by hand in Lab 5? This unit is the answer to that exact frustration. Components, JSX, props, state, lifecycle, and routing — Poshtik Campus rebuilt the way modern product teams actually build.
Your 10 sessions, in order
Same rhythm, new territory. This unit opens with folder fork #1 — React needs its own build tools, so a genuinely new poshtik-campus-react/ project is created (and Class 21 explains exactly why the old folder can't just absorb it). Your Unit-1/2 site stays finished and untouched.
Lab 5's Build-It-Twice reflection gets its answer. What React actually is, why it needs its own project, Node + npm verified, npm create vite@latest poshtik-campus-react run for real, and your first look at JSX.
SOONWhat Babel does behind the scenes, embedding expressions with { }, your Unit-2 template literals inside JSX — and the one-root-element rule, shown breaking first, then fixed with fragments.
SOONclassName (and why it isn't class), inline style objects, conditional styling — the username-in-blue exam question answered exactly as the paper asks it.
SOONThe idea the whole unit stands on: a component is a function that returns JSX. Your first DishCard, the component-tree sketch habit begins, and composing a page out of pieces.
SOONThe static rebuild: Header, Hero, DishCard and Footer components assembled into the familiar menu page — same look as your Unit-1 site, entirely new architecture underneath. Two component-building exam questions worked in full.
SOONOne DishCard, twenty dishes — props are how each card knows which dish it shows. Passing data parent-to-child, props are read-only, and the age=21 exam question solved on the spot.
SOONProps come from outside; state lives inside. useState, the cart counter that finally updates itself, and the state-vs-props comparison the exam loves to ask.
SOONMount, update, unmount — taught in the exam's own class-component vocabulary first, then the same three moments the modern way with useEffect. React events vs the raw addEventListener you know from Unit 2.
SOONposhtikMenu.map() in JSX — the twenty-dish payoff, keys and why they matter, error boundaries at survey depth, and react-router-dom turning your pages into routes of a single-page app.
SOONThe unit's finale: Home, Menu and Order as real routes, the full bilingual menu rendered from data, a working cart in state — Poshtik Campus is now a genuine single-page application, plus the three-route SPA exam question worked in full.
SOONThe running project · folder fork #1
Poshtik Campus పౌష్టిక్ క్యాంపస్ · poshtik-campus-react/ begins
The data is the continuity: the same bilingual poshtikMenu you built in Class 17 becomes the array your components map over, and the same dish photographs from your Unit-1 images/ folder move into the new project's assets. By Lab 7, the site you've been growing since Lab 1 exists twice — once as the finished static original, once as a living single-page app.
poshtik-campus-react/ — a real Vite project, created live in Class 21, growing through both labsHeader, Hero, DishCard, Footer (Lab 6), then routed pages and a stateful cart (Lab 7)poshtikMenu data — no dish hand-written twice, ever againThe component-tree sketch becomes a habit this unit — and this is why: change the route, and only part of the tree re-renders. You'll draw this shape yourself before writing any JSX.