Wenn du schon einmal mit React gearbeitet hast, kennst du vielleicht Material UI. Chakra UI ist eine ähnliche Komponenten-Bibliothek, die dir hilft, React-Websites schnell und einfach aufzubauen. In diesem Artikel werde ich dir zeigen, wie du Chakra UI in deinem React-Projekt einsetzen und anpassen kannst.

Was ist Chakra UI?

Chakra UI ist eine Komponenten-Bibliothek für React, die dir vorgefertigte und vorgestylte UI-React-Komponenten wie Schaltflächen, Eingabefelder, Avatare und Listen bietet. Zudem gibt es interaktive Komponenten wie Tabs, Akkordeons, Toasts, Tooltips und vieles mehr.

Der Vorteil von Chakra UI besteht darin, dass du keine Komponenten von Grund auf neu erstellen musst. Der Nachteil ist, dass die Funktionalität und das Design der Komponenten weitgehend vorgegeben sind, was dazu führen kann, dass deine Website etwas generisch wirkt. Dennoch eignet sich Chakra UI hervorragend, um schnell Prototypen und Landing-Pages zu erstellen.

Chakra UI Anpassungsmöglichkeiten

Chakra UI ermöglicht dir, fast alles im Standard-Theme deiner Website anzupassen. Du kannst sogenannte "Style Props" verwenden, um den Stil jeder vorgefertigten Komponente individuell zu ändern oder hinzuzufügen.

Chakra UI Grundlagen und Beispiele

In diesem Artikel werde ich dir die Grundlagen von Chakra UI beibringen und einige der verschiedenen Komponenten an einem einfachen Task-Manager-UI zeigen. Zudem werde ich erklären, wie du Komponenten mit Style Props anpassen und das Standard-Theme erweitern und ändern kannst, um Dinge wie Farben und Schriftarten zu ändern.

Chakra UI Voraussetzungen

Bevor du mit Chakra UI arbeiten kannst, solltest du die Grundlagen von React kennen. Chakra UI ist eine React-Komponenten-Bibliothek, daher solltest du React bereits beherrschen, bevor du mit Chakra UI arbeitest. Wenn du noch keine Erfahrung mit React hast, empfehle ich dir, zuerst einen React-Kurs zu absolvieren.

Chakra UI installieren und einrichten

In diesem Mini-Tutorial zeige ich dir, wie du mithilfe von Chakra UI eine einfache Seite in einer React-Anwendung erstellen kannst. Wir werden einige grundlegende Chakra-Komponenten verwenden, um das Layout und die Struktur unserer Seite zu gestalten.

Schritt 1: Chakra UI installieren

Stelle zunächst sicher, dass du Chakra UI in deinem Projekt installiert hast. Führe dazu den folgenden Befehl in deinem Terminal aus:

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

Schritt 2: ChakraProvider einrichten

Importiere den ChakraProvider in deiner main.jsx oder index.js Datei und umschließe deine gesamte Anwendung damit:

import * as React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

Schritt 3: Eine einfache Seite erstellen

Erstelle eine neue Datei für deine Seite, z.B. SimplePage.jsx. Importiere die benötigten Chakra-Komponenten und erstelle eine neue Funktion, in der du die Komponenten verwendest:

import React from 'react';
import { Box, Heading, Text, VStack } from '@chakra-ui/react';

const SimplePage = () => {
  return (
    <VStack spacing={4} p={4}>
      <Heading as="h1" size="2xl">
        Willkommen auf meiner einfachen Seite
      </Heading>
      <Text fontSize="lg">
        Hier ist ein Beispieltext, der zeigt, wie du eine einfache Seite mit Chakra UI erstellen kannst.
      </Text>
      <Box bgColor="blue.100" borderRadius="lg" p={4}>
        <Text>
          Dieser Text befindet sich in einer Box mit abgerundeten Ecken und einem blauen Hintergrund.
        </Text>
      </Box>
    </VStack>
  );
};

export default SimplePage;

In diesem Beispiel verwenden wir VStack, um die Elemente vertikal zu stapeln und ihnen einen gleichmäßigen Abstand zu geben. Wir verwenden die Heading-Komponente für die Überschrift, die Text-Komponente für den Fließtext und die Box-Komponente, um einen Bereich mit einem farbigen Hintergrund und abgerundeten Ecken zu erstellen.

Schritt 4: Die Seite in der App anzeigen

Importiere die SimplePage-Komponente in deiner Haupt-App-Komponente (z.B. App.jsx oder App.js) und füge sie in das JSX ein:

import React from 'react';
import SimplePage from './SimplePage';

function App() {
  return (
    <div className="App">
      <SimplePage />
    </div>
  );
}

export default App;

Schritt 5: Die Anwendung starten

Starte deine React-Anwendung mit dem folgenden Befehl:

npm start

Öffne einen Browser und navigiere zur angegebenen URL (normalerweise http://localhost:3000). Du solltest nun deine einfache Seite mit Chakra UI-Komponenten sehen.

Jetzt hast du gelernt, wie du eine einfache Seite mit Chakra UI in einer React-Anwendung erstellen kannst. Du kannst diese grundlegenden Komponenten und Konzepte verwenden, um weitere Seiten und Komponenten in deinem Projekt zu erstellen und zu gestalten.

Chakra UI die Zukunft?

Chakra UI ist eine praktische und flexible React-Komponenten-Bibliothek, die dir dabei hilft, Websites schnell und einfach zu erstellen. Mit den umfangreichen Anpassungsmöglichkeiten kannst du deiner Website einen individuellen Touch verleihen. Wenn du die Grundlagen von React beherrschst, ist Chakra UI eine hervorragende Ergänzung für deine Projekte.