React component guide: Class vs functional

If you’ve been coding in JavaScript for a while, you’re likely familiar with React (or ReactJS), the front-end library for building user interfaces. You probably know that it’s the most popular front-end framework in the tech world by usage[1] thanks to its flexibility, widespread use cases, ease of use, and broad support.

Today, we will go deeper into React and explore one of its fundamental building blocks: components. Using code examples, we’ll look at what React components do, compare class and functional components, and discuss which type you should use.

We’ll cover:

• What is a React component?
• What is a class component?
• What is a functional component?
• Comparing class and functional components
• Which component should you use?
• Wrapping up and next steps

It’s more complicated to get the JS file to return HTML defined elsewhere. One way of doing that is to use an HTML markup placeholder:

The <WelcomeMessage /> markup is a placeholder for what a JSX file defines with the requisite HTML.

Definition: JSX stands for JavaScript XML and allows us to write HTML in React.

Here’s how that would look:

Here, we’ve defined a function named WelcomeMessage() that can be rendered in place of the placeholder defined in the main JS file. You just need to import the function into the main JS file like this:

As a result, the JS file will return <p>Hello, World</p> instead of the placeholder <WelcomeMessage />.

In our example, we have created a React component that would return the element <p>Hello, World</p>. But React components are not limited to static HTML. You can add JavaScript logic to make them more usable.

Let’s make this example a bit more interesting. We can replace the word “World” in the HTML with a variable {place}. We can further add JavaScript logic to assign a value to our variable based on a condition:

Here, React will replace {place} with text, based on a condition in the WelcomeMessage component. The WelcomeMessage component will return an HTML element with textual value substituted for {place}.

This is the essence of a React component: to enable business logic to modify HTML fragments and return plain HTML for insertion into the DOM.

React has two ways of creating components, class, and functional components. Despite syntactical differences, they both return a piece of HTML created from a mixture of JavaScript and HTML. Let’s take a closer look at both types of components.

Class components extend from the React.Component class. React.Component objects have state, meaning the object can hold information that can change over the lifetime of the object. They can also respond to lifecycle methods, like ComponentDidMount(), ComponentDidUpdate(), and ComponentWillUnMount().

Note: Lifecycle methods enable updated state information to trigger a re-render, which updates the DOM with revised HTML markup.

Class components can also have properties (also known as props) passed to them. Props are passed as arguments to the constructor and should be passed to the parent component class by calling super(props). Props are accessible throughout the life of the object.

The render() method is required in class components and used to return an HTML element.

You can also use the arrow function syntax to create functional components:

Functional components return a single HTML element. To return more elements, you can wrap them in a topmost <div> element.

React has a built-in element for doing the same thing, the React.Fragment. Here’s what it looks like:

React treats the React.Fragment like a single HTML element (e.g., <div>), but doesn’t render it, so it doesn’t contribute to the DOM.

Although functional components have the word “component” in their name, they don’t extend from the React.Component object. Functional components are just JavaScript functions that use React hooks to provide the equivalent functionality as class components. We call them components because the functions are constructed with single props object arguments and return React elements.

A JavaScript function name can start with a lowercase letter, though this isn’t required. On the other hand, functional component names must begin with an uppercase letter.

Since functional components are not objects, you must use React hooks to manage state and lifecycle events. Hooks were not introduced into React until version 16.8, but they have effectively made class components redundant.

Functional components are also known as stateless components because they aren’t class objects and don’t maintain state. You can pass props to functional components as arguments, and they can return HTML.