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>
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}" />
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>
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.
- Jacco Meijer
- |
- Jan 18, 2022
Typescript interface for React UI components
How to define an interface for React UI components that prevents breaking changes.
