React: The Magic of Facebook
In 2012, as Facebook faced issues with managing Facebook Ads, Jordan Walke continued to develop his prototype, and that's how React was born. 2013 marked the year when React.js was made available to the public (open-source), and over the subsequent years, its popularity grew steadily. In 2015, it was embraced by several major companies, propelling React's growth even further.
FaxJS is still available on GitHub, so you can see where React originated from: https://github.com/jordwalke/FaxJs
The 4BIS Random Password Generator is an example of a simple application written in React.
React code is built using entities called components. A React Component can be rendered to any element in the DOM. When rendering a component, you can pass variables to it, which are referred to as "props".
There are two main ways to declare React components:
One of the reasons React is so fast is its use of the Virtual DOM. Whenever a component's state changes, the DOM is updated to reflect that change. The initial change is fast, but since the DOM is structured as a tree, after the change, all children are re-rendered, slowing things down. The Virtual DOM is a virtual representation of the DOM. When a state changes, the Virtual DOM is updated instead of the actual DOM. It calculates the best way to make this change in the real DOM. This minimizes operations on the actual DOM and significantly improves the performance cost of updating it.
Lastly, let's talk about lifecycle methods. These are hooks that allow snippets of code to be executed at specific moments during a component's lifetime. Lifecycle methods fall into three categories:
Methods in this category are called when the component is created and placed in the DOM. The most important methods include:
Methods in this category are called when changes occur in the component and it's re-rendered.
This method is called when a component is removed from the DOM.
These aren't all the lifecycle methods, but they are the most common ones. In a future article, I'll delve deeper into how they work and what you can do with them.
As you can see, React offers several features that make it highly desired among developers. It's fast due to the use of the Virtual DOM, lightweight (only 46kb), and through the use of web components, you can easily reuse code.
Due to its high speed, we at 4BIS have incorporated React into several of our products. For one of our clients, we created an ordering widget with a WooCommerce backend. React.js handles the interaction with customers and fetches the right products based on the entered input.
Another client, specializing in travel sales, found WooTours limiting. For them, we revamped the ordering process by introducing a React module. React.js fetches prices for extra options from the backend and provides a clear overview of what the customer wants to order, based on their input.
4BIS Telecom sells VoIP subscriptions to small and medium-sized businesses. They needed a widget that would provide an easy overview of costs based on the number of accounts the customer wants. For this, we created a simple React module that generates a clear price estimate based on the specified number of accounts.
If you're considering using React for your project, feel free to reach out to us. We can discuss the possibilities.