What Is a React Component?

The next section will provide a mental model around the nature of a React component and cover details around creating React components.

Typically a single view of a user interface (e.g., the tree or trunk) is divided up into logical chunks (e.g., branches). The tree becomes the starting component (e.g., a layout component) and then each chunk in the UI will become a sub-component that can be divided further into sub components (i.e., sub-branches). This not only keeps the UI organized but it also allows data and state changes to logically flow from the tree, to branches, then sub branches.

If this description of React components is cryptic then I would suggest that you examine any application interface and mentally start dividing the UI into logical chunks. Those chunks potentially are components. React components are the programatic abstraction (i.e., UI, events/interactions, state changes, DOM changes) making it possible to literally create these chunks and sub-chunks. For example, a lot of application UI’s will have a layout component as the top component in a UI view. This component will contain several sub-components, like maybe, a search component or a menu component. The search component can then be divided further into sub-components. Maybe the search input is a separate component from the button that invokes the search. As you can see, a UI can quickly become a tree of components. Today, software UI’s are typically created by crafting a tree of very simple single responsibility components. React provides the means to create these components via the React.createClass() function (or, React.Component if using ES6 classes). The React.createClass() function takes in a configuration object and returns a React component instance.

A React component is basically any part of a UI that can contain React nodes (via React.createElement() or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood. Sounds simple until one realizes that React components can contained other React sub-components which can result in a complex tree of components. This is not unlike the idea that React nodes can contain other React nodes in a Virtual DOM. It might hurt your brain, but if you think hard about it all a component does it wraps itself around a logical set of branches from a tree of nodes. In this sense, you define an entire UI from components using React but the result is a tree of React nodes that can easily be translated to something like an HTML document (i.e., tree of DOM nodes that produces a UI).