Component Component Basics
Last updated: 2026-11-02
Component Component Basics
A component is the smallest reusable unit of a React application: a function that receives props and returns JSX. Once you split an interface into components, each part can be developed, tested and reused on its own, and a complete page is assembled from those pieces like building blocks. Because every component is a plain function, there is no class syntax to learn before you start.
| Group | Core Concepts |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function Welcome({ name }) { // A component = a function returning JSX; the name must be capitalized
return <h1>Hello, {name}</h1>
}
<Welcome name="Alice" /> // Used just like an HTML tag⚙️ Parameters
| props | The data object passed in by the parent; components usually destructure it directly and must treat it as read-only. |
|---|
Returns：A component function returns a piece of JSX (or null) describing what that component should render.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Under the heading "Component reuse demo" three greetings appear — Hello, Alice!, Hello, Bob! and Hello, React Learner! — the same component rendered three times with different props.💡 Key Points
🏷️ More Core Concepts
💡 Related Cases
📚 Related Tutorials
❓ FAQ
