Component?

Theoretically, everything can be a component. This is why for describing code, the word component is too 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.