So erstellen Sie eine Dashboard-App mit React

Seite 1 von 2: Erstellen Sie eine Dashboard-App in React - Schritte 1-10

In diesem Tutorial werden wir durchgehen Wie erstelle ich eine App? mit Reagieren - eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Dies Webdesign-Tool ist besonders nützlich bei der Erstellung von Komponenten und bietet erhebliche Vorteile gegenüber jQuery.

Durch die Möglichkeit, eigenständige, wiederverwendbare Komponenten zu erstellen, können Sie den Code kleiner und übersichtlicher halten. Wenn die Komponenten gut genug eingerichtet sind, können sie bei Bedarf ohne zusätzliche Einrichtung eingesetzt werden.

In diesem Tutorial erstellen wir eine Dashboard-Anwendung, die wichtige Support-Metriken im Auge behält. Der Bildschirm ist in ein Raster unterteilt, das angepasst werden kann, um je nach den anzuzeigenden Daten unterschiedliche Grafiken anzuzeigen.



Indem wir eine generische Widget-Komponente erstellen, können wir die Anzeige zerhacken und ändern, ohne den zugrunde liegenden Code zu beeinflussen. Wenn wir diese in eine Containerkomponente einwickeln, können wir die Quelle dieser Daten getrennt von ihrer Anzeige steuern.

Wir werden davon Gebrauch machen CSS-Raster um Inhalte in definierten Blöcken anzuzeigen. Browser, die dies nicht unterstützen, werden in einer einzelnen Spalte angezeigt, ähnlich wie bei Verwendung eines kleineren Bildschirms.

das beste Graffiti der Welt

Laden Sie die Dateien für dieses Tutorial herunter Hier .

01. Laden Sie die Abhängigkeiten herunter

Nachdem wir die Projektdateien erhalten haben, müssen wir alle erforderlichen Pakete abrufen, die wir für das Projekt benötigen. Dazu gehören Dateien aus 'create-react-app', die sich mit dem Build-Prozess für uns befassen.

Wir müssen auch zwei Server ausführen - einen, der das Hot-Reload für die Seite ermöglicht, und einen, der einige gefälschte Daten zum Testen bereitstellt.

Geben Sie im Projektverzeichnis Folgendes in die Befehlszeile ein:

/* in one window */ > yarn install > yarn start /* in another window */ > yarn serve

02. Fügen Sie das erste Widget hinzu

Dashboard-App reagieren

Beginnen Sie mit einer einfachen Komponente

Zu Beginn werden wir eine einfache Komponente auf der Seite rendern. Mit Babel können wir Komponenten mit ES2015-Klassen schreiben. Alles was wir tun müssen, ist sie zu importieren, wenn wir müssen und Babel mit Webpack wird den Rest erledigen.

Aufmachen /src/components/App.js und fügen Sie den Import oben auf der Seite hinzu. Platzieren Sie dann innerhalb der Renderfunktion die Komponente im Container .

import Widget from '../components/Widget'; […]

03. Gestalten Sie ein Widget-Feld

Dashboard-App reagieren

Beim Importieren von CSS mit Webpack können Stile nur auf die betreffende Komponente beschränkt werden, um zu vermeiden, dass sie in andere Teile der Seite gelangen

In diesem Projekt ist Webpack so eingerichtet, dass CSS-Importe erfasst werden. Dies bedeutet, dass wir CSS-Dateien wie im vorherigen Schritt mit JavaScript importieren können, wodurch wir für jede Komponente separate Dateien erstellen können. Fügen Sie den folgenden Import oben in Widget.js hinzu. Dies wird mit dem Klassennamen 'Widget' verknüpft und die Stile auf diese Komponente übertragen.

import '../styles/Widget.css';

04. Überschrift und Inhalt hinzufügen

Jedes Widget benötigt eine kurze Beschreibung der angezeigten Daten. Um die Anpassbarkeit zu gewährleisten, geben wir dies als Eigenschaft - oder 'Requisite' - an die Komponente weiter, wenn wir es verwenden.

Was den Inhalt betrifft, liefert React eine spezielle 'Kinder'-Requisite, die den Inhalt enthält, der zwischen den öffnenden und schließenden Tags einer Komponente eingegeben wird.

Ersetzen Sie den Platzhalter

{this.props.heading}

{this.props.loading ? :''} {this.props.children}

05. Lassen Sie das Widget das Raster überspannen

Dashboard-App reagieren

Mit der CSS-Grid-Spezifikation werden Layoutelemente wie Dachrinnen angewendet, unabhängig davon, welches Design auf untergeordnete Elemente angewendet wird

Zusätzlich zu den von uns importierten Stylesheets können wir auch dynamisch React-Stile erstellen, die auf den übergebenen Requisiten basieren.

Verwenden Sie die Eigenschaften für Rasterspalten und Rasterzeilen, um Spalten und Zeilen mit CSS Grid zu überspannen. Wir können die Requisiten 'colspan' und 'rowspan' durchlaufen, um dies pro Komponente auf ähnliche Weise zu ändern, wie Tabellenzellen in HTML funktionieren.

Wenden Sie Stile im Widget-Konstruktor an und verknüpfen Sie sie mit dem Container .

if (props.colspan !== 1) { this.spanStyles.gridColumn = `span ${props.colspan}`; } if (props.rowspan !== 1) { this.spanStyles.gridRow = `span ${props.rowspan}`; } […]

06. Standardrequisiten liefern

Im Moment ist unser Widget leer, da wir noch keine Requisiten liefern. In diesen Fällen können wir stattdessen Standard-Requisiten bereitstellen.

Sofern nicht anders angegeben, nimmt CSS Grids standardmäßig die kleinste Einheit ein, die es kann. In diesem Fall handelt es sich um ein 1x1-Quadrat. Geben Sie kurz vor dem Exportieren des Widgets einige Standard-Requisiten an.

Welche Schriftart sind Sie Instagram-Filter
Widget.defaultProps = { heading: 'Unnamed Widget', colspan: 1, rowspan: 1 }

07. Erzwinge bestimmte Requisiten

Dashboard-App reagieren

Wie bekomme ich ein Bild in Photoshop?
Die NumberDisplay-Komponente ist eine Präsentationskomponente, da sie keinen internen Status hat und sich vollständig auf die an sie übergebenen Requisiten stützt

Komponenten können Hinweise geben, welche Art von Werten als Requisiten gesendet werden sollen. Während der Entwicklung einer Anwendung werden falsch übergebene Requisiten in der Konsole als Warnungen angezeigt, um Fehler zu vermeiden.

Definieren Sie direkt unter den Standard-Requisiten, welche Requisiten übergeben werden sollen oder müssen und welchen Typ sie haben sollen.

Widget.propTypes = { heading: React.PropTypes.string, colspan: React.PropTypes.number, rowspan: React.PropTypes.number, children: React.PropTypes.element.isRequired }

08. Requisiten zur App hinzufügen

Wenn Sie die Requisite 'Kinder' nach Bedarf definieren, stellen Sie möglicherweise fest, dass sich der Browser beschwert, dass er derzeit nicht definiert ist. Dies wird die App zwar nicht beschädigen, uns aber so lange nerven, bis sie sortiert ist.

Gehen Sie zurück zu App.js und fügen Sie dem zuvor erstellten Widget eine Überschriften-Requisite hinzu. Anstatt das Tag selbstschließend zu machen, öffnen Sie es und fügen Sie Platzhalterinhalte hinzu, um zu zeigen, dass es funktioniert.

This is some content

09. Einige Daten anzeigen

Dashboard-App reagieren

Wir können die @ support-Syntax in CSS verwenden, um festzustellen, ob der Browser Rasterlayouts unterstützt oder nicht. Wenn nicht, verwenden wir standardmäßig die einspaltige Ansicht

Die NumberDisplay-Komponente funktioniert ähnlich wie das gerade erstellte Widget. Sie rendert Text, der ausschließlich auf den Requisiten basiert, die wir an ihn übergeben. Wir können es dort ablegen, wo wir es brauchen, und eine konsistente Anzeige numerischer Daten haben.

Importieren Sie die NumberDisplay-Komponente oben und ersetzen Sie damit den soeben in Widget hinzugefügten Platzhalterinhalt.

import NumberDisplay from '../components/NumberDisplay'; […]

10. In NumberWidget konvertieren

Im Moment wird ziemlich viel Code verwendet, um etwas anzuzeigen, das sich über Widgets hinweg nicht ändert. Wir können eine spezielle Komponente erstellen, um alles zu kapseln. Auf diese Weise müssen wir nur NumberWidget importieren.

Ersetzen Sie die Widget- und NumberDisplay-Importe oben in App.js durch NumberWidget. Stellen Sie sicher, dass Sie sie auch in der Rendermethode ersetzen.

import NumberWidget from '../components/NumberWidget'; […]

Nächste Seite: Vervollständigen Sie Ihre Dashboard-App in React

  • 1
  • zwei

Aktuelle Seite: Erstellen Sie eine Dashboard-App in React - Schritte 1-10

Nächste Seite Erstellen Sie eine Dashboard-App in React - Schritte 11-21