#72: React.js: library that won frontends?
React.js is a JavaScript library for building dynamic user interfaces. React applications are built on top of reusable components. Components encapsulate look and feel, logic and state. Also, React has quite an advanced state propagation mechanism. In simple words, it means that the user interface is very responsive and consistent. To improve developer experience, React typically uses JSX. An extension to JavaScript language. Let’s dive deeper into why React.js became the most popular web framework. Or library. Or both. Depends who you ask.
React is component-oriented.
A component is typically an HTML snippet representing a fragment of your website.
You start with tiny components, like a single <div> or <input>.
Then you build larger components consisting of the smaller ones.
Like whole forms, menus, etc.
But a component is not just an HTML template.
It’s also JavaScript logic that drives that component.
Essentially, in a single file, HTML and JavaScript is mixed together.
At first, this sounds troublesome. After all, for many years, we were taught to separate logic from the presentation. So we ended up with large HTML files and even larger JS files. With React, JavaScript needed for each component sits right next to that component’s markup. This way we can easily share components. Also, it’s easier to navigate your application.
To allow seamless mixing of HTML and JS, a new language was invented. It’s called JavaScript Syntax Extension, JSX for short. JSX is basically JavaScript where you can embed HTML tags directly. No quotes, no string concatenation or escaping. JSX is later translated to plain JavaScript. With a library like Babel. Of course, you can also use TypeScript in TSX files.
Components are one fundamental aspect of React. The other is state management and propagation. What do I mean by that? Well, let’s say your component displays stock price. Whenever the price changes, your application receives a notification over a web socket. How do you update your component to reflect that change? In React, it’s declarative. Whenever the state changes, React traverses all your components. They are re-rendered if necessary.
However! Changes are applied on a so-called virtual DOM. It’s an in-memory copy of DOM. DOM is your actual website. Modifying DOM directly has significant costs. Recomputing layout and styles is expensive. So React avoids that at all costs. Only parts of the virtual DOM that were modified are actually propagated back to the real DOM. So if only one stock price changes, there’s no reason to update hundreds of other prices.
React is all about state management. However, some libraries try to make it even more manageable. For example Redux and MobX. Talking about libraries… React is not a full-fledged framework, like Angular. Instead, it’s just a building block that does rendering efficiently. So, a typical React application includes tons of supporting libraries. Routing, styling, testing. One might say it’s an advantage. React is very focused on doing one thing well.
On the other hand, you must make a lot of choices before your application is production-ready. With Angular or Vue.js, batteries are included. So to speak.
React.js is not just for browsers. React Native is a sibling project that allows writing portable mobile applications. There’s also Preact, with a “P”. It’s an independent library that is compatible with React, but much faster.
That’s it, thanks for listening, bye!