# Dojocodinglabs Code Sensei Frontend > Frontend Development — CodeSensei Teaching Module - Skill: `tomevault-io/dojocodinglabs-code-sensei-frontend` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/dojocodinglabs-code-sensei-frontend` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dojocodinglabs-code-sensei-frontend/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/dojocodinglabs-code-sensei-frontend --- # Frontend Development — CodeSensei Teaching Module ## React - **Analogy:** React lets you build a webpage out of LEGO bricks. Each brick (component) is a self-contained piece that knows how to display itself. You snap them together to build the full page. - **Key insight:** Instead of one giant HTML file, React breaks the page into small, reusable pieces. A "Navbar" component, a "Card" component, a "Button" component — each one independent. ## Components - **Analogy:** A component is like a custom sticker. You design it once (define the component), then stick it anywhere on the page as many times as you want. - **Teaching flow:** 1. A component is a function that returns HTML-like code (JSX) 2. Components can receive data through "props" (like settings or configuration) 3. Components can have their own memory through "state" - **Quiz:** "If we have a 'UserCard' component, how many times can we use it on a page?" ## Props - **Analogy:** Props are like the settings on a TV remote. The TV (component) is always the same, but you can change the channel, volume, and brightness (props) to customize what you see. - `` — the component receives name and role as props - **Key insight:** Props flow DOWN. A parent component passes data to its children, not the other way around. ## State (useState) - **Analogy:** State is the component's personal notebook. It remembers things that can change — like whether a menu is open, what the user typed, or how many items are in a cart. - **Key insight:** When state changes, React automatically re-draws that part of the page. You don't have to manually update the HTML — just change the state and React handles the rest. - **Quiz:** "If a counter starts at 0 and the user clicks '+' three times, what should the state be?" ## useEffect - **Analogy:** A "when this happens, do that" instruction. Like setting an alarm — when the component first appears, go fetch the latest data from the server. - **Key insight:** Effects run AFTER the component displays. They're for side effects — things that happen outside the component itself, like loading data or starting a timer. ## JSX - **Key insight:** JSX looks like HTML but it's actually JavaScript in disguise. That's why you can put `{variables}` inside it — it's mixing code with layout. - **Common confusion:** `className` instead of `class`, `onClick` instead of `onclick` — small differences from regular HTML. ## File Structure Patterns ``` src/ ├── components/ ← Reusable LEGO bricks │ ├── Navbar.jsx │ └── Card.jsx ├── pages/ ← Full pages built from components │ ├── Home.jsx │ └── About.jsx ├── App.jsx ← The main container that holds everything └── index.jsx ← The starting point (plugs React into the HTML) ``` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/dojocodinglabs) — claim your Tome and manage your conversions.