Things to put into every React component

There are things that I put into every React UI component, and most of these I would also start with in other frameworks like Vue.

The following is an explanation and an example – Fair warning, it’s not Earth moving, but these simple additions create a consistency that is useful as things grow and requirements change.

Basics

Folder and file naming conventions

I structure my components into a folder structure named according to the RIC hierarchy, it has served me well so far and I’m pleased I haven’t had any complaints from other Developers!

Within this structure I give my components a folder name which is a hyphenate and lowercase, that corresponds to its component name. This allows me to differentiate between the two when glancing through a file and avoid any confusion. For example:

RIC structured components

The file names are then always index.FILEEXTENSION Why? Because when a new component use case emerges, we can duplicate easily – but more on this in a later post.

In this example, the Page Header component will be exported from index.jsx as PageHeader

Separation of style

You may have noticed that I have a separate stylesheet index.scss – utilising SASS in this case.

Call me an OG, but separation of Structure, Style and Behaviour is engraved on my heart. I know that the lines can get blurred nowadays when it comes to this, but my preference is still to keep them beautifully siloed as per my intent on modifying them.

Component structure

Functional components are the way to go – A basic component structure in my project looks like this:

/components/03_modules/new-component/index.jsx
import React from "react";

import "./index.scss";

const NewComponent = (props) => {
    return (
        <div className='new-component'>
          {props.children}
        </div>
    );
};
export default NewComponent;

I always wrap my component in a div. I do this with every component and the div element has a class name that matches the folder name of the component.

This is for consistency and flexibility. For example: Imagine You have a textarea component but later you want to add a button inside the textarea. – You can’t add a button to a textarea in HTML, but you can add it to this wrapper element to give the same effect.

I also put props.children into every component to allow for the nesting of other components and content.

Utility

Classes and Style

I like to provide the opportunity to add classes and over-ride style in every component. I do this by catching the props.classes and props.styles properties of the component like this:

/components/03_modules/new-component/index.jsx
import React from "react";

import "./index.scss";

const NewComponent = (props) => {
    return (
        <div className={`new-component ${props.classes}`} style={props.styles}>
          {props.children}
        </div>
    );
};
export default NewComponent;

Then where necessary I can give additional contextual classes or styles with:

/App.js
<NewComponent classes="contextual-class1 contextual-class2" styles="{{borderColor: green}}" />

Events

It’s not always possible to know in initial designs how a user will attempt to interact with a component, users often surprise and educate us!

A common example is that of a <Card /> component. Sometimes it holds items of content which are individually clickable, and other times a user will show us that they want the entire card to be clickable, in order to navigate.

I generally add a click event handler to the component. Dependent on the type of element I will also add others.. An input of type="text" should be ready to handle focus, blur and change.

/components/03_modules/new-component/index.jsx
import React from "react";

import "./index.scss";

const NewComponent = (props) => {

    const handleClick = () => {
      if(props.click){
        props.click()
      }
    }

    return (
        <div 
          className={`new-component ${props.classes}`} 
          style={props.styles} 
          onClick={handleClick}
        >
           {props.children}
        </div>
    );
};
export default NewComponent;



That’s it! Things do of course get more complex as the application grows, but this is a good place to start.