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.
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 can be described as a function that transforms data into UI.
- 💚 no direct DOM manipulation
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.
You want to be a better developer, you should start writing tests. Tests will help you discover many improper habits…medium.com
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.
“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 goal is to have reusable componets that can be used for various applications
🧱 The base styled components
- 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
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 presenter components
- 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 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
- 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
Improve how you style React apps — Use components in defaultProps
Theming guidelines — Part 5 — How to solve the problem with components with a large number of propsmedium.com
This article is part of a block of articles about theming guidelines.