Jacco Meijer
Orange green oil

Naming React components

What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.

Component?

Theoretically, everything can be a component. This is why for describing code, the word component is too implicit.

―Zen of Python

"Explicit is better than implicit"

The Zen of Python states "Explicit is better than implicit". Something more explicit than the word component describes code better. This results in clearer code and eventually in better code architecture. Overall this improves developer communication.

Below a React component scoping scheme that was created with the Zen of Python in mind.

Component scopes

Element scope

Elements are the smallest components. The name is derived from the HTML standard. An element receives data by passing children.

<Heading>This is the hading</Heading> <Abstract>This is the abstract</Abstract> <Button>Press me</Button>Copied

Model scope

Models contain elements. This is the level where visual components meet data models. A model receives data by passing data to the 'model' attribute.

<Topic model="{topic}" /> <Navigation model="{navigation}" /> <Action model="{action}" /> <Media model="{media}" />Copied

Layout scope

Layouts contain Models. Layouts take care of positioning models. A layout receives data by passing children.

<OneColumnLayout> <SomeModel /> <SomeModel /> </SidebarLayout> <TwoColumnLayout> <Topic /> <Topic /> </TwoColumnLayout>Copied

Case study: a page

Having clear component scopes helps in naming the components. When setting up a page, this is how the scopes are used.

Elements

A page requires a few typography elements like:

  • Display

  • Heading

  • Body

Models

The typography elements are used to create models:

  • Header

  • Topic

  • Footer

Layouts

The header and footer model have fixed layouts. Topic models are positioned by using a layout:

  • OneColumnSection

  • TwoColumnSection

Next

Next step in creating reusable React components is a clear component interface. The post below is about defining such an interface.

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.


NPM7 and @npmcli/arborist

@npmcli/arborist is a powerful library that handles the new npm 7 workspaces. This blog is about a simple make tool that uses the library.

Comparing React app, Nextjs and Gatsby

A new React project starts with a React toolchain. Main tools in the chains are SSR, React server components and GraphQL.

Versioning strategy for npm modules

It is important to be able to bump the version of a npm package without side effects.

React component themes and CSS variables

Creating React components with flexible themes by using CSS variables.

Content modeling with variants

The efficiency of a variant field in a content model.

Green oil

Documentation

Documenting a software project is challenging. Here's a few simple guidelines that help a team writing clear documentation.

Orange yellow oil

On Javascript transpilers, bundlers and modules

There's Javascript transpilers, modules, bundles and bundlers. This is a brief overview of all of these.

Dark orange bubbles

Javascript history

In 1986 David Ungar and Randall B. Smith developed Self at Xerox PARC. Inspired by Java, Scheme and Self Brendan Eich created Javascript in 1995.

Blue waves

Agile Scrum

The Agile Scrum framework is flexible enough to be used in many different ways. Here's one way of working.

Blue water bubbles

Contentful, Netlify and Gatsby four years later

What did we learn from using Contentful for four years?

Wheelroom hero image

What happened to Wheelroom?

Founded in 2018. Started to fly in 2020 and abandoned in 2021. What happened?

Orange oil

Typescript interface for React UI components

How to define an interface for React UI components that prevents breaking changes.

Orange green oil

Naming React components

What's in a name? A clear naming strategy helps developers communicate. Most devs rather spend time writing component code than wasting time on a good component name.