React: The Magic of Facebook
Even if you're not a developer, you've probably heard of React.js. And unless you've been living under a rock, you've definitely heard of Facebook. React.js is a JavaScript library written by one of Facebook's employees, "Jordan Walke". It all began around 2011 when Facebook encountered challenges in maintaining the code of large web applications. In 2011, Jordan Walke introduced FaxJS, the early precursor to React.
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.
Fun Fact
FaxJS is still available on GitHub, so you can see where React originated from: https://github.com/jordwalke/FaxJs
Now that we know its origin, let's delve into what React is and what it exactly does. As mentioned, React is a JavaScript library. It excels in creating interactive user interfaces and is also great for making widgets. With React, you can render simple overviews for every state in your application. However, despite its versatility, React may not be suitable for every project.
Fun Fact
The 4BIS Random Password Generator is an example of a simple application written in React.
Components
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:
Functional Components
Functional components are called using a function that returns JSX. JSX, short for JavaScript XML, is an extension of JavaScript syntax. JSX closely resembles HTML and allows components to be rendered in a syntax familiar to developers.
Class-based Components
Class-based components are indicated using ES6 classes (ECMAScript was created to standardize JavaScript). They are also known as 'stateful' components because they can store state variables throughout the component and pass them to children through props.
Virtual DOM
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.
Lifecycle Methods
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:
Mounting
Methods in this category are called when the component is created and placed in the DOM. The most important methods include:
- render()
- componentDidMount()
- constructor()
Updating
Methods in this category are called when changes occur in the component and it's re-rendered.
- render()
- componentDidUpdate()
Unmounting:
This method is called when a component is removed from the DOM.
- componentWillUnmount()
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.
Also interesting
