> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Was ist React?

<AccordionGroup>
  <Accordion title="React">
    *Extremely popular **declarative**, **component-based**, **state-driven** JavaScript **library** for building user interfaces, created by Meta.*

    React eignet sich also besonders für die folgenden zwei Punkte:

    1. **Komponenten** basierend auf ihrem aktuellen State auf einer Webpage rendern
    2. Die **UI synchron mit dem State halten**, indem es die Seite re-rendert, wenn der State sich ändert
  </Accordion>
</AccordionGroup>

## Component-Based

React ist ein Framework, welches auf Komponenten basiert.

* Komponenten sind die **Baublöcke** unseres User Interfaces in React
* Wir bauen komplexe UIs, indem wir mehrere Komponenten bauen und diese dann miteinander wie Legosteine kombinieren

Komponenten können dabei ganz unterschiedlich sein, bspw. können sie so gross wie eine **Sidebar** sein oder so klein wie ein **Button**.

<Info>
  Komponenten können wir überall auf unserer UI widerverwenden
</Info>

## Deklarativ

<AccordionGroup>
  <Accordion title="Deklarativ">
    Wir sagen React, wie eine Komponente aussehen soll basierend auf den aktuellen Daten und dem aktuellen Status.
  </Accordion>
</AccordionGroup>

Wir **beschreiben**, wie Komponenten aussehen und wie sie funktioniert mit einer deklarativen Syntax namens **JSX**.

<AccordionGroup>
  <Accordion title="JSX">
    Eine Syntax, die HTML, CSS, JavaScript kombiniert und **andere Komponenten** referenzieren kann.
  </Accordion>
</AccordionGroup>

React bietet uns eine **Abstraktion** von unserem DOM -> **wir arbeiten niemals mit dem DOM**!

## State-Driven

<Frame caption="React">
  <img src="https://mintcdn.com/levexis-38849a2b/fK05ZPeHGTgSfJjo/images/content/web/file-excalidraw-6.svg?fit=max&auto=format&n=fK05ZPeHGTgSfJjo&q=85&s=335c520e83ebc9a966f55dd558cceb78" alt="Abbildung" width="1522" height="597" data-path="images/content/web/file-excalidraw-6.svg" />
</Frame>

<Info>
  React **reagiert** auf State-Changes, indem es die UI neu rendert.
</Info>

## Library

React wird oftmals als Framework betitelt, obwohl es das gar nicht ist.

<Warning>
  React ist eine **Library**! React deckt nur den sogenannten **View**-Teil unserer Applikation ab.
</Warning>

Jedoch gibt es einige Frameworks, die auf React aufbauen, bspw. **Next.js** und **Remix**. Diese fügen z.B. noch Routing und SSR hinzu.