Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Création d'un formulaire par étape avec React et Semantic UI

Par Valentin ALBAGNAC Publié le 11/06/2019 à 20:42:17 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Tout d'abord, nous allons voir comment réaliser une mini application avec React JS et Semantic UI React.

Qu'est-ce React JS ?

React est une bibliothèque JavaScript née en 2013 par Facebook. Grâce à cette bibliothèque, il est facile de créer des interfaces web. Les données sont stockées dans des états (state). Lorsqu'un état change, React restitue automatiquement les données dans l'interface ce qui permet une modification et un rendu facile des données affichées dans notre application.

Qu'est-ce Semantic UI React ?

Semantic UI React est la version pour React de Semantic UI qui est un Framework front-end. Cette librairie est composée d’une multitude de composants React. On peut trouver des formulaires, des modals, des cards, des listes et plein d’autres encore..

Tout au long de cet article, nous allons voir la mise en place de la librairie et l'utilisation de quelques un de ses composants.

Mettre en place Semantic UI React

Semantic UI React est présent dans le gestionnaire de paquet npm , donc il est très simple de le mettre en place. Il suffit d'exécuter les commandes suivante dans le terminal de commande, une pour les composants et l'autre pour le css.

Pour accéder au composant dans notre application, il faut les importer. Dans cet article, nous aurons juste besoin des composants suivants Step, Form, List et Message.

Mais il ne faut pas oublier d'inclure le fichier css dans index.js pour que le fichier css s'applique bien à toute notre application.

Composants

Nos composants essentiels pour la réalisation sont :

  • le composant Form

  • le composant Step

  • le composant List

  • le composant Message

Form

Ce composant va nous permettre d’avoir d'appliquer du style sur les labels et les inputs afin de pouvoir renseigner les différentes informations.

Step

Ce composant va nous permettre d'afficher et de gérer l'avancement de notre formulaire par étape.

List

Ce composant va nous permettre d’afficher nos informations renseignaient auparavant dans notre formulaire.

Message

Ce composant va nous permettre d'indiquer que le formulaire a bien été envoyé.

Fonctionnalités

Nous aurons besoin de deux fonctions, une pour enregistrer les valeurs des inputs, dans ce cas la le nom et le prénom, que l’on appellera « handleChange » et l’autre qui nous permettre de passer à la prochaine étape, que l’on appellera « nextStep ».

Rendu

1ère étape

2ème étape

3ème étape

4ème étape

Conclusion

Comme nous avons pu le voir, avec la librairie Semantic, il est très simple de mettre en place des composants déjà prêt d'utilisation sans modification avec effectuer.

On aurait pu faire un composant React pour chaque étape pour une meilleure répartition du code et une optimisation du rendu.

Voici le lien du fichier

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels