Carbon React – Une bibliothèque de composants d’interface utilisateur – Partie 1 / Blogs / Perficient

Carbon React est une bibliothèque open source développée par IBM pour aider les développeurs à concevoir l’interface utilisateur. Le système Carbon Design possède son propre ensemble de styles et de thèmes de couleurs qui donnent un style cohérent tout au long de l’application. Cela permet simplement de gagner du temps pour construire les composants.

Le composant thématique de Carbon Design vous permet de donner le thème à votre application. Il propose quatre variantes de thème différentes, à savoir le thème g100, g90, g10 et blanc.

Vous pouvez également avoir un thème spécifique à un composant en carbone en utilisant le hook {useTheme}.

Dans un autre didacticiel, nous vérifierons sa mise en œuvre pour savoir comment y parvenir.

Carbon fournit divers composants d’interface utilisateur réutilisables, tels que des boutons, la saisie de texte, le squelette, le chargeur, la liste déroulante, etc.

Comment installer dans la bibliothèque et utiliser dans l’application React :

• Tout d’abord, nous allons créer notre application React par défaut en utilisant la commande ci-dessous :

npx créer-réagir-app carbone-ui

• Une fois l’application React créée, nous naviguerons vers le dossier carbon-ui :

cd carbone-ui

• Vous pouvez vérifier votre application de réaction par défaut en utilisant npm démarrer commande dans l’invite de commande.
• Maintenant, pour installer la bibliothèque Carbon UI, nous devons exécuter la commande suivante à l’aide de npm :

npm install -S @carbon/react

• Les styles Carbon sont créés en Sass, nous devons donc renommer les fichiers CSS en scss (c’est-à-dire App.scss et index.scss).
• Assurez-vous qu’après avoir renommé les fichiers, nous devons apporter les mêmes modifications au nom de fichier dans les fichiers où il a été importé. (c’est-à-dire App.js et index.js)
• Importons maintenant notre premier composant carbone dans le fichier App.js en ajoutant le code ci-dessous :

importer { Button } depuis ‘@carbon/react’

Démo du bouton

• Nous devons maintenant inclure des styles pour le composant carbone en important les styles comme ci-dessous :

@utilisez ‘@carbon/react’

• Ajoutez ce code en haut du fichier index.scss comme ci-dessous :

• Enregistrez maintenant toutes les modifications et exécutez le npm démarrer pour démarrer l’application et vérifier notre premier composant carbone.

Pour explorer davantage de composants de ce type de la bibliothèque Carbon React, veuillez visiter sa page de livre d’histoires :

URL – https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome–welcome