# React

Die Komponenten von Feitio für React: dasselbe HTML wie in Astro, die Verhalten verbinden sich von selbst.

## Installieren

Das Paket `@feitio/react` bringt die Komponenten; CSS, Icons und Illustrationen kommen aus `@feitio/core`.

```shell
npm install @feitio/core @feitio/react
```

Lade das CSS einmal, oben in der App. Die Schriften kommen mit, in `fonts.css`, ohne etwas von einer anderen Seite zu laden; wer die Schriften schon selbst ausliefert, lässt diese Datei weg.

```jsx
import '@feitio/core/css/fonts.css';
import '@feitio/core/css/feitio.css';
```

## Verwenden

Jede Komponente hat den Namen und die Props der Astro-Komponente, mit den Namen von React (`className`, `htmlFor`). Was in Astro ein benannter Slot ist (`logo`, `footer`, `do`, `dont`), ist hier eine Prop.

```jsx
import { Button, Field, Inline, Stack, TextInput } from '@feitio/react';

<Stack gap={5}>
  <Field label="Name der Erinnerung" for="nome" hint="Erscheint in der Benachrichtigung">
    <TextInput id="nome" describedBy="nome-hint" />
  </Field>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Erinnerung speichern</Button>
    <Button>Abbrechen</Button>
  </Inline>
</Stack>
```

## Verhalten

Komponenten mit Verhalten verbinden es beim Einhängen selbst: Menu, Notice, Dialog, Switch, SegmentedControl, TimeInput, FilterField, ScrollFade, BackToTop und AppShell. Es gibt nichts aufzurufen.

-   **Unkontrollierte Steuerelemente.** `value`, `checked` und `on` sagen, wie sie beginnen; `onChange` meldet, was sich geändert hat.
-   **Ein Hinweis aus dem Code:** `useNotices()` gibt `show` und `close` zurück, für das Element, auf das die `ref` des Notice zeigt.
-   **Das StatusOverlay folgt dem Zustand:** ändere `state` und `label`, und es zeigt Laden, Erfolg oder Fehler.
-   **Der Dialog öffnet sich** über jeden Button, dessen `data-open-dialog` seine id trägt.

```jsx
import { useRef } from 'react';
import { Button, Notice, useNotices } from '@feitio/react';

const saved = useRef(null);
const { show } = useNotices();

<Notice ref={saved} status="ok" title="Gespeichert" timeout={5000} hidden />
<Button onClick={() => show(saved.current)}>Speichern</Button>
```

## Icons

Ohne Angabe lesen die Icons das Sprite unter `/feitio/icons/sprite.svg`: kopiere `@feitio/core/icons/sprite.svg` dorthin. Liegt es woanders, sag es einmal, um die App herum:

```jsx
import { FeitioProvider } from '@feitio/react';

<FeitioProvider sprite="/assets/sprite.svg">
  <App />
</FeitioProvider>
```

## Dasselbe HTML

Das HTML jeder Komponente wird nur einmal geschrieben, in Astro. React wiederholt dieses HTML, und ein Test sichert es: Jeder Fall wird in beiden gerendert und Attribut für Attribut verglichen. Danach benutzt ein echter Browser die Verhalten von React, mit Maus und Tastatur, und prüft, dass die Seite ohne Unterschied hydriert.