Erste Schritte mit der Material-UI für React (Materialdesign für React)

Dieser Beitrag wurde zuerst auf CodingTheSmartWay.com veröffentlicht.

Abonnieren Sie auf YouTube | Live Demo | Code auf GitHub

Material Design ist eine Designsprache, die 2014 von Google entwickelt wurde und bei Web- und Mobilanwendungen sehr beliebt ist.

Material Design ist inspiriert von der physischen Welt und ihren Texturen, einschließlich der Art und Weise, wie sie Licht reflektieren und Schatten werfen. Materialoberflächen stellen sich die Medien Papier und Tinte neu vor.

Mit den Komponenten aus der Material-UI-Bibliothek können Sie ganz einfach Material Design-Elemente in Ihrem React-Web oder Ihrer mobilen Anwendung verwenden. Die Website der Bibliothek finden Sie unter: https://material-ui.com.

In diesem Tutorial erfahren Sie, wie Sie die Material-UI in Ihrer React-Webanwendung einrichten und verwenden. Wir fangen bei Null an und erstellen von Grund auf eine reale Beispielanwendung.

Was wir in diesem Tutorial einbauen werden

In diesem Lernprogramm erfahren Sie, wie Sie die Material-UI-Bibliothek in Ihrer React-Anwendung verwenden. Wenn Sie die folgenden Schritte ausführen, lernen Sie, wie Sie die folgende Beispielanwendung von Anfang bis Ende erstellen:

Wie Sie sehen, besteht die Benutzeroberfläche aus Materialgestaltungselementen. Wir verwenden Material-UI-Komponenten, um dem Benutzer eine Liste von Kursen anzuzeigen. Die Anwendung besteht aus einer Navigationsleiste oben, die den Titel der Anwendung enthält, einem Textfeld, in dem eine Volltextsuche nach Kursen eingeleitet werden kann, und einem Antwortraster, das die Kursergebnisse enthält.

Die Kurse werden vom CMS-Back-End Contentful (https://www.contentful.com/) abgerufen.

Einrichten des React-Projekts

Zuerst müssen wir ein neues React-Projekt einrichten. Dies kann mithilfe des Skripts "create-react-app" folgendermaßen erfolgen:

$ npx Erstelle-Reagiere-App Reagiere-Material-Benutzeroberfläche

Mit dem Befehl npx (der Teil der Installation von Node Package Manager (NPM) ist) können wir create-react-app ausführen, ohne es zuerst herunterladen und installieren zu müssen.

Nach Ausführung dieses Befehls steht ein neues Projektverzeichnis react-material-ui zur Verfügung. Wechseln Sie in den neu erstellten Projektordner und Sie finden das React-Startprojekt.

Installieren der Material-UI-Bibliothek und der Abhängigkeiten

Als nächstes müssen wir weitere Abhängigkeiten installieren. Mit dem folgenden Befehl stellen wir sicher, dass die Material-UI-Bibliothek installiert ist:

$ npm install @ material-ui / core

Als nächstes müssen wir die Contentful JavaScript-Bibliothek installieren, um auf das Contentful-Backend zugreifen zu können:

$ npm installiere inhaltlich

Lassen Sie uns testen, ob alles funktioniert, indem Sie den Entwicklungs-Webserver mit starten

$ npm start

Der Browser öffnet sich, die Startseite der Standard-React-Anwendung wird geladen und Sie sollten die folgende Ausgabe im Browser sehen können:

Jetzt können wir die Beispielanwendung implementieren. Beginnen wir also.

Implementieren der Beispielanwendung

Löschen des Standardinhalts

Zunächst müssen einige Teile der Standardimplementierung gelöscht werden. Öffnen Sie zuerst die Datei src / App.js und wenden Sie die folgenden Änderungen an:

  • Löschen Sie den JSX-Code, der in der return-Anweisung verfügbar ist
  • Löschen Sie die import-Anweisung, die aus ./logo.svg importiert wird (Sie können diese Datei auch löschen, da sie nicht mehr benötigt wird).

Jetzt können wir dem Projekt unseren eigenen Code hinzufügen.

Implementieren der NavBar-Komponente

Fügen wir zunächst unserer Anwendung eine Navigationsleiste hinzu. Der Code, der zum Anzeigen der Navigationsleiste mithilfe von Material Design-Komponenten aus der Material-UI-Bibliothek erforderlich ist, wird einer anderen Komponente hinzugefügt. Um diese neue Komponente zu implementieren, erstellen Sie neue Unterordner-Komponenten im Verzeichnis src und fügen Sie eine neue Datei NavBar.js hinzu. Fügen Sie den folgenden Code in die neu erstellte Datei ein:

importieren Reagieren von 'reagieren'
AppBar aus '@ material-ui / core / AppBar' importieren
Symbolleiste aus '@ material-ui / core / Symbolleiste' importieren
Typografie aus '@ material-ui / core / Typografie' importieren
const NavBar = () => {
    Rückkehr(
        
                                                       React & Material-UI Sample Application                                                     ) }
Standard-NavBar exportieren;

Hier verwenden wir die AppBar-, Toolbar- und Typografie-Komponente aus der Material-UI-Bibliothek, um die Navigationsleiste wie oben gezeigt auszugeben. Um NavBar in unsere Hauptanwendungskomponente App aufnehmen zu können, müssen wir sicherstellen, dass NavBar exportiert wird.

Jetzt können wir NavBar in src / App.js importieren:

importiere React, {Component} aus 'reagiere'
NavBar aus './components/NavBar' importieren
Klasse App erweitert Komponente {
  render () {
    Rückkehr (
      
                    )   } }
Standard-App exportieren

Das -Tag wird in den JSX-Code eingefügt, sodass die Navigationsleiste Teil der Ausgabe ist.

Implementieren der CourseList-Komponente

Als Nächstes fügen wir unserer Anwendung eine weitere Komponente hinzu: CourseList. Fügen Sie eine neue Datei mit dem Namen CourseList.js im Ordner src / components hinzu und fügen Sie den folgenden Code ein:

importiere React, {Component} aus 'reagiere'
importiere Grid aus '@ material-ui / core / Grid';
importiere TextField aus '@ material-ui / core / TextField';
importiere * als contentful von 'contentful'
Kurs aus '../components/Course' importieren
const SPACE_ID = '[INSERT CONTENTFUL SPACE ID]'
const ACCESS_TOKEN = '[INSERT CONTENTFUL ACCESS TOKEN]'
const client = contentful.createClient ({
    Leerzeichen: SPACE_ID,
    accessToken: ACCESS_TOKEN
})
class CoursesList erweitert Component {
    state = {
        Kurse: [],
        Suchbegriff: ''
    }
    Konstrukteur() {
        Super()
        this.getCourses ()
    }
    getCourses = () => {
        client.getEntries ({
            content_type: 'kurs',
            Abfrage: this.state.searchString
        })
        .then ((Antwort) => {
            this.setState ({courses: response.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Fehler beim Abrufen von Einträgen")
          console.error (Fehler)
        })
    }
    onSearchInputChange = (event) => {
        console.log ("Suche geändert ..." + event.target.value)
        if (event.target.value) {
            this.setState ({searchString: event.target.value})
        } else {
            this.setState ({searchString: ''})
        }
        this.getCourses ()
    }
    render () {
        Rückkehr (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Keine Kurse gefunden"}                      )     } }
Standard-CoursesList exportieren;

Diese Komponente ist dafür verantwortlich, Kursdaten vom Contentful-Back-End-Service abzurufen und die Liste der Kurse dem Benutzer anzuzeigen.

Zunächst wird die Verbindung zu Contentful mithilfe der Contentful-JavaScript-Bibliothek hergestellt. Um die Verbindung herzustellen, müssen Sie sich beim Contentful-Backend (https://be.contentful.com/login) anmelden, einen neuen Bereich erstellen, ein Kursmodell einfügen, wie im folgenden Screenshot dargestellt, und auf den Bereich zugreifen ID und Zugriffstoken aus den Space-Einstellungen - API-Schlüssel.

Um auf diese Werte zuzugreifen, müssen Sie einen neuen Schlüssel erstellen, indem Sie auf die Schaltfläche Create API Key (API-Schlüssel erstellen) klicken. Beide Werte - Space ID und Access Token - müssen kopiert und in die Zeichenfolge eingefügt werden, die den Konstanten SPACE_ID und ACCESS_TOKEN zugewiesen ist.

Mit beiden Konstanten wird die Back-End-Verbindung mithilfe der folgenden Codezeilen initiiert:

const client = contentful.createClient ({
    Leerzeichen: SPACE_ID,
    accessToken: ACCESS_TOKEN
})

Die Verbindung zum Contentful Space wird im Client gespeichert. Um die Liste der Kurse aus dieser Verbindung abzurufen, wird der Komponentenklasse die Methode getCourses hinzugefügt:

getCourses = () => {
        client.getEntries ({
            content_type: 'kurs',
            Abfrage: this.state.searchString
        })
        .then ((Antwort) => {
            this.setState ({courses: response.items})
            console.log (this.state.courses)
        })
        .catch ((error) => {
          console.log ("Fehler beim Abrufen von Einträgen")
          console.error (Fehler)
        })
    }

Die Anforderung zum Abrufen der Liste der Kurse von Contentful erfolgt durch Aufrufen der client.getEntries-Methode. Diese Methode erwartet ein Konfigurationsobjekt als Parameter. Dieses Konfigurationsobjekt muss zwei Eigenschaften enthalten:

  • content_type: Der Contentful-Inhaltstyp, der abgefragt werden soll. In unserem Fall natürlich.
  • query: Mit dem Parameter query können Sie eine Volltextsuche über alle Text- und Symbolfelder durchführen. Der dieser Eigenschaft zugewiesene Wert ist in this.state.searchString verfügbar. Diese Statuseigenschaft wird jedes Mal aktualisiert, wenn der Benutzer den Wert des Sucheingabefelds ändert.

Da der Aufruf von getEntries eine asynchrone Operation ist, wird ein Versprechen zurückgegeben, sodass wir mit then eine Verbindung zum Ergebnis herstellen können. Innerhalb der then-Methode ist die Liste der Kurse in response.items verfügbar. Diese Elemente werden in der Eigenschaft courses des Komponentenzustands gespeichert.

Die Ausgabe der Komponente wird durch den JSX-Code definiert, der von der Rendermethode zurückgegeben wird:

render () {
        Rückkehr (
            
                {this.state.courses? (                     
                                                                              {this.state.courses.map (currentCourse => (                                                                                                                                    ))}                                                               ): "Keine Kurse gefunden"}                      )     }

Hier verwenden wir zwei Material-UI-Komponenten: TextField und Grid. Beide Komponenten werden nur dann zur Ausgabe hinzugefügt, wenn in this.state.courses Kurselemente verfügbar sind. In diesem Fall kann der Benutzer das TextField verwenden, um eine Freitextsuche zu starten. Wenn sich der Wert des Textfelds ändert, wird die Methode onSearchInputChange aufgerufen und die searchString-Eigenschaft des Statusobjekts mit diesem neuen Wert aktualisiert.

Die Komponente Material-UI-Raster wird verwendet, um die Kurse in einem Rasterlayout anzuzeigen, das auf die Bildschirmgröße reagiert. Die Ausgabe für einen bestimmten Kurs wird von der benutzerdefinierten Kurskomponente generiert, die im nächsten Schritt implementiert wird. Der aktuelle Kurs wird über den Kursparameter an diese Komponente übergeben.

Wieder müssen wir die CourseList-Komponente in App.js importieren und hinzufügen:

importiere React, {Component} aus 'reagiere'
NavBar aus './components/NavBar' importieren
CoursesList aus './components/CoursesList' importieren
Klasse App erweitert Komponente {
  render () {
    Rückkehr (
      
                             )   } }
Standard-App exportieren

Kursbaustein implementieren

Als nächstes implementieren wir die Kurskomponente. Erstellen Sie eine neue Datei Course.js im Ordner src / components und fügen Sie den Code aus der folgenden Auflistung ein:

importieren Reagieren von 'reagieren'
Karte aus '@ material-ui / core / Card' importieren
CardActions aus '@ material-ui / core / CardActions' importieren
Importiere CardContent von '@ material-ui / core / CardContent'
Importiere CardMedia von '@ material-ui / core / CardMedia'
Importiere Button von '@ material-ui / core / Button'
Typografie aus '@ material-ui / core / Typografie' importieren
const Course = (Requisiten) => {
    console.log (Requisiten)
    Rückkehr(
        
            {Requisiten Kurs? (                                                                                                         {props.course.fields.title}                                                                   {props.course.fields.description}                                                                                    
Standardkurs exportieren

Da der aktuelle Kurs als Eigentum übergeben wird, können wir über props.course auf die Kursdaten zugreifen. Wenn Daten verfügbar sind, wird der Kurs mithilfe der Kartenkomponente aus der Material-UI-Bibliothek angezeigt. Darüber hinaus verwenden wir die folgenden Material Design-Komponenten: CardActions, CardContent, CardMedia, Button und Typography.

Nach Abschluss der Implementierung sollte unsere Anwendung nun das Endergebnis ausgeben, wie zu Beginn dieses Lernprogramms gezeigt.

Fazit

Mithilfe der Material-UI-Komponentenbibliothek können Sie die Ausgabe Ihrer React-Anwendung mit dem Material Design von Google auf einfache Weise verbessern. In diesem Tutorial haben Sie gelernt, wie Sie Material-UI in Ihrem React-Projekt einrichten und verwenden und eine reale Beispielanwendung von Grund auf neu implementieren.

Dieser Beitrag wurde zuerst auf CodingTheSmartWay.com veröffentlicht.

# 1 Reagieren Sie - The Complate Guide

Tauchen Sie ein und lernen Sie Reagieren Sie von Grund auf! Lerne Reactjs, Redux, React Routing, Animationen, Next.js Grundlagen und vieles mehr!
Zum Kurs gehen…

Haftungsausschluss: Dieser Beitrag enthält Affiliate-Links. Wenn Sie also auf einen der Produkt-Links klicken, erhalte ich eine kleine Provision. Dies hilft, diesen Blog zu unterstützen!