In diesem Thema lernst du die HTML- und CSS-Grundlagen, die du für React brauchst. Du erfährst, wie semantisches HTML aufgebaut wird, wie CSS-Styling funktioniert und welche Besonderheiten es in React gibt.

## HTML-Struktur für React-Komponenten

HTML ist das Fundament jeder React-Anwendung. In React verwendest du die gleichen HTML-Elemente wie in normalen Webseiten, aber mit ein paar wichtigen Unterschieden.

### Semantische HTML-Elemente

Die wichtigsten HTML-Elemente für React sind:

Container für andere Elemente

Inline-Text-Element

Hauptüberschrift

Unterüberschrift

Absatz mit Text

### Verschachtelte Struktur

HTML-Elemente werden ineinander verschachtelt. Jedes geöffnete Tag muss wieder geschlossen werden:

Benutzerprofil

Name: Max Mustermann

Email: max@example.com

### Wichtige HTML-Attribute

Diese Attribute werden in React besonders häufig verwendet:

## CSS-Grundlagen für Component Styling

CSS macht deine HTML-Elemente schön und funktional. Hier lernst du die wichtigsten Konzepte für React.

### CSS-Selektoren

Mit Selektoren wählst du HTML-Elemente für das Styling aus:



/* Klassen-Selektor */

.card {

  background-color: white;

  border: 1px solid #ddd;

}
/* ID-Selektor */

#profile-card {

  width: 300px;

}
/* Element-Selektor */

button {

  cursor: pointer;

}

### Das Box-Model

Jedes HTML-Element ist eine Box mit vier Bereichen:



.card {

  /* Innenabstand */

  padding: 20px;
  /* Außenabstand */

  margin: 10px;
  /* Rahmen */

  border: 2px solid #ccc;
  /* Der Inhalt wird automatisch berechnet */

}

### Flexbox für Layout

Flexbox ist perfekt für das Anordnen von Elementen:



.profile-container {

  display: flex;

  justify-content: center; /* horizontal zentrieren */

  align-items: center;     /* vertikal zentrieren */

  gap: 15px;              /* Abstand zwischen Elementen */

}

## CSS in React-Projekten

React funktioniert etwas anders als normales HTML. Hier sind die wichtigsten Unterschiede.

### className statt class

In React verwendest du `className` anstelle von `class`:

// Normales HTML

Inhalt

// React JSX

Inhalt

### Inline-Styles in React

React erlaubt Inline-Styles als JavaScript-Objekte:



const cardStyle = {

  backgroundColor: 'white',

  padding: '20px',

  borderRadius: '8px'

};
function ProfileCard() {

  return (

Mein Profil

  );

}

### CSS-Klassen vs. Inline-Styles

CSS-Klassen sind meist die bessere Wahl:

// Besser: CSS-Klassen verwenden

Profil

// Inline-Styles nur für dynamische Werte

## Vollständiges Beispiel: Benutzerprofilkarte

Hier siehst du eine komplette Benutzerprofilkarte mit HTML-Struktur und CSS-Styling:



// CSS (normalerweise in separater .css Datei)

const styles = `

.profile-card {

  background-color: white;

  border: 1px solid #e0e0e0;

  border-radius: 8px;

  padding: 24px;

  max-width: 300px;

  margin: 20px auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}
.profile-title {

  color: #333;

  margin: 0;

  font-size: 24px;

}
.profile-info {

  color: #666;

  margin: 0;

}
.profile-button {

  background-color: #007bff;

  color: white;

  border: none;

  padding: 12px 24px;

  border-radius: 4px;

  cursor: pointer;

  font-size: 16px;

}

`;
// React Komponente

function ProfileCard() {

  return (

Max Mustermann

        Email: max@example.com
      

        Rolle: Frontend Developer
      
      
    
  );

}

> **Tipp:** Verwende immer semantische HTML-Elemente und CSS-Klassen. Das macht deinen Code lesbarer und wartbarer als Inline-Styles.

Diese Grundlagen sind das Fundament für alle React-Komponenten. Du wirst diese HTML-Strukturen und CSS-Techniken in jedem React-Projekt verwenden.