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
Then you build larger components consisting of the smaller ones.
Like whole forms, menus, etc.
But a component is not just an HTML template.
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!