Erste Schritte mit der Chakra-Benutzeroberfläche in React: Eine vollständige Anleitung

Chakra UI ist eine beliebte Open-Source-Komponentenbibliothek für React, die eine Reihe zugänglicher, wiederverwendbarer und anpassbarer UI-Komponenten bereitstellt. Der Schwerpunkt liegt auf Einfachheit, Modularität und Zugänglichkeit und hilft Entwicklern dabei, mit Leichtigkeit schöne und konsistente Benutzeroberflächen zu erstellen. Chakra UI nutzt die Leistungsfähigkeit von CSS-in-JS für das Styling und ist für die reibungslose Integration in React-Anwendungen konzipiert.

Hauptmerkmale der Chakra-Benutzeroberfläche:

1. Standardmäßig zugänglich: Die Chakra-Benutzeroberfläche wurde unter Berücksichtigung der Barrierefreiheit entwickelt. Es stellt Komponenten bereit, die sofort mit den erforderlichen Barrierefreiheitsfunktionen ausgestattet sind, wie z. B. die richtigen ARIA-Attribute, Tastaturnavigation und Fokusverwaltung.

2. Umfassende Komponentenbibliothek: Chakra UI bietet eine breite Palette vorgefertigter Komponenten wie Schaltflächen, Modalitäten, Formularelemente, Schieberegler und mehr. Diese Komponenten werden nach einem einheitlichen Designsystem gestaltet.

3. Responsive: Chakra-UI-Komponenten reagieren vollständig und passen sich problemlos an verschiedene Bildschirmgrößen an. Es verwendet einen Mobile-First-Ansatz und bietet reaktionsfähige Dienstprogramme, um Layoutänderungen basierend auf der Bildschirmgröße zu verarbeiten.

4. Anpassbar und thematisch anpassbar: Die Chakra-Benutzeroberfläche verfügt über ein integriertes Design, das Sie anpassen können. Sie können die Farben, Schriftarten und Abstände des Standarddesigns ändern und Ihr eigenes Designsystem erstellen, das Ihren Anforderungen entspricht.

5. CSS-in-JS-Styling: Chakra UI verwendet einen CSS-in-JS-Ansatz mit Hilfe der @emotion/react-Bibliothek. Dadurch können Sie Stile direkt in Ihren Komponenten definieren und so diese einfacher dynamisch und konsistent gestalten.

6. Hilfsfunktionen: Die Chakra-Benutzeroberfläche enthält mehrere Hilfsfunktionen und Hooks, die Ihnen bei der Verwaltung von Layout und Design helfen, wie z. B. useDisclosure, useBreakpointValue und andere, und die den Umgang mit Dingen wie modalem Öffnen/ schließendes und ansprechendes Design.

7. Einfach zu verwenden und zu integrieren: Die API von Chakra UI ist einfach und intuitiv und erfordert nur minimale Einrichtung. Es lässt sich auch nahtlos in andere Bibliotheken wie React Router, React Hook Form usw. integrieren.

Erste Schritte mit der Chakra-Benutzeroberfläche

Um die Chakra-Benutzeroberfläche in Ihrem React-Projekt zu verwenden, befolgen Sie diese Schritte:

1. Chakra-Benutzeroberfläche installieren:

Installieren Sie zunächst die Chakra-Benutzeroberfläche und ihre Abhängigkeiten:

   npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

@emotion/react und @emotion/styled werden für das Styling verwendet, und Framer-Motion wird für Animationen in der Chakra-Benutzeroberfläche verwendet.

1. Chakra UI Provider einrichten:

Chakra-UI-Komponenten müssen in die ChakraProvider-Komponente eingebunden werden, die das Standardthema für alle Komponenten in Ihrer App bereitstellt.

Beispiel für die Einrichtung der Chakra-Benutzeroberfläche:

   npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

In diesem Beispiel hat die Box-Komponente auf kleinen Bildschirmen einen blaugrünen 100-Hintergrund und auf mittelgroßen und größeren Bildschirmen einen violetten 100-Hintergrund.

1. Chakra-UI-Komponenten verwenden:

Chakra UI bietet eine große Auswahl an Komponenten, die einfach zu verwenden und zu konfigurieren sind. Hier ist ein Beispiel für ein Modal und einen Button:

   import React from 'react';
   import { ChakraProvider, Button } from '@chakra-ui/react';

   function App() {
     return (
       <chakraprovider>
         <div>



<p>In this example, we import ChakraProvider to provide the default theme and use the Button component from Chakra UI.</p>

<ol>
<li>
<strong>Customizing the Theme</strong>:</li>
</ol>

<p>Chakra UI’s default theme can be easily customized using the extendTheme function. You can change the colors, fonts, and other aspects of the theme globally.</p>

<p>Example of customizing the theme:<br>
</p>

<pre class="brush:php;toolbar:false">   import React from 'react';
   import { ChakraProvider, Button, extendTheme } from '@chakra-ui/react';

   // Customize the default theme
   const theme = extendTheme({
     colors: {
       brand: {
         100: '#e6fffa',
         200: '#b2f5ea',
         300: '#81e6d9',
         400: '#4fd1c5',
         500: '#38b2ac',
         600: '#319795',
         700: '#2c7a7b',
         800: '#285e61',
         900: '#234e52',
       },
     },
   });

   function App() {
     return (
       <chakraprovider theme="{theme}">
         <div>



<p>In this example, we extend the default theme with custom brand colors and use them in the Button component.</p>

<ol>
<li>
<strong>Responsive Design with Chakra UI</strong>:</li>
</ol>

<p>Chakra UI provides a responsive design system that makes it easy to build mobile-friendly layouts. You can use Chakra’s responsive utilities like useBreakpointValue to display different content based on screen size.</p>

<p>Example of responsive design:<br>
</p>

<pre class="brush:php;toolbar:false">   import React from 'react';
   import { Box, useBreakpointValue } from '@chakra-ui/react';

   function App() {
     // Dynamically change the background color based on screen size
     const bgColor = useBreakpointValue({ base: 'teal.100', md: 'purple.100' });

     return (
       <box bg="{bgColor}" height="100vh">
         <h1 id="Hello-Chakra-UI">Hello, Chakra UI</h1>
       </box>
     );
   }

   export default App;

In diesem Beispiel verwenden wir die Modal-Komponente von Chakra zusammen mit useDisclosure, um den Öffnungs-/Geschlossen-Status des Modals zu verwalten.

Abschluss

Chakra UI ist eine leistungsstarke und flexible Bibliothek zum Erstellen moderner und zugänglicher Benutzeroberflächen in React. Seine Einfachheit, einfache Anpassung und Reaktionsfähigkeit machen es zu einer ausgezeichneten Wahl für kleine und große Anwendungen. Durch die Verwendung der Chakra-Benutzeroberfläche können Sie sich auf die Funktionalität Ihrer Anwendung konzentrieren, anstatt sich um das komplexe UI-Design zu kümmern, und gleichzeitig sicherstellen, dass Ihre App auf verschiedenen Bildschirmgrößen und Geräten zugänglich und konsistent ist.