Components as functions
In React, a component is often a function that returns what to show. The idea is: one function = one piece of the UI. Here we simulate that with a plain function returning a string (in real React it returns JSX).
Appy Says…
What if you could build a Button once and reuse it 200 times across your app — each with its own label, but the same design? That's the core idea of React components. Build once, compose everywhere.
What is a React Component?
A React component is a JavaScript function that returns JSX (HTML-like syntax). It's a self-contained, reusable piece of UI — like a Lego brick that you snap together to build complex interfaces.
- •A component is a function:
function Button() { return <button>Click</button>; } - •Component names start with a capital letter —
Buttonnotbutton - •Use it like an HTML tag:
<Button /> - •Props pass data in:
<Button label="Save" /> - •Components can contain other components
- •Each component manages its own appearance, state, and behaviour
Think of it like Roblox bricks
In Roblox, you build complex models from individual parts. React components are your parts — build a Header, a Card, a Sidebar, then snap them together into a page. Change the Card component and every card in the app updates instantly.
How It Works
- •1. Define:
function Card({ title, text }) { return <div><h2>{title}</h2><p>{text}</p></div>; } - •2. Export:
export default Card;orexport { Card }; - •3. Use:
<Card title="Hello" text="World" /> - •4. React calls your function, gets the JSX, and renders it to the DOM
- •5. When props change, React re-renders the component automatically
- •6. Components live in their own files:
Card.jsx
Real-World Examples
- •Every YouTube thumbnail on the homepage is the same
<VideoCard>component with different data - •TikTok's For You feed renders hundreds of
<VideoPost>components - •Spotify's song list is a
<TrackRow>component repeated for each track - •This whole app (Applaa) is made of React components
Key Facts
- •React was created at Facebook in 2011 and open-sourced in 2013
- •A React app is a tree of components — the root is usually
<App /> - •Function components replaced class components as the modern standard in 2019
- •React Native uses the same component model to build iOS and Android apps
Watch Out!
Component names MUST start with a capital letter. <button> is a native HTML button; <Button> is your custom React component. Lowercase = HTML element, Uppercase = React component. Mix them up and React silently renders the wrong thing.
Remember
A component = a function that returns JSX. Capital first letter. Export it. Use it like a tag. Props pass data in.
What You Learned
- •Components are JS functions returning JSX — the building blocks of React UIs
- •Capital names, export/import, used as JSX tags with props
- •Unlocks: reusable UI blocks, composable apps, the entire React ecosystem
Key Facts
- →React was created at Facebook in 2011 and open-sourced in 2013
- →A React app is a tree of components — the root is usually
<App /> - →Function components replaced class components as the modern standard in 2019
- →React Native uses the same component model to build iOS and Android apps
Real-World Examples
Remember
A component = a function that returns JSX. Capital first letter. Export it. Use it like a tag. Props pass data in.
Quick Quiz
What does a React component receive?