Components

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 class that extends React.Component and implements a render method

We instantiate a component, e.g. MyComponent, as an element using JSX as <MyComponent /> or by calling React.createElement(MyComponent).

Lets take a look at each way we can define a React component.

Function Components

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 "Hello, world!".

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 text prop.

Then, we call render to render this UI hierarchy to the browser DOM.

React.Component

We can also create components by subclassing React.Component, e.g. 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.