React Tutorial Teil 3: Komponentendateien, Projektstruktur

In diesem Artikel werden wir über Komponentendateien und die Struktur von React-Projekten 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 8. Komponentendateien, Struktur von React-Projekten

→ Original

Komponentendateien

Wenn wir davon ausgehen, dass Sie die Aufgabe aus der vorherigen praktischen Lektion mit dem von create-react-app erstellten Standardprojekt ausgeführt haben, wird jetzt die Datei index.html aus dem public Ordner verwendet, deren Inhalt zu uns passt, und die Datei index.js aus dem Ordner src . in dem wir den Code schreiben. Insbesondere sieht index.js jetzt index.js aus:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Bitte beachten Sie, dass der Code der MyInfo Funktionskomponente in dieser Datei enthalten ist. Wie Sie sich erinnern, können Sie mit React viele Komponenten erstellen. Dies ist eine seiner Stärken. Es ist klar, dass das Platzieren des Codes einer großen Anzahl von Komponenten in einer Datei, obwohl technisch machbar, in der Praxis große Unannehmlichkeiten bedeutet. Daher ist der Code von Komponenten, auch von kleinen, normalerweise in separaten Dateien angeordnet. Es wird empfohlen, diesen Ansatz bei der Entwicklung von React-Anwendungen zu befolgen.

Komponentendateien erhalten Namen, die den Namen der Komponenten entsprechen, deren Code diese Dateien speichern. Platzieren Sie sie im Fall von create-react-app in demselben src Ordner, in dem sich die Datei index.js befindet. Bei diesem Ansatz wird die Datei mit der MyInfo Komponente MyInfo.js .

Erstellen Sie eine MyInfo.js Datei, übertragen Sie den MyInfo Komponentencode in diese und entfernen Sie ihn aus index.js .

Zu diesem Zeitpunkt index.js aus:

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

MyInfo.js Code von MyInfo.js folgendermaßen aus:

 function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } 

So sieht alles in VSCode aus.


Übertragen Sie den Komponentencode in eine neue Datei

Wir haben den Komponentencode von index.js , aber die Struktur, die wir jetzt haben, ist immer noch nicht funktionsfähig.

index.js daran, wozu der Befehl import React from "react" in index.js , obwohl wir hier nicht direkt auf React zugreifen. Der Grund dafür ist, dass ohne den React Import die Mechanismen dieser Bibliothek, insbesondere JSX, nicht funktionieren. Dank dieses Importbefehls konnten wir in früheren Klassen den JSX-Code an die ReactDOM.render() -Methode übergeben und das auf dieser Basis erstellte HTML-Markup auf der Seite ausgeben. All dies bedeutet, dass wir in der Datei MyInfo.js auch React importieren müssen. Dies ist bei Komponentendateien üblich.

Zweitens müssen wir sicherstellen, dass die MyInfo Funktion aus der MyInfo.js Datei in anderen Anwendungsdateien verwendet werden kann. Dafür muss es exportiert werden. Hier werden die Fähigkeiten des ES6-Standards genutzt. Infolgedessen hat der aktualisierte MyInfo.js Code die folgende Form:

 import React from "react" function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } export default MyInfo 

Lassen Sie uns nun an der Datei index.js . Wir brauchen nämlich die MyInfo Komponente, um in dieser Datei verfügbar zu sein. Sie können es in index.js verfügbar index.js importieren.

Was index.js wenn ich versuche, einen Komponentenimportbefehl basierend auf den Import- react index.js react-dom Importbefehlen in index.js ? Fügen Sie der Datei beispielsweise den folgenden Importbefehl hinzu:

 import MyInfo from "MyInfo.js" //  

Das System, das einen solchen Befehl gesehen hat und sich insbesondere auf die Tatsache stützt, dass er keine Informationen über den relativen Pfad zur Datei enthält, sucht nach der Projektabhängigkeit - dem Modul mit dem Namen, der beim create-react-app dieses Befehls angegeben wurde ( hier create-react-app wie Sie Abhängigkeiten in Projekten installieren, die mit create-react-app React create-react-app ; diese Abhängigkeiten können dann auf die gleiche Weise in React-Projekte importiert werden, wie die React-Bibliothek importiert wurde. Sie wird ein solches Modul nicht finden, daher funktioniert der Importbefehl nicht. Daher muss der Befehl zum Importieren von Dateien mit dem Pfad dazu neu geschrieben werden. In diesem Fall sind wir mit der Angabe des aktuellen Verzeichnisses ( ./ ) zufrieden und der Importbefehl hat die folgende Form:

 import MyInfo from "./MyInfo.js" //  

Wenn wir über den import sprechen, ist es außerdem wichtig zu berücksichtigen, dass er impliziert, dass JavaScript-Dateien mit seiner Hilfe importiert werden. Das heißt, die Erweiterung .js kann vollständig entfernt werden, und der import , der das unten gezeigte Formular erhalten hat, verliert seine Funktionalität nicht.

 import MyInfo from "./MyInfo" //  

Normalerweise schreiben diese JS-Dateiimportbefehle auf diese Weise.

Hier ist der vollständige index.js Datei index.js .

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

▍ Projektstruktur

Angesichts der zunehmenden Größe und Komplexität von React-Projekten ist es sehr wichtig, ihre Struktur in gutem Zustand zu halten. In unserem Fall ist es möglich, im src Ordner den components zu erstellen, in dem Dateien mit Komponentencode gespeichert werden, obwohl unser Projekt jetzt klein ist.

Erstellen Sie einen solchen Ordner und verschieben Sie die Datei MyInfo.js in diesen Ordner. Danach müssen Sie den Importbefehl dieser Datei in index.js .

Der Pfad zu MyInfo.js zeigt jetzt an, dass sich diese Datei an derselben Stelle wie index.js befindet. Tatsächlich befindet sich diese Datei jetzt im components sich im selben Ordner wie index.js . Infolgedessen index.js der relative Pfad dazu in index.js aus: ./components/MyInfo . Hier ist der aktualisierte index.js Code:

 import React from "react" import ReactDOM from "react-dom" import MyInfo from "./components/MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Und so sieht alles in VSCode aus.


Ein Ordner zum Speichern von Komponenten und zum Importieren einer Komponente aus diesem Ordner in VSCode

Tatsächlich ist ein components , der Code für alle Komponenten hosten soll, ein Beispiel für eine extrem vereinfachte Projektstruktur. In realen Projekten werden viel komplexere Ordnerstrukturen verwendet, um die Arbeit mit einer großen Anzahl von Entitäten zu vereinfachen. Was genau diese Strukturen sein werden, hängt von den Bedürfnissen des Projekts und den persönlichen Vorlieben des Programmierers ab.

Es wird empfohlen, mit allem zu experimentieren, was Sie heute gelernt haben. Sie können beispielsweise versuchen, die Datei MyInfo.js in einen Ordner zu verschieben und zu sehen, was MyInfo.js . Sie können versuchen, sie MyInfo.js und Code darin zu ändern. Wenn im Verlauf solcher Experimente der ordnungsgemäße Betrieb des Projekts gestört wird, ist es hilfreich, das Problem zu verstehen und das Projekt wieder in einen funktionsfähigen Zustand zu versetzen.

Zusammenfassung

In dieser Lektion haben wir uns mit dem Entwerfen von Komponentencode als separate Dateien, dem Exportieren und Importieren von Code mit ES6 und der Struktur von React-Projekten befasst. Das nächste Mal werden wir uns weiterhin mit den Fähigkeiten der Komponenten vertraut machen.

Liebe Leser! Wir bitten erfahrene React-Entwickler, mit Neuankömmlingen Ideen zur Organisation der Projektstruktur auszutauschen.