Level 1 · Complete beginner · 12 min
What a Component Really Is
A component is just a function that describes what should appear on screen.
What you will learn
- Define a component as a function that returns UI description
- Explain why components must start with a capital letter
- Distinguish calling a component function from React rendering it
- Describe why components should be pure (same input, same output)
The idea
A React component is a plain JavaScript function. It takes some input and returns a description of what should appear on the screen. React calls that function for you and turns the description into real DOM elements.
Why does this matter?
If you think components are some special template language, you will fight React instead of using it. Once you see "it is just a function", hooks, props, and re-renders all make far more sense.
A real-world analogy
A component is like a recipe card, not a finished meal. You do not eat the recipe -- a cook (React) reads it and produces the actual dish (the DOM) by following it, possibly many times over.
See it in code
function Greeting() {
return <h1>Hello, world!</h1>;
}
// React calls Greeting() for you when it needs to render it
// You never call Greeting() yourself like a normal functionLine by line
function Greeting() {Components are just functions. The capital G matters -- React treats capitalized names as components and lowercase names (like <div>) as built-in HTML tags.
return <h1>Hello, world!</h1>;The function returns a description of UI (JSX), not the actual pixels on screen. React turns this description into real DOM elements.
<Greeting />This is how you use the component elsewhere -- it looks like an HTML tag, but React calls your function behind the scenes.
What do you think happens?
If you write <Greeting /> three times on a page, how many times does React call the Greeting function (at least initially)?
Have a guess before you read on. Guessing wrong is part of learning it.
Try it yourself
Write a component called Farewell that returns an <h2> saying "Goodbye!".
Worth knowing
Common mistake: naming a component lowercase, like function greeting() {...}. React will treat <greeting /> as an unknown HTML tag, not your component, and it silently fails to render your logic. Always capitalize component names.
The proper words for it
- Component
- A JavaScript function that returns a description of UI.
- JSX
- A syntax extension that lets you write HTML-like markup inside JavaScript.
- Render
- The process of React calling your component function to get its latest UI description.
Where you'll meet this
Every button, card, and page section in apps like Instagram or Airbnb is a component -- small functions composed together into full pages, reused across the app.
Lesson recap
- A component is a function that returns a UI description
- Component names must start with a capital letter
- You do not call component functions directly -- React does, via <Tag />
- Components should be pure: same input in, same output out
Still fuzzy on any of this?
That's normal, and it's not a dead end. Pick a different way to hear it.
Quick check
1. What is a React component, fundamentally?
2. Why must component names start with a capital letter?
3. Do you call a component function yourself, like myComponent()?