React components are the reusable building blocks we use to create the user interface of our app. We can think of a React component as a template that takes parameters as input, and outputs a React element tree.
There are 2 ways we can define a React component:
- Function components - A function that takes parameters (called
props) as input, and returns a React element
- Class components - A
React.Componentand implements a
We instantiate a component, e.g.
MyComponent, as an element using JSX as
<MyComponent /> or by calling
Lets take a look at each way we can define a React component.
The most common kind of component is a function that returns a React element.
In this example, we instantiate the component
MyComponent with a single prop,
text, equal to
The function instantiates a
div component as a React element. The
div React element contains a single child, a
button element. The
button in turn contains a single child, although in this case the child is the string we passed in as the
Then, we call
render to render this UI hierarchy to the browser DOM.
We can also create components by subclassing
class MyComponent extends React.Component, and overriding the
render() method to return a React element. This was the original component API, before function components were added to React.
This API can become significantly more complex, without providing major benefits, so it's best to use function components if you're not maintaining legacy code.