What is a React Component?

A React Component is a building block for making user interfaces (UIs), made up of smaller blocks called React elements.

React elements are plain JavaScript objects, which describe a DOM node and its desired properties.

A React Component can be a function or class which takes some optional data as input and returns a React element which can be rendered.

One useful way to think of a React Component is in terms of a function f which takes data d as input and returns a piece of UI or view v as its output:

v = f (d)
The official React documentation describes Components as follows:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
The closest thing to components we have in Rails is shared partials, which are reusable pieces of view template code. But unlike React components, partials only have UI markup, without any logic or styling.

This hits upon a fundamental idea behind React, which distinguishes it from previous ways of building UIs.

For a long time, it has been considered best practice to separate the UI structure, styling and functionality logic into HTML, CSS and JS code respectively.

However, the creators of React argued that it would make more sense to structure apps by dividing up the UI into reusable self-contained units which include all the necessary code (HTML, CSS and JS) for that part of the UI.

From the official documentation:

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.
Now let’s look at a simple example of a React component, which displays a simple “Hello, World!” message on a web page.

First as a functional component:

function Hello() {
  return <h1>Hello, World!</h1>
It’s a very simple function which simply returns a small bit of markup to display the message inside an h1 tag.

We can also define the same component as a class as follows:

class Hello extends React.Component {
  render () {
    return (
      <h1>Hello, World!</h1>
We create our React component as a class called Hello by extending React.Component, which provides a render method, which in turn returns the actual markup for displaying “Hello world!”.

This component can be used on a webpage by calling the ReactDOM.render function passing it two arguments - the component to be rendered and the place we want it to be rendered. In this case, we want to render the Hello component inside the div with id app.

ReactDOM.render(<Hello />, document.getElementById('app'));
Note that we use a React component as if it were an HTML tag. For example, we use the Hello component by enclosing it in angle brackets: <Hello />.

You can run this code on Codepen.

Since the introduction of Hooks in React version 16.8, functional components can be used to do most things, including handling interactivity and keeping track of data changes. Before hooks, it was necessary to use class components for any such features and function components were used when we needed a simple reusable component without dealing with much logic.

We'll look at hooks in detail in the React Hooks module.

We will look at both functional and class components in much more detail as we progress through the course.