What is a React component?

A React component, at the most basic level, is a piece of the user interface, more specifically, a section of UI devoted to a single purpose.

With React, your UI is split up into sections, sections within those sections, then sections within those, and so on; you get the picture. Each section is its own component, and lives in a separate file.

The beauty of this system may not be obvious now, but once we dive into it, you'll see how it makes our application much more comprehendible, that is, easy for us to understand and navigate as we're developing. We'll only be building a small application with a few components. The effect increases as your application grows to hundreds of components.

Let's look at a quick example of splitting a UI into components. Here's the online store of Packt, the publishers of this book:

If we were to rebuild this in React, we would start by dividing the UI into meaningful sections. Which parts are concerned with different purposes?

Note that there is no single correct answer to this question; different developers will do it differently, but here's a division that makes sense to me: splitting it up into a FilterControl, a SearchBar, and a ResultsGrid:

Here's my thinking--the FilterControl (at the top) has to do with sorting and pagination, the SearchSideBar is all about searching for specific results, and the ResultsGrid is all about displaying matching results. Each has a very specific and distinct purpose.

Then, within those three components, we can make smaller divisions. Each book in the ResultsGrid can be a BookCard component, with a BookInfo and BookImage component within it, and so on.

How fine-grained we want to make these divisions is up to us. Generally, a greater number of smaller components is better, but one does have to write more boilerplate the more components one decides to write.

The other advantage of React componentization is reusability. Let's say that, within our ResultsGrid, we make a BookCard component for each result. Then, on the Packt home page, we can reuse the same component! No more rewriting the same code twice in two places:

Code reusability is also why smaller components are better. If you build your components to maximize reusability (to fit in the greatest number of contexts), you can build new features out of the existing parts. This increases development speed and ease. We'll build a reuseable component as part of our login form, and plug it elsewhere as our application expands.

Let's jump into our App.js file and take a look at the first component that we built:

import React, { Component } from 'react';
import './app.css';

const App = () => {
  return <h1>Hello from React!!</h1>
};

export default App;

Our App component is a function that returns a bit of JSX. That's it. This is a very handy way of thinking of React components, as functions that return part of the view. By calling certain functions in a certain order, we construct our UI.

It does, of course, get a bit more complicated than that. However, if you ever feel overwhelmed by the React syntax and concepts, come back to this core principle: React components are just functions that return parts of the UI.