ReactJS - Material UI: Ein Anfängerleitfaden

Hallo da draußen, zukünftige React-Entwickler! Ich bin sehr erfreut, Ihr Guide auf dieser aufregenden Reise in die Welt von ReactJS und Material UI zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen versichern, dass Sie am Ende dieses Tutorials ein solides Verständnis dieser leistungsstarken Werkzeuge haben werden. Also, tauchen wir ein!

Was ist Material UI?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was Material UI ist. Stellen Sie sich vor, Sie bauen ein Haus. Sie könnten jeden Ziegel, jede Tür und jedes Fenster von Grund auf erstellen, oder Sie könnten vorgefertigte Komponenten verwenden. Material UI ist wie ein Lagerhaus voller schöner, gebrauchsfertiger Komponenten für Ihre React-Anwendungen. Es basiert auf Googles Material Design, was bedeutet, dass es nicht nur funktional, sondern auch ästhetisch ansprechend ist.

Installation

Nun, lassen Sie uns die Hände schmutzig machen! Zuerst müssen wir Material UI installieren. Machen Sie sich keine Sorgen, wenn Sie noch nichts installiert haben - ich werde Sie durch jeden Schritt führen.

1. Öffnen Sie Ihr Terminal (haben Sie keine Angst, es ist nur eine textbasierte Methode, um mit Ihrem Computer zu kommunizieren).
2. Navigieren Sie zu Ihrem Projektverzeichnis (verwenden Sie cd your-project-name).
3. Führen Sie den folgenden Befehl aus:

npm install @material-ui/core

Dieser Befehlweist npm (Node Package Manager) an, Material UI für uns zu installieren. Denken Sie daran wie das Bitten einer Bibliothekarin, Ihnen ein bestimmtes Buch zu bringen.

Arbeitsbeispiel

Nun, da wir Material UI installiert haben, lassen Sie uns ein einfaches Beispiel erstellen, um es in Aktion zu sehen. Wir werden eine grundlegende Seite mit einer Kopfzeile, etwas Text und einem Button erstellen.

Erstellen Sie zuerst eine neue Datei namens MaterialUIExample.js in Ihrem src-Verzeichnis. Kopieren und fügen Sie dann den folgenden Code ein:

import React from 'react';
import { Button, Typography, AppBar, Toolbar } from '@material-ui/core';

function MaterialUIExample() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
Meine erste Material UI App
</Typography>
</Toolbar>
</AppBar>
<Typography variant="body1" style={{ margin: '20px' }}>
Willkommen zu meinem Material UI Beispiel!
</Typography>
<Button variant="contained" color="primary" style={{ margin: '20px' }}>
Klicke mich!
</Button>
</div>
);
}

export default MaterialUIExample;

Lassen Sie uns das einmal auseinandernehmen:

1. Wir importieren die notwendigen Komponenten aus Material UI. Das ist wie das Avecilen, welche Werkzeuge wir aus unserer Werkzeugkiste benötigen.

2. Wir erstellen eine Funktion namens MaterialUIExample. In React sind Komponenten einfach Funktionen, die JSX (eine spezielle Syntax, die wie HTML aussieht) zurückgeben.

3. Innerhalb unserer Funktion geben wir einige JSX zurück:

• <AppBar> erstellt eine obere Navigationsleiste.
• <Typography> wird für Text verwendet. Wir verwenden es sowohl für die Header-Text als auch für den Body-Text.
• <Button> erstellt einen anklickbaren Button.

4. Wir fügen einige Inline-Stile mit der style-Prop hinzu. Das ist wie das Hinzufügen einiger CSS direkt zu unseren Elementen.

5. Schließlich exportieren wir unsere Komponente, damit wir sie in anderen Teilen unserer App verwenden können.

Um dies in Aktion zu sehen, müssen Sie diese Komponente in Ihrer Hauptdatei App.js importieren und verwenden:

import React from 'react';
import MaterialUIExample from './MaterialUIExample';

function App() {
return (
<div>
<MaterialUIExample />
</div>
);
}

export default App;

Und voilà! Sie sollten nun eine Seite mit einer Kopfzeile, etwas Text und einem Button sehen, alle mit Material UI gestaltet.

Material UI Komponenten

Material UI bietet eine breite Palette von Komponenten. Hier ist eine Tabelle einige commonly verwendeten:

Komponente	Beschreibung
Button	Erstellt anklickbare Buttons
Typography	Zum Anzeigen von Text
AppBar	Erstellt eine obere Navigationsleiste
TextField	Für Texteingaben
Card	Erstellt einen Inhaltscontainer
Grid	Für responsive Layouts
Icon	Zeigt Symbole an
Menu	Erstellt Dropdown-Menüs
Dialog	Für Modal-Dialoge
Snackbar	Für kurze Benachrichtigungen

Jede dieser Komponenten kann an Ihre Bedürfnisse angepasst werden. Zum Beispiel können Sie die Farbe eines Buttons ändern:

<Button color="secondary" variant="contained">
Button in Sekundärfarbe
</Button>

Oder die Größe von Typography:

<Typography variant="h1">
Dies ist eine sehr große Überschrift
</Typography>

Schlussfolgerung

Glückwunsch! Sie haben Ihre ersten Schritte in die Welt von Material UI mit React gewagt. Wir haben Installation, ein Arbeitsbeispiel erstellt und einige der verfügbaren Komponenten erkundet.

Denken Sie daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist. Es dauert Zeit und Übung, aber mit jeder Zeile Code, die Sie schreiben, werden Sie besser. Haben Sie keine Angst, zu experimentieren, Fehler zu machen und vor allem, Spaß zu haben!

In meinen Jahren des Unterrichtens habe ich unzählige Schüler gesehen, die von kompletten Anfängern zu selbstbewussten Entwicklern wurden. Sie sind jetzt auf dem gleichen Weg. Weiter codieren, weiter lernen, und bevor Sie es wissen, werden Sie erstaunliche React-Anwendungen mit Material UI erstellen.

Frohes Coden und bis zum nächsten Mal!

Credits: Image by storyset