What is a component? (the building blocks your AI keeps creating)

What it actually is

A component is a self-contained piece of your app’s interface: a button, a navigation bar, a pricing card, a whole signup form. The visual part (what it looks like) and the logic (what happens when someone clicks it) live together in one file. When your agent creates Button.tsx or Navbar.tsx, it’s building one of these pieces.

The everyday version is an email signature. You define it once, in one place, and it shows up at the bottom of every message you send. Edit the signature and every future email carries the new version, with no retyping. A component works the same way: one definition, used in many places, and a change to the definition updates every spot that uses it.

Components also nest. A page component contains a Navbar component, which contains a Logo component and a few Button components. Zoom out and your whole frontend is a tree of components inside components, with the page near the trunk and small pieces like buttons out at the leaves. When your agent mentions “the component tree”, that’s all it means.

Why your AI just did this

Frameworks like React, Vue, and Svelte are organized around components, so any agent writing frontend code thinks in them by default. Ask for a signup form and your agent will probably produce SignupForm.tsx, then split out Input.tsx and Button.tsx while it’s at it. The .tsx extension marks a TypeScript file that also contains component markup.

The agent splits things up for the same reason you’d save an email signature instead of retyping it. If every page carries its own copy-pasted button code, fixing a color means editing twelve files and hoping you found them all. With one Button component, you fix it once. The agent knows this, which is why it says things like “I’ll extract this into a reusable component” in the middle of a task.

One component can still look different in different places, and that’s what props are for. Props are the settings you pass a component each time you use it. The same Button component reads “Save” on one page and “Delete my account” on another because each page passes a different label prop. Same machine, different settings. Anything a component remembers on its own while the app runs, like whether a dropdown is open, is its state, which is a separate idea worth knowing on its own.

When you’ll run into it

The clearest sighting is your file tree. Open src/components/ and you’ll find files with capitalized names: Button.tsx, Navbar.tsx, Card.tsx. The file names copy the component names inside them, and there the capital is a rule, not a style choice: in React, <Navbar /> starts with a capital so the framework knows it’s your component, while lowercase <nav> means a plain HTML tag.

You’ll also meet components through side effects. You ask your agent to make the button on the settings page green, and suddenly every button in the app is green. That’s shared-component behavior doing exactly what it’s designed to do, just not what you meant.

And you’ll see them in error messages. React’s Each child in a list should have a unique "key" prop warning is a component complaint about repeated items. An error starting with Element type is invalid that mentions but got: undefined usually means a component file isn’t exporting or importing correctly; React’s own message even suggests you forgot to export the component or mixed up default and named imports, which often happens right after your agent moved files around.

What to check

• Open src/components/ (or components/) to see which pieces of your app are already shared before you ask for changes
• Search the project for a component’s name before restyling it, so you know how many places the change will touch
• Tell your agent whether a change is for one page or for every use; “change the shared Button” and “give this page its own variant” are different requests
• Follow the imports at the top of a page file to walk down the tree when you’re hunting for where something is defined
• Ask your agent to extract a component when you notice the same chunk of UI pasted in more than two places

Say it like a dev

Instead of: “make the button on the settings page green” Say: “Give the settings page button a green variant without changing the shared Button component”

Instead of: “the menu bar that’s at the top of every page” Say: “the Navbar component”

Instead of: “make this card say something different on the home page” Say: “Pass a different title prop to the Card component on the home page”