Categorization of React Components

Theming guidelines — Part 4: React Components

React is a library for building user interfaces and can be used similarly as templating languages. If you want to know if you are using React or any other templating language or library correctly read more.

Photo by Kelly Sikkema on Unsplash

General rules for templating

• templates only manage how things should look
• templates simply display data from the input
• a testable template returns same output for a specific input

React is providing options to manage state. Any state in components breaking is these rules. The solution is in separation. Components that have internal state should only provide state to components that are simply rendering UI. Model and State management should be always separated from UI. More about React component categories in a moment.

The motivation behind creating React

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.

React approaches building user interfaces differently by breaking them into components. React uses a real, full-featured programming language mainly javascript to render views.

function (data) { return UI; }

React can be described as a function that transforms data into UI.

• 💚 no direct DOM manipulation
• 💪 the full power of Javascript

Component

React approaches building user interfaces by breaking UI into components. Components are highly composable, extendible and testable building blogs of modern frontend applications.

But there are some rules you need to follow to make any software highly reusable and testable.

• provide all inputs as a function argument or component prop
• do not use global state
• eliminate internal state when possible

In summary, we have just described some fundamentals of Pure functions from functional programming. Following these rules, we will be using a desing pattern called Strategy pattern.

If you want to read more about functional programming look at the following article.

Testable Javascript -> Functional Programming -> Pure Functions

Component Strategy

Strategy pattern

The component pattern is not mentioned in Gang of Four Design Patterns but has resemblance with Strategy pattern. Both patterns are talking part of an object’s behavior and delegating it to a separate subordinate object.

The difference is that with Strategy pattern, the “strategy” object is usually stateless it encapsulates an algorithm, but no data.

example of the strategy pattern in React, using stateless functional component

“strategy” defines how an object behaves but not what it is.

Components are a bit more self-important. They often hold state that describes the object and helps define its actual identity. You may have some components that don’t need any local state.

React team is preferring use of stateless functional components, that are more like a “strategies” since they are mostly easy to test static functions.

🏗 Component Categories

Components can remind you lego building blocks.

• Every small block is like a component
• Blocks can connect to another block and form more complex component
• Blocks can be composed to achieve different visual or practical usages

The same components can be reused for different purposes

The goal is to have reusable componets that can be used for various applications

Presentational components

🧱 The base styled components

Parts that can be used to build any type of machine. We want reusability for our Components, source

• Are concerned with only how things look.
• commonly used for typography and layout
• Often only use props.children
• Examples: h1, section, div, span, Icon, Avatar(may contain className, and accessibility attributes)

💅 Presentational components

Presentational components are composed of base components and other Presentational components, source

The presentational components you create should be reusable, you should be able to take any of them customize it and place it into a different application

• Are concerned with how things look.
• Receive data and callbacks exclusively via props.
• Rarely have own state other then UI-state
• No lifecycle methods
• Example: Base components compositions

Container components

🎁 Container presenter components

presenter containers can be tested separately without application state, with minimal mock data, source

• Are concerned with how things look same as Presentational components.
• Not connected to redux, or have own state other than UI-state
• Can be tested without state or connection to the redux
• Can have lifecycle methods
• Often colocated in the same file as the container
• Example: UserPagePresenter, UserListPresenter

🎛 Container components

containers only select necessary data from application state and provide it to presenter container, source

Containers are often only HOC — Higher Order Components such as redux connect or mobx inject

• Are concerned with how things work.
• Not using styles
• Often connected to the redux or have own state
• Provide the data and behavior to presentational or composing other container components.
• Example: UserPage, UserList

Lessons learned

• dividing components into categories doesn’t mean you should put them in separate folders keep them colocated
• separation of concerns is helpful when you want to introduce change
• business logic is abstracted from presentational components and change in state management effect only containers
• a new design will affect only presentational components

Continue reading

Improve how you style React apps — Use components in defaultProps

Improve how you style React apps — Use components in defaultProps

Theming guidelines

This article is part of a block of articles about theming guidelines.

• 1. Customize Bootstrap or other toolkits, ui-frameworks or ui-libraries
• 2. Rules for HTML in systems with theming
• 3. Rules for theming and Styling with CSS, SCSS