Guided Notes

Components & Props

Function and class components, props, destructuring, defaults, and children.

Function components

Slide 1 / 5

A component is a JavaScript function that returns JSX:

function Welcome() { return <h2>Welcome aboard!</h2>; }

Use it like a tag: <Welcome />. Rules: • Names must start with a capital letter — lowercase tags are treated as HTML elements. • Return one element (or a fragment), or null for nothing. • Keep components pure: same input, same output, no changing outside variables while rendering.

Components usually live in their own files (Welcome.jsx) and are exported for others to import.

← JSX Basics