How React Makes Web Development Scalable

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.
While server and client side frameworks became very good at managing complexity behind the scenes, this does not apply to the view layer. Traditional HTML is very efficient, but limited to its native elements. Every custom tag needs to be built in a static and verbose way and then, in a second step, made dynamic by JavaScript. This breaks the development flow, because templating engines work very differently than regular code.
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 .
While preprocessing JavaScript is normal for every modern workflow, you can work with React through an extended JavaScript called JSX. There you have a very clean, simple xml-like syntax that is integrated into the Language, so code that manipulates the UI and the markup can be combined into a single file. This way there is no context switching and you can often see what’s going on immediately.

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 Imported Hello Class loop: i=1 i=2 i=3 Hello Function Hello Variable

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.

Since it is pure JavaScript, we can rely on traditional ways to organise code to make it robust and scalable. Thanks to the tree-like structure, it’s easy to find issues by going one component deeper. The attributes provide a descriptive API and as long as they don’t change there is no regression if the component is changed.
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.