What Is a Component?

If you’ve been working with web development technologies for any length of time, you’ve heard of components. React is a library that emphasizes components more than most, and has changed the way a lot of developers build applications. So what makes components so special, and why do React developers in particular, use them so much?

What’s In A Component

In essence a component is a small(ish) bit of code that can be placed around an application. This might not sound that exciting until you realize how they can be used. Now since React is a UI library this leads to React components being various visual and functional elements of an application like a button or a list. But the real magic of components happens when you build them to be reusable.

Now using our button example, you can place the button around your application any number of times and just write the code for the buttons functionality and style once. Getting more advanced, you can set certain props to the button so your single button component can, say, open a link that is passed down as props, allowing you to have exactly bit of button code in your app even if you use it 10000 different times.

The best part of it all is that if you’ve written any React code at all, you’ve already made one.

Types of Components

React has two main types of components, functional (often stateless) and class (stateful). These are exactly what they sound like, functional components are literally JavaScript functions and class components are JavaScript classes.

Functional Components are the simpler of the two (until you introduce hooks) and in their most basic form are mostly used to present data. They can accept props, but they don’t natively have state, and because of that, can only show changes when the props they are given change.

Class components are the main event in React. They are full blown stateful components that can take props from a parent but also measure and track changes internally using their own state. Class components are usually used as ”controllers”, components that manage state and then pass on pieces to child components to present the results.

Functional and class components have often been called “dumb” and “smart components respectively, but this is less true now that React Hooks have come into the picture, which allow functional components to have and react to their own state.

How To Build A Component

Like I said, if you’ve written any React code you have already made a component, because pretty much everything is a component.

Components are the default in React, so whenever you create a new file you can just import or export it into any other file.

So let’s create this much talked about button as a functional component.

import React from 'react'

export default function Button(props) {
  return (
    <div>
      <button href={props.link}>{props.title}</button>
    </div>
  )
}

And viola! We have one of the simplest components imaginable, but lets dissect it.

This is designed to be a button component that takes two arguments as props, link and title. In the current setup the link will open a page at the url provided as link and the button will display the text stored as the title prop.

While this one may seem simple, its just the beginning. Think of how you can break an application up into components, and you have a good start of thinking like a React developer.