Throughout the history of React there have been many ways to describe what it does that makes its programming model successful and for sure there are multiple aspects to it, but let's have a look into its foundation — components.
One of the most important characteristics for building large software is its maintainability and the most scalable mental framework for maintainability is the ability to delete and replace pieces of the system. So what makes React so special about code removal?
Props
Props are the main way for a React component to receive information. It is its standard input interface. Props are pretty much the same to a React component as arguments are to a function, but with a small but important difference — components are automatically “subscribed” to the latest version of props and are getting executed automatically by React.
Another interesting detail about props is that they can contain any data type, which can be used as a backchannel for communication. For example, by calling a function a child component received over props, it can communicate back to the parent component.
Children
Children is a mechanism that gives React components 2 abilities: composition and nesting. What I mean is a particular kind of composition — the ability to render a component A inside of component B without component B knowing anything about component A. This can be achieved as well using props, in fact, “children” is a special key in props, but that’s an implementation detail. What’s important is that it enables nesting:
<ComponentA><ComponentB /></ComponentA>
Elements
React elements is generally speaking a platform-agnostic description of renderable nodes. It’s a spec that component returns to React and describes components React needs to initialize and what props and children they will receive.
The fact that we usually use JSX to describe elements or even that JSX is transpiled to a React.createElement() function call is just another implementation detail.
React has created a system that allows a component to receive data, express what needs to be rendered in return and allows it to get composed. This is the foundation and the main reason why React’s approach to building user interfaces scales — each component implements the same interface and can be replaced. In addition, the fact that React application is a tree, by replacing a single component you are able to replace an entire subtree it renders, giving you the ability to replace large building blocks at once.
It’s not about VirtualDOM, JSX, hooks, state, context, performance or pure functions. Even though they are all important, they are just implementation details.
Top comments (0)