React code

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.

React solely focuses on rendering data to the Document Object Model (DOM), in other words, your HTML web page. This makes React ideal for Single Page Applications, mobile apps, or website widgets. If you're creating larger applications, React can still be a perfect choice for the UI (User Interface) and UX (User Experience) aspects, but you might need additional libraries to handle what React doesn't excel at. Here are some well-known features of 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.

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

No secure server connection: These are the most common connection errors

Knowledge Base

Error messages when looking up a website are common. Although they are often easy to solve, they still often go wrong. This could be due to a small error, but this can immediately prevent a connection error. Resolving these errors requires some steps....

Read more

Domain Name Sales Software: This is How This Comes in Handy

Digital Marketing, Knowledge Base

Domain name sales software is indispensable if you want to sell domains. Selling domains has become increasingly popular, with private domains being bought up and sold for a high profit. The easiest way to do this is with domain name sales software.

Read more

What is a widget?

Software Modernisation, Knowledge Base, React, Business software

Many people come across widgets, but they are not always clear. So many people wonder, what is a widget? We explain what exactly a widget is in this blog.

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top