How To Create Custom Components in React

The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

Introduction

In this tutorial, you’ll learn to create custom components in React. Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements. Buttons, menus, and any other front-end page content can all be created as components. Components can also contain state information and display markdown.

After learning how to create components in React, you’ll be able to split complex applications into small pieces that are easier to build and maintain.

In this tutorial, you’ll create a list of emojis that will display their names on click. The emojis will be built using a custom component and will be called from inside another custom component. By the end of this tutorial, you’ll have made custom components using both JavaScript classes and JavaScript functions, and you’ll understand how to separate existing code into reusable pieces and how to store the components in a readable file structure.