Lesson 2: Functional Components & Props Passing

Components are pure JavaScript functions that accept an arbitrary input object called props and return JSX describing what should appear on screen.

Component Capitalization: Component names MUST start with an uppercase letter (function UserCard() {}).

Unidirectional Data Flow: Data flows downwards from parent components to child components via props.

Props Destructuring: Extract properties cleanly inside the parameter list (function Card({ title, badge })).

⊞Code Example

// Reusable Child Component with Destructured Props

function SkillBadge({ name, level, isCertified }) {

return (

<span className="skill-level">({level})</span>

{isCertified && <span className="cert-mark">✓ Certified</span>}

</div>

);

}

// Parent Component passing props

export default function App() {

return (

<h2>Developer Skill Matrix</h2>

</div>

);

}