Description des applications
React JS est une librairie front-end open source qui facilite la création d’interface utilisateur et permet surtout de créer des interfaces et des composants réutilisables, avec des données qui peuvent changer en cours de route. React JS permet ainsi de créer des applications web monopage (SPA), via la création de composants dépendant d’un état et générant une page ou portion HTML à chaque changement d’état. Voici quelques exemples de mini-applications/sitewebs qui ont été crées.
Réputée pour sa flexibilité et ses performances notamment grâce au travail sur un DOM virtuel et en ne mettant à jour le rendu dans le navigateur qu’en cas de besoin.il n’y a pas non plus de bibliothèque spécifique pour la data, React n’est que la partie « Vue » de l’interface et donc le choix est libre concernant la structure de l’interface. Voici différentes mini Single page application que j’ai créées et qui peuvent être réutilisées dans d’autres applications.
Une application qui affiche des images
Cette application permet à l’utilisateur de rechercher des images via une API banque d’images. Les défis sont comment bien récupérer ces données et les afficher correctement même si les images ont différentes tailles.
Une application qui affiche une liste de commentaires
Des composants ont été crées et ont pour but d’afficher des commentaires faits par des utilisateurs. Leur image et nom sont ajoutés aux commentaires.
Création d'une liste de chansons
Cette application Widget comprend plusieurs composants: un accordéon, un composant de recherche de l’API Wikipedia. Un composant de sélection d’élément de liste déroulante. Un composant API Google Translate que j’ai volontairement bloqué lors du déploiement de l’application..
Une application clone de youtube
Cette application permet de faire une demande à l’API publique gratuite de Youtube. Suite à notre recherche, nous obtenons une liste de vidéos.
Une application qui détecte la saison
En fonction de la localisation de l’utilisateur ou de son heure et date actuelle, un contenu différent s’affiche à l’écran.Si l’utilisateur se trouve dans l’hémisphère sud de mars à octobre, l’hiver avec des images de flocons de neige s’affiche et inversement si l’utilisateur est dans l’hémisphère de mars à octobre, c’est l’été. Les défis liés à cette application sont: comment obtenir la localisation de l’utilisateur, déterminer le mois en cours et finalement modifier le texte et le style, les images à afficher selon la période et la localisation.
Création d'un blog
Voici un un blog qui a été crée avec la librairie React-Redux. Une liste d’articles ou de message extraite d’une API est affichée à l’écran. Deux composants ont été crées: le premier composé du message, titre et l’icone et le deuxième sert à afficher le nom de l’auteur.
Une application de traduction de langue
Cette application permet de traduire une langue à une autre.
L'utilisation peut écrire un texte et sélectionner une langue
cible et afficher la traduction. Une API externe que j'ai
bloqué fera automatiquement la traduction.
Une application d'une liste de chansons
Une liste de chansons a été crée et un utilisateur peut sélectionner une des chansons et afficher les détails associés à cette chanson qui a été sélectionnée.