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.
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.