React Tutorial, Teil 5: Erste Schritte mit einer TODO-Anwendung, Grundlagen des Stylings

Heute, im nächsten Teil der Übersetzung des React-Schulungskurses, werden wir mit der Arbeit am ersten Schulungsprojekt beginnen und über die Grundlagen des Stylings sprechen.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 11. Workshop. TODO-Anwendung. Etappe Nummer 1

→ Original

In dieser Lektion beginnen wir mit der Arbeit an unserem ersten Schulungsprojekt - der TODO-Anwendung. Ähnliche Klassen werden als gewöhnliche Workshops gestaltet. Zunächst erhalten Sie eine Aufgabe, für deren Implementierung Sie im zuvor untersuchten Material navigieren müssen. Anschließend wird eine Lösung vorgestellt.

Wir werden noch lange an dieser Anwendung arbeiten. Wenn Sie also die create-react-app , wird empfohlen, ein separates Projekt dafür zu erstellen.

»Job

• Erstellen Sie eine neue React-Anwendung.
• Zeigen Sie die <App /> -Komponente auf der Seite mithilfe der Datei index.js .
• Die <App /> -Komponente sollte Code zum Anzeigen von 3-4 Flags mit anschließendem Text generieren. Text kann mit <p> oder <span> -Tags formatiert werden. Was Sie tun können, sollte einer Aufgabenliste ähneln, in der bereits einige Einträge vorgenommen wurden.

▍Lösung

Der Code für die Datei index.js :

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(   <App />,   document.getElementById('root') ) 

App.js :

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

So sieht das Standardprojekt zum create-react-app Apps in VSCode in dieser Arbeitsphase aus.


Projekt in VSCode

Dies wird in unserer Anwendung jetzt auf der Seite angezeigt.


App-Darstellung im Browser

Heute haben wir den ersten Schritt in Richtung einer TODO-Anwendung gemacht. Was diese Anwendung auf dem Bildschirm anzeigt, sieht jedoch nicht so angenehm aus wie das, was während unserer letzten Experimente auf den Seiten angezeigt wurde. Daher konzentrieren wir uns in der nächsten Lektion auf das Styling der Elemente.

Lektion 12. Styling in Reaktion mit CSS-Klassen

→ Original

Jetzt werden wir an der Anwendung arbeiten, die als Ergebnis des Workshops in Lektion 10 erstellt wurde. Hier ist, was die Anwendung auf dem Bildschirm angezeigt wird.


Anwendungsseite im Browser

Wir möchten die Elemente der Seite stylen. React hat viele Styling-Ansätze. Wir verwenden jetzt den Ansatz, mit dessen Prinzipien Sie wahrscheinlich bereits vertraut sind. Es besteht darin, CSS-Klassen und CSS-Regeln anzuwenden, die diesen Klassen zugewiesen sind. Werfen wir einen Blick auf die Struktur dieses Projekts und überlegen, welchen Elementen Klassen zugewiesen werden müssen, mit denen sie formatiert werden.


Projekt in VSCode

Die Datei index.js für das Rendern der App Komponente verantwortlich. Die App Komponente zeigt ein <div> -Element an, das drei weitere Komponenten enthält - Header , MainComponent und Footer . Und jede dieser Komponenten zeigt einfach ein JSX-Element mit Text an. In diesen Komponenten werden wir uns mit dem Styling beschäftigen. Lassen Sie uns an der Header Komponente arbeiten. Denken Sie daran, dass sein Code in dieser Phase seiner Arbeit folgendermaßen aussieht:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

Wenn sie mit HTML-Code arbeiten und einem bestimmten Element eine Klasse zuweisen möchten, erfolgt dies normalerweise mithilfe des class . Angenommen, wir weisen einem <header> -Element ein solches Attribut zu. Aber hier dürfen wir nicht vergessen, dass wir nicht mit HTML-Code arbeiten, sondern mit JSX. Und hier können wir das class nicht verwenden (tatsächlich können Sie das Attribut mit diesem Namen verwenden, dies wird jedoch nicht empfohlen). Stattdessen wird ein Attribut namens className . Viele Veröffentlichungen geben an, dass der Grund dafür darin liegt, dass class ein reserviertes JavaScript Schlüsselwort ist. Tatsächlich verwendet JSX jedoch die reguläre JavaScript-API, um mit dem DOM zu arbeiten. Für den Zugriff auf Elemente über diese API wird ein vertrautes Design des folgenden Formulars verwendet:

 document.getElementById("something") 

Gehen Sie wie folgt vor, um einem Element eine neue Klasse hinzuzufügen:

 document.getElementById("something").className += " new-class-name" 

In einer ähnlichen Situation ist es bequemer, die Eigenschaft von classList Elementen zu verwenden, insbesondere weil es bequeme Methoden zum Hinzufügen und Entfernen von Klassen gibt, aber in diesem Fall spielt es keine Rolle. Wichtig ist, dass hier die Eigenschaft className verwendet wird.

Tatsächlich reicht es für die Zuweisung von Klassen zu JSX-Elementen aus, zu wissen, dass das Schlüsselwort className in JSX verwendet werden muss, wenn das Schlüsselwort class in HTML verwendet wird.

Weisen Sie die Navbar-Klasse dem <header> navbar :

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

Erstellen Header.css nun im components die Datei Header.css . Geben Sie den folgenden Code ein:

 .navbar { background-color: purple; } 

Verbinden Sie diese Datei Header.js mit dem Befehl import "./Header.css" mit import "./Header.css" (mit diesem Befehl, der die Funktionen des Standardbefehls import , teilen wir dem Webpack-Bundler, der in Projekten verwendet wird, die mit create-react-app , mit, dass wir möchten Verwenden Sie Header.css in Header.js .

So wird es in VSCode aussehen.


Stildatei und ihre Verbindung in VSCode

All dies führt dazu, dass sich das Erscheinungsbild der von der Anwendung auf der Seite angezeigten obersten Zeile ändert.


Ändern Sie den Top-Line-Stil

Hier haben wir einen extrem einfachen Stil verwendet. Header.css Inhalt der Datei Header.css Folgendes:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

Öffnen Sie außerdem die Datei index.css bereits im Projekt vorhanden ist, und index.css den folgenden Stil hinzu:

 body {   margin: 0; } 

index.js diese Datei in index.js mit dem import "./index.css" . Infolgedessen hat die Anwendungsseite die in der folgenden Abbildung gezeigte Form.


Seitenstil ändern

Bitte beachten Sie, dass die in index.css angegebenen Stile alle Elemente der Seite beeinflusst haben. Wenn Sie beispielsweise eine Art Online-Editor zum Experimentieren verwenden, kann die Arbeit mit Stildateien auf besondere Weise organisiert werden. In einem solchen Editor kann beispielsweise eine einzelne Standardstildatei vorhanden sein, die automatisch mit der Seite verbunden wird. Die beschriebenen CSS-Regeln werden auf alle Elemente der Seite angewendet. In unserem einfachen Beispiel wäre es durchaus möglich, alle Stile in index.css .

Unter der Annahme, dass Sie bereits mit CSS vertraut sind, können wir sagen, dass wir hier genau den gleichen CSS-Code verwenden, der zum Stylen gewöhnlicher HTML-Elemente verwendet wird. className beim Stylen von Elementen mit Klassen in React vor allem, dass anstelle des Attributs des in HTML verwendeten class className verwendet wird.

Darüber hinaus sollte beachtet werden, dass Klassen nur React-Elementen zugewiesen werden können, z. B. <header> , <p> oder <h1> . Wenn Sie versuchen, einer Komponenteninstanz einen Klassennamen zuzuweisen, z. B. <Header /> oder <MainContent /> , verhält sich das System ganz anders als erwartet. Wir werden später darüber sprechen. Denken Sie in der Zwischenzeit daran, dass Klassen in React-Anwendungen Elementen und nicht Komponenten zugewiesen sind.

Hier ist noch etwas, das Ihnen möglicherweise schwer fällt, mit React zu beginnen. Wir sprechen über Stilelemente mit unterschiedlichen Hierarchieebenen auf der Seite. Angenommen, dies geschieht, wenn CSS Flexbox- oder CSS Grid-Technologien für das Styling verwendet werden. In solchen Fällen müssen Sie beispielsweise bei Verwendung des Flex-Layouts wissen, welche Entität der Flex-Container ist und welche Entitäten Flex-Elemente sind. Es kann nämlich schwierig sein zu verstehen, wie genau Elemente zu formatieren sind, auf welche Elemente bestimmte Stile anzuwenden sind. Angenommen, das <div> -Element aus unserer App Komponente muss ein Flex-Container sein:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

In diesem Fall werden Flex-Elemente mithilfe der Komponenten Header , MainContent und Footer angezeigt. Schauen Sie sich zum Beispiel den Header Komponentencode an:

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

Das <header> -Element muss ein direkter Nachkomme des <div> -Elements von der App Komponente sein. Es sollte als Flex-Element stilisiert werden.

Um die Stilisierung solcher Konstruktionen zu verstehen, müssen Sie den von der Anwendung generierten HTML-Code berücksichtigen. Wir öffnen die Registerkarte " Elements der Chrome-Entwicklertools für die Seite, die im Browser angezeigt wird, wenn Sie mit einem Projekt arbeiten, das mit create-react-app .


Seitencode

Das <div> -Element mit dem Bezeichner root ist das Element der index.html Seite, auf das wir in der in der Datei index.js aufgerufenen ReactDOM.render() -Methode index.js . Das von der App Komponente generierte Markup wird darin angezeigt, nämlich das nächste <div> -Element, das die von den entsprechenden Komponenten gebildeten Elemente <header> , <main> und <footer> enthält.

Das heißt, wenn wir den Code der oben angegebenen React-Anwendung analysieren, können wir davon ausgehen, dass das Konstrukt <Header /> in der App Komponente durch das Konstrukt <header className="navbar">This is the header</header> Konstrukt <header className="navbar">This is the header</header> . Wenn Sie diese Tatsache verstehen, können Sie komplexe Schemata zum Gestalten von Seitenelementen verwenden.

Damit ist unsere erste Einführung in das Styling von React-Anwendungen abgeschlossen. Es wird empfohlen, dass Sie mit dem experimentieren, was Sie gerade herausgefunden haben. Versuchen Sie beispielsweise, <MainContent /> von den <MainContent /> und <Footer /> ausgegebenen Elemente <MainContent /> .

Zusammenfassung

Heute haben wir mit der Entwicklung unseres ersten Schulungsprojekts begonnen - TODO-Anwendungen - und uns auch mit dem Styling von React-Anwendungen mithilfe von CSS-Klassen vertraut gemacht. Das nächste Mal werden wir über die Funktionen des Codestils sprechen, an die sich der Autor dieses Kurses hält, sowie über einige Dinge zu JSX und JavaScript.

Liebe Leser! Haben Sie bereits eine Idee für eine Anwendung, die Sie mit React erstellen möchten?