A React component is fundamentally just a JavaScript function that accepts a single props object as its argument and returns JSX describing what should appear on screen — component names must start with a capital letter, which is exactly how React and JSX distinguish a custom component like <MyComponent /> from a plain HTML tag like <div>. Components can be composed together, nesting smaller components inside larger ones, which is the core mechanism React relies on for building complex UIs out of small, independently understandable, reusable pieces.
1Understanding Components
A React component is fundamentally just a JavaScript function that accepts a single props object as its argument and returns JSX describing what should appear on screen — component names must start with a capital letter, which is exactly how React and JSX distinguish a custom component like <MyComponent /> from a plain HTML tag like <div>. Components can be composed together, nesting smaller components inside larger ones, which is the core mechanism React relies on for building complex UIs out of small, independently understandable, reusable pieces.
Component names must start with a capital letter — lowercase names like <mycomponent /> are treated as plain HTML tags by JSX, not as your custom component, which produces confusing errors or silently renders nothing.
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Ana" />;
}2Practical Example
Here is a real-world application of Components showing how it is used in production React code.
function Card({ title, children }) {
return (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
}
function App() {
return <Card title="Profile"><p>Bio text here.</p></Card>;
}3Best Practices
Follow these guidelines when working with Components:
1. Start every component's name with a capital letter, since JSX uses that capitalization to distinguish custom components from built-in HTML tags
2. Keep each component focused on a single responsibility, composing complex UIs out of several small, focused components rather than one large one
3. Pass data into a component exclusively through its props, rather than reaching into external state directly from inside the component
Tip: Component names must start with a capital letter — lowercase names like <mycomponent /> are treated as plain HTML tags by JSX, not as your custom component, which produces confusing errors or silently renders nothing.
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Ana" />;
}4Components Must Be Pure
Given the same props, a component's render logic should always produce the same JSX, with no side effects like mutating an outside variable or firing a network request during render. React may call a component function more than once per commit — StrictMode double-invokes it in development specifically to catch this — so anything that shouldn't run twice belongs in an event handler or useEffect, never directly in the render body.
// Impure: mutates something outside during render
let renderCount = 0;
function Profile() {
renderCount++;
return <p>{renderCount}</p>;
}5Composition Over Inheritance: the children Prop
React favors composition over inheritance for sharing behavior. A component that accepts the special children prop can wrap whatever JSX its caller passes between its opening and closing tags, letting a generic wrapper like Card stay completely agnostic about the content it contains.
function Card({ title, children }) {
return <div className="card"><h2>{title}</h2>{children}</div>;
}
<Card title="Bio"><p>Any JSX at all.</p></Card>