Introduction

‍
De nos jours, de nombreux logiciels sont construits sur le web : Skype, Discord, Visual Studio Code, Microsoft Office… Même lorsqu'un de ces logiciels est installé sur votre ordinateur, il s'agit souvent de technologies web en coulisses. Cela s'explique par le fait que le web est une plateforme multiplateforme, facilement accessible et puissante, permettant de distribuer des logiciels à moindre coût tout en offrant une expérience utilisateur moderne.
Chez The QA Company, nous utilisons souvent React pour construire nos interfaces web. Par exemple, QAnswer est construit sur cette technologie, et nous allons voir pourquoi elle est bien adaptée à ce type de système.

Qu'est-ce que React ?

‍
React est un framework web créé par Jordan Walke, un ingénieur logiciel chez Facebook, et il est open-source depuis 2013. Il permet aux développeurs d'écrire le code de l'interface d'une manière spéciale, et React le compile en HTML, JavaScript et CSS pour qu'il soit lu par n'importe quel navigateur.
Lorsqu'un développeur utilise React, il crée des composants. Pratiquement tout ce qui est rendu via React est un composant, et ils sont conçus pour être réutilisables. De plus, React s'est avéré être un outil très puissant, et une communauté a émergé, devenant l'une des plus grandes sur des plateformes de partage de développement comme StackOverflow, où React s'est classé en deuxième position dans l'enquête des développeurs de 2020 dans la catégorie des "frameworks web".
Les composants React sont constitués de plusieurs éléments :

• Un template : souvent créé avec un langage personnalisé appelé JSX, qui est un mélange de HTML et de JavaScript. Les templates sont la structure de base de l'application web.
• Des états : un état est comme une variable, mais React les gère très bien. Par exemple, un état peut être utilisé dans un template et lorsqu'il est mis à jour, le template sera re-rendu automatiquement en conséquence.
• Autres : il y a beaucoup d'autres choses comme les effets secondaires, les callbacks et les contextes, mais pour simplifier, nous pouvons regrouper ces éléments sous l'étiquette "logique de l'interface". Leur but est de connecter l'interface utilisateur aux serveurs, de gérer les interactions avec l'utilisateur, etc.

React pour QAnswer

‍
Comme je l'ai mentionné précédemment, nous utilisons React dans l'application web QAnswer, et ce choix n'est pas dû au hasard. QAnswer est plus qu'une page web, c'est une application à page unique (SPA), et nous maintenons donc un état tout au long de la navigation. Cet état inclut principalement les informations de compte utilisateur (nom d'utilisateur, jeux de données, etc.) et l'état de l'interface (quelle page l'utilisateur consulte, quel jeu de données est affiché, etc.). Ainsi, nous pouvons offrir une expérience fluide et rapide en évitant de demander au navigateur de se rafraîchir lors de la navigation entre les pages ou des requêtes aux serveurs. React nous aide à maintenir l'interface connectée à l'état actuel de l'application tout en préservant cette bonne expérience utilisateur.

Conclusion

‍
Nous avons vu ce qu'est React et pourquoi il contribue à offrir une bonne expérience utilisateur sur des applications web comme QAnswer. Si vous êtes intéressé par React et son écosystème, vous pouvez en savoir plus sur le site officiel de React : https://reactjs.org/, la documentation est très bien faite et il existe de nombreuses ressources pour apprendre.
Merci de votre lecture. J'espère que cela vous a été utile !

‍