A React component is a reusable piece of user interface. It can describe something small, such as a button or avatar, or a larger part of an app, such as a sidebar or page. In modern React, components are usually JavaScript functions that return JSX, and they can be combined to build an interface.
What a React component looks like
Here is a small function component and an app that uses it:
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
export default function App() {
return <Greeting name="Sam" />;
}Greeting is a function component. It receives a value named name, then returns JSX describing a heading. The App component renders it with name set to "Sam". React’s beginner guide describes components as reusable UI elements: React: Your First Component.
How components fit together
A component is a named unit of UI that React can render. Components can be nested inside other components, so a page might be assembled from smaller parts such as a navigation bar, profile card, and button. A component can also represent a larger portion of an application; React does not require every project to use one particular page structure or framework.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Think of a component as a recipe for part of the interface: its inputs and its own changing data determine what it describes. That is an analogy, not React terminology. The practical idea is to give each component a clear job, then compose components through JSX.
JSX is the description, not the component itself
JSX is a JavaScript syntax extension for describing markup. It resembles HTML, but it is not HTML. A function component returns JSX or another valid React node, and React uses that result to render the interface. In the example, <h1> is JSX for a built-in HTML element, while <Greeting /> asks React to render a component.
JavaScript expressions can appear inside JSX braces. For example, {"{name}"} inserts the value of the name variable into the heading. When a returned JSX expression spans multiple lines, wrap it in parentheses:
function Greeting({ name }) {
return (
<h1>Hello, {name}!</h1>
);
}More about JSX syntax is in React: Writing Markup with JSX.
Props: values a component receives
Props are inputs supplied by a parent component. In <Greeting name="Sam" />, the parent passes the string "Sam" through the name prop. The child reads it, often by destructuring the props object in its function parameters, as Greeting does above.
Props are read-only from the child’s perspective: a component should not mutate the values it receives. They are not limited to strings; a parent can pass objects, arrays, functions, and JSX as props. Use props when a component needs information provided from outside. See React: Passing Props to a Component.
State: information that changes over time
State is component-specific memory for information that can change, often in response to an interaction. A function component can use the useState Hook to read a state value and request an update. For example, a counter’s current number belongs in state if clicking a button changes it; a person’s name passed in by a parent belongs in props if the component simply displays it.
Keep the distinction in mind: props are supplied from outside and read by the component; state is the component’s changing memory. React’s guide to Adding Interactivity explains state and interaction.
Best Value
Component naming and placement rules
- Capitalize component names. Use names such as
Greetingand render them as<Greeting />. Lowercase JSX tags such as<h1>refer to built-in HTML elements. - Render a component through JSX. Use
<Greeting name="Sam" />rather than callingGreeting()as an ordinary function. JSX lets React manage component rendering. - Define components at the top level. Do not define a component inside another component’s function. If the inner component needs data from its parent, pass that data through props.
- Follow the Rules of React. In particular, call Hooks such as
useStateat the top level of a function component, not conditionally or inside a nested function. See React: Rules of React.
Function components and older class components
React still supports class components, so you may encounter them in existing code. However, React recommends defining components as functions for new code. This guide uses function components as the current beginner path; the React Component reference documents class components and their supported status.
When you use React components
Components can describe all of an application’s UI or selected interactive parts of a page. React is a JavaScript library for rendering user interfaces, and frameworks built on React may also generate HTML from components. The right component boundaries depend on the interface: split out parts that are useful to reuse, understand, or update independently, rather than assuming every small fragment needs its own component.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
