Technologies that we use: React

Introduction

Nowadays a lot of software are built on the web: Skype, Discord, Visual Studio Code, Microsoft Office... Even when one of these is installed on your computer it is often web technologies behind the scene. This is because the web is a cross-platform, easily accessible and powerful way of distributing softwares at minimum costs while providing a modern user experience.

At The QA Company, we often use React to build our web interfaces. For instance, QAnswer is built on it and we will see why this technology is well adapted for that the kind of system.

What is React?

React is a web framework created by Jordan Walke, a software engineer at Facebook, and it is open-source since 2013. It allows developer to write the interface's code in a special way and React will compile it to HTML, JavaScript and CSS to be read by any browser.

When a developer uses React, he creates components. Virtually anything rendered via React is a component and they are designed to be reusable. Moreover React has proven to be a very powerful tool and therefore, a community has emerged and became one of the largest one across development sharing platforms like StackOverflow where React was on the second place in the 2020 developer survey in the "Web frameworks" category.

React components are made of multiple things:

• A template: often created with a custom language called JSX which is a mix between HTML and JavaScript. Templates are the skeleton of the web application.
• States: a state is like a variable but React handles them well. For instance a state can be used in a template and when it is updated, the template will be re-rendered accordingly automatically.
• Other: there are a lot of other things such as side-effects, callbacks and contexts but to keep things simple we can group these under the label "interface's logic". Their purpose is to connect the UI to the servers, to handle user interactions, etc...

React for QAnswerAs I said before, we use React in the QAnswer web application and that choice is not random. QAnswer is more than a web-page, it is a single page applicationand therefore, we maintain a state during the whole navigation. This state mostly includes the user account informations (username, datasets, ...) and the interface's state (which page the user is on, what dataset is displayed, ...). Thus, we can provide a smooth and fast experienceby not asking the browser to refresh during the navigation between pages or during queries to the servers. React helps us to keep the interface connected with the current state of the application while keeping this good user experience.

ConclusionWe have seen what React is and why it contributes to the good user experience on web applications like QAnswer. If you are interested about React and its ecosystem you can read more about it on the official React website: https://reactjs.org/, the documentation is good and there are a lot of resources for learning.