Lassen Sie uns üben, indem wir eine Kartenkomponente erstellen, die aus drei Komponenten besteht. Wir möchten verschiedene Komponenten nutzen und Stile anwenden, um sie optisch ansprechend zu gestalten. Wir werden Schritt für Schritt vorgehen, um dies zu erreichen.

Bevor wir beginnen, lassen Sie uns die Funktionalität der speziellen Eigenschaft `children` erkunden, die es uns ermöglicht, Komponenten, Elemente oder Text als Kindelemente zu übergeben. So funktioniert es:
```jsx
const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);
```
Die `Container`-Komponente enthält eine children-Eigenschaft, die die `Notification`- und `Message`-Komponenten enthalten wird. Jeder Inhalt, der zwischen den öffnenden und schließenden Tags der `Container`-Komponente platziert wird, wird als deren Kinder behandelt.

Die `Container`-Komponente hat den folgenden Code:
```jsx
const Container = (props) => (
  <div>{props.children}</div>
);
```
> Hinweis
>
> Einfache Eigenschaften sind explizit definiert und werden innerhalb einer Komponente mit ihren spezifischen Namen aufgerufen. Andererseits ermöglicht uns die `children`-Eigenschaft, Komponenten, Elemente oder Text als Kinder an eine Komponente zu übergeben, ohne explizit einen Eigenschaftsnamen zu definieren. Sie repräsentiert den Inhalt zwischen den öffnenden und schließenden Tags der Komponente.

**Wir können beginnen.**

## Schritt 1
Wir erstellen alle notwendigen Komponenten: `Container`, `UserImage` und `UserInfo`. Lassen Sie uns die gesamte App aufbauen, indem wir diese Komponenten in die `App`-Komponente integrieren.

**Beispiel:**
```jsx
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
  <div>{props.children}</div>
);

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div>
    <p>
      <span>Name:</span> {props.name}
    </p>
    <p>
      <span>Age:</span> {props.age}
    </p>
    <p>
      <span>Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);
```

## Schritt 2
Stellen Sie sicher, dass alle wesentlichen Klassennamen mit dem `className`-Attribut zu den Elementen hinzugefügt werden.
```jsx
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div className="description">
    <p className="text">
      <span className="label">Name:</span> {props.name}
    </p>
    <p className="text">
      <span className="label">Age:</span> {props.age}
    </p>
    <p className="text">
      <span className="label">Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);
```

## Schritt 3 
Lassen Sie uns die CSS-Datei in die Datei importieren, die alle Komponenten enthält. Wir machen es am Anfang der Datei.
```js
import "./index.css"; // Importing the CSS file
```


## Schritt 4
Zuletzt haben wir die Freiheit, beliebige Stile nach unseren Vorlieben anzuwenden.
```css
/* Styling for the `Container` component */
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 3px solid #4f5e77;
  border-radius: 10px;
  width: 320px;
  background-color: #ff8a00;
}

/* Styling for the `UserImage` component */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Styling for the `UserInfo` component text */
.text {
  font-size: 22px;
  color: #bbdefb;
}

/* Styling for the `UserInfo` component label */
.label {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4f5e77;
}
```

Bringen Sie Ihre Webentwicklungsfähigkeiten auf die nächste Stufe mit dem Kurs zum Erstellen moderner Webanwendungen mit React. Lernen Sie, dynamische Benutzeroberflächen zu erstellen, Zustand und Daten effizient zu verwalten und die neuesten Technologien und Best Practices in der Webentwicklung zu nutzen. Treten Sie jetzt bei und schalten Sie das volle Potenzial von React frei, um hochinteraktive und ansprechende Web-Apps zu erstellen, die den Anforderungen der heutigen Benutzer gerecht werden.

Gewinnen Sie ein Verständnis der Kernprinzipien von React. Sie lernen JSX (JavaScript XML), den Aufbau wiederverwendbarer UI-Komponenten und das Rendern von Elementen kennen. Zusätzlich erkunden Sie die Bedeutung der Datensammlung und der bedingten Darstellung in React-Anwendungen. Am Ende dieses Abschnitts haben Sie ein solides Fundament der wesentlichen Konzepte von React, das Sie für den Erfolg in den fortgeschritteneren Themen der folgenden Abschnitte vorbereitet.

Erkunden Sie die verschiedenen Methoden, um Stile zu React-Anwendungen hinzuzufügen. Sie werden lernen, wie man Stile auf einzelne Komponenten anwendet, dynamische Stile verwendet und einen skalierbaren und wartbaren Styling-Ansatz in Ihren Projekten beibehält.

Leistungsstarke Funktionen in der modernen React-Entwicklung. Hooks revolutionieren die Art und Weise, wie wir funktionale Komponenten schreiben, indem sie eine prägnante und intuitive Möglichkeit bieten, den Zustand zu verwalten und Nebeneffekte auszuführen. Im Gegensatz dazu ermöglicht Context das Teilen von Daten durch den Komponentenbaum, ohne dass Prop Drilling erforderlich ist. Die Kombination von Hooks und Context ermöglicht ein effizientes Zustandsmanagement und eine vereinfachte Datenfreigabe in React-Anwendungen.


Schritt-für-Schritt-Anleitung, wie man ein reales React-Projekt startet. Vom Einrichten Ihrer Entwicklungsumgebung bis hin zum Verständnis der Projektorganisation und wichtiger Werkzeuge werden Sie das Wissen und das Vertrauen gewinnen, um Ihre React-Reise zu beginnen.

React-Meisterschaft

Styling mit der CSS-Datei in der Praxis

Schritt 1

Schritt 2

Schritt 3

Schritt 4

Vollständiger App-Code: