Components And Props
Components and Props
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called โpropsโ) and return React elements describing what should appear on the screen.
Function and Class Components
The simplest way to define a component is to write a JavaScript function:
This function is a valid React component because it accepts a single โpropsโ (which stands for properties) object argument with data and returns a React element. We call such components โfunction componentsโ because they are literally JavaScript functions.
You can also use an ES6 class to define a component:
The above two components are equivalent from Reactโs point of view.
Function and Class components both have some additional features that we will discuss in the next sections.
Rendering a Component
Previously, we only encountered React elements that represent DOM tags:
However, elements can also represent user-defined components:
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object โpropsโ.
For example, this code renders โHello, Saraโ on the page:
Letโs recap what happens in this example:
We call
ReactDOM.render()
with the<Welcome name="Sara" />
element.React calls the
Welcome
component with{name: 'Sara'}
as the props.Our
Welcome
component returns a<h1>Hello, Sara</h1>
element as the result.React DOM efficiently updates the DOM to match
<h1>Hello, Sara</h1>
.
Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example,
<div />
represents an HTML div tag, but<Welcome />
represents a component and requiresWelcome
to be in scope.To learn more about the reasoning behind this convention, please read JSX In Depth.
Composing Components
Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
For example, we can create an App
component that renders Welcome
many times:
Typically, new React apps have a single App
component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button
and gradually work your way to the top of the view hierarchy.
Extracting Components
Donโt be afraid to split components into smaller components.
For example, consider this Comment
component:
It accepts author
(an object), text
(a string), and date
(a date) as props, and describes a comment on a social media website.
This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Letโs extract a few components from it.
First, we will extract Avatar
:
The Avatar
doesnโt need to know that it is being rendered inside a Comment
. This is why we have given its prop a more generic name: user
rather than author
.
We recommend naming props from the componentโs own point of view rather than the context in which it is being used.
We can now simplify Comment
a tiny bit:
Next, we will extract a UserInfo
component that renders an Avatar
next to the userโs name:
This lets us simplify Comment
even further:
Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button
, Panel
, Avatar
), or is complex enough on its own (App
, FeedStory
, Comment
), it is a good candidate to be extracted to a separate component.
Props are Read-Only
Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum
function:
Such functions are called โpureโ because they do not attempt to change their inputs, and always return the same result for the same inputs.
In contrast, this function is impure because it changes its own input:
React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of โstateโ. State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
Last updated