Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Praktische Anwendung von Externem CSS | Styling-Techniken in React-Anwendungen
React Mastery

bookPraktische Anwendung von Externem CSS

Üben wir, indem wir eine Kartenkomponente erstellen, die aus drei Komponenten besteht. Ziel ist es, verschiedene Komponenten zu verwenden und Stile anzuwenden, um ein ansprechendes Erscheinungsbild zu erzielen. Wir gehen schrittweise vor, um dies zu erreichen.

Bevor wir beginnen, betrachten wir die Funktionalität der speziellen Prop children, die es ermöglicht, Komponenten, Elemente oder Text als Kindelemente zu übergeben. So funktioniert es:

const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);

Die Komponente Container enthält eine children-Prop, die die Komponenten Notification und Message aufnehmen wird. Jeglicher Inhalt, der zwischen den öffnenden und schließenden Tags der Komponente Container platziert wird, wird als deren Kinder behandelt.

Die Komponente Container hat folgenden Code:

const Container = (props) => (
  <div>{props.children}</div>
);

Hinweis

Einfache Props werden explizit definiert und innerhalb einer Komponente über ihren spezifischen Namen angesprochen. Die Prop children hingegen ermöglicht es, Komponenten, Elemente oder Text als Kinder an eine Komponente zu übergeben, ohne einen expliziten Prop-Namen 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. Die gesamte Anwendung wird aufgebaut, indem diese Komponenten innerhalb der App-Komponente integriert werden.

Beispiel:

// `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 erforderlichen Klassennamen mit dem Attribut className zu den Elementen hinzugefügt werden.

// `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

Importieren Sie die CSS-Datei in die Datei, die alle Komponenten enthält. Dies erfolgt am Anfang der Datei.

import "./index.css"; // Importing the CSS file

Schritt 4

Abschließend besteht die Möglichkeit, beliebige Stile nach eigenen Präferenzen anzuwenden.

/* 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;
}

Vollständiger App-Code:

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how the `children` prop works in more detail?

What would the code look like if I wanted to add more user information?

How can I customize the styles further for a different look?

Awesome!

Completion rate improved to 2.17

bookPraktische Anwendung von Externem CSS

Swipe um das Menü anzuzeigen

Üben wir, indem wir eine Kartenkomponente erstellen, die aus drei Komponenten besteht. Ziel ist es, verschiedene Komponenten zu verwenden und Stile anzuwenden, um ein ansprechendes Erscheinungsbild zu erzielen. Wir gehen schrittweise vor, um dies zu erreichen.

Bevor wir beginnen, betrachten wir die Funktionalität der speziellen Prop children, die es ermöglicht, Komponenten, Elemente oder Text als Kindelemente zu übergeben. So funktioniert es:

const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);

Die Komponente Container enthält eine children-Prop, die die Komponenten Notification und Message aufnehmen wird. Jeglicher Inhalt, der zwischen den öffnenden und schließenden Tags der Komponente Container platziert wird, wird als deren Kinder behandelt.

Die Komponente Container hat folgenden Code:

const Container = (props) => (
  <div>{props.children}</div>
);

Hinweis

Einfache Props werden explizit definiert und innerhalb einer Komponente über ihren spezifischen Namen angesprochen. Die Prop children hingegen ermöglicht es, Komponenten, Elemente oder Text als Kinder an eine Komponente zu übergeben, ohne einen expliziten Prop-Namen 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. Die gesamte Anwendung wird aufgebaut, indem diese Komponenten innerhalb der App-Komponente integriert werden.

Beispiel:

// `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 erforderlichen Klassennamen mit dem Attribut className zu den Elementen hinzugefügt werden.

// `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

Importieren Sie die CSS-Datei in die Datei, die alle Komponenten enthält. Dies erfolgt am Anfang der Datei.

import "./index.css"; // Importing the CSS file

Schritt 4

Abschließend besteht die Möglichkeit, beliebige Stile nach eigenen Präferenzen anzuwenden.

/* 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;
}

Vollständiger App-Code:

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6
some-alt