React-Meisterschaft

Kursinhalt

React-Meisterschaft

React-Meisterschaft

1. Einführung in die Grundlagen von React

Was Ist React?SPAs vs. MPAs in der Webentwicklung Wie React mit dem Virtuellen DOM Arbeitet Einführung in JSX in React Erstellen Komplexer JSX-Elemente Elemente in React Rendern Herausforderung: Rendering-Element React-Komponente Props in React Herausforderung: Funktionale Komponenten Bedingte Darstellung Herausforderung: Bedingte Darstellung - Chat-Benachrichtigung Herausforderung: Bedingte Darstellung - Bankalarm Rendern Einer Datensammlung Herausforderung: Rendern Einer Datensammlung Zusammenfassung des Abschnitts Einführung in React

2. Styling in React Apps

Einführung in das Styling in React Inline-Stile Inline-Stile in der Praxis Herausforderung: Inline-Stile Styling mit der CSS-Datei Styling mit der CSS-Datei in der Praxis Herausforderung: Styling mit der CSS-Datei Styling mit CSS-Modulen Datei- und Ordnerstruktur-Organisation Herausforderung: CSS-Module Zusammenfassung des Abschnitts Styling in React

3. React Hooks und Context

Einführung: React Hooks und Context UseState-Hook Herausforderung: Sichtbarkeit Umschalten useRef-Hook Herausforderung: Erstellen Einer Formular-Komponente UseEffect-Hook Herausforderung: Daten Abrufen und Anzeigen useMemo-Hook Herausforderung: Autolistenfiltering Kontext Kontext in der Praxis Herausforderung: Welt der Astronomie App Zusammenfassung des Abschnitts React Hooks und Context

4. React in der Realen Welt

Einrichtung der Umgebung Code-Editor Einrichten des Projektordners Terminal Projekt Starten Zusammenfassung des Abschnitts 'React in der Realen Welt'

Herausforderung: Inline-Stile

Wir werden das Hinzufügen von Inline-Stilen zu einer React-Komponente üben. Folgen Sie den unten stehenden Schritten, um die Herausforderung abzuschließen:

Erstellen Sie eine neue React-Komponente namens StyledBox.
Rendern Sie innerhalb der StyledBox-Komponente ein <div>-Element.
Fügen Sie dem <div>-Element die folgenden Inline-Stile hinzu:
- Setzen Sie die Hintergrundfarbe auf "lightblue";
- Setzen Sie die Breite auf "300px";
- Setzen Sie das Padding auf "10px";
- Setzen Sie den Rahmenradius auf "10px";
- Setzen Sie die Textausrichtung auf "center";
- Setzen Sie die Schriftgröße auf "24px";
- Setzen Sie die Schriftstärke auf "bold".
Fügen Sie etwas Textinhalt in das <div>-Element ein, wie zum Beispiel Five Finger Death Punch.

Inline-Stile werden mit dem style-Attribut hinzugefügt, und der Wert für dieses Attribut sollte ein Objekt sein.
Bei der Verwendung von Inline-Stilen sollten Werte, die keine reinen Zahlen sind (wie Zeichenfolgen, Einheiten oder Farben), in Anführungszeichen "..." eingeschlossen werden. Zum Beispiel zeigt margin: "30px" an, dass die margin-Eigenschaft einen Wert von 30px hat.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4

some-alt