This is an evaluation on how the React toolset works as part of a modern web development project and why it is particularly suitable for scalability.
React is currently unique because it originated, and is used successfully, by the biggest social network in the world, Facebook. Nothing comes close in terms of size and complexity, back in 2012 they had 700 developers and a huge number working on their frontend.
Everybody uses these very dynamic and well designed webpages. This is why users and designers expect this level of sophistication today and developers have to keep up.
One alternative is to only use code and skip templating by operating directly on the DOM, but it is verbose and feels unnatural because in the end we create HTML without any abstraction in place.
To improve this, approaches like Angular and Web Components provide APIs for custom tags to encapsulate behaviour in a single component. But those just hide a lower level of templating and are also often unnecessarily complex.
Wouldn’t it be nice to compose components like functions while keeping the expressiveness of HTML?
React does that with a virtual DOM and JSX.
Now to protect you from the real terrifying DOM, React has its own virtual one in memory and every delta is checked first and then applied to the parsed HTML via direct DOM references. This is an extremely efficient way to apply changes and also adds a layer that can be virtualized on the server for testing and HTML rendering.
We got rid of the DOM and can further look at how the the React library supports scalable development.
Components encourage a unidirectional data flow and make state explicit. Data can only be entered into JSX elements through descriptive properties and nothing else, so every component forces the creator to think about his interface. Inside the component you usually access the properties (or child JSX elements for more powerful components) and they are immutable. If you want some complex logic or just change the UI, you can use the state attribute, but this information has no effect on the parent elements.
Let’s look at an example with a simple component that has one property:
React rendering of CombinedComponents:
Hello Class loop: i=1 i=2 i=3
This is a very basic example that displays the different kinds of components: Class, function and one just being imported.
Please note that JSX elements are just a part of regular code, so all the existing helper methods like map can be reused. They also can have descriptive variable names and organised for readability.
This perfectly encapsulates the underlying functionality, so this way you can easily have a big number of developers working “behind” one component without being affected.
Maybe this gives you some insight into why React is so popular, it’s very comfortable even for a low number of developers to work with it and build robust and maintainable software.
Today many companies use React and a growing ecosystem make it a safe bet for your stack.