React is built from so called "components", The word has been dropped a number of times, but what exactly are they? A Component is actually a reflection of what happens on the UI: for example, if we look at the web application below, we see that it is built from a number of blocks.

Basically you can say that everything in React is a component. This usually means a relation with a frontend object. So if you define a button somewhere on your page, that button can be classified as a component.

All components are basically independent of each other and thus can also be constructed independently of each other. Each block could be programmed as a component in React. For example, you have a Component for a menu bar, a Component for the header of a page and a Component for a login form - which can contain component for the button, the input fields, the error messages etc.

We can parse this one step further by stating, for example, that each input field is also a separate component. And each button, and perhaps also each menu item.

tip

Atomic Design

A good starting point for destructuring your front-end requirements is by taking a look at this excellent methodology envisioned by Brad Frost.

A Component is either a standalone function (function component) or a class (class component)

Although it's stated on the React site that classes will always be supported (at least for now), the "modern" approach to JavaScript - and React for that matter - is that function based development is currently the way to go.

In the next section we will technically dissect such a Component.

Calling a component

In both function and class components, we can call a component and pass arguments to it much like we create HTML elements with attributes:

import ComponentName from "./path/to/component/file/ComponentName"
...
<ComponentName stringVar="string"
               numberVar={ number }
               objectVar={ object }
               functionVar={ function } />

You can create the 'attributes' as you need, and there is also no naming convention associated.