1. Warum die UI-Komponentenbibliothek verwenden?
Die Verwendung der UI-Komponentenbibliothek bietet folgende Vorteile:
1. Effizienz verbessern: Mithilfe der UI-Komponentenbibliothek können schnell einheitliche UI-Elemente generiert werden, sodass Front-End-Entwickler nicht jedes einzelne UI-Element von Grund auf neu erstellen müssen, was Zeit und Energie spart.
2. Verbessern Sie die Konsistenz: Das Design der UI-Komponentenbibliothek wird normalerweise sorgfältig von professionellen Designern entworfen und getestet, um sicherzustellen, dass das Erscheinungsbild und Verhalten aller UI-Elemente in der gesamten Anwendung konsistent sind.
3. Einfache Wartung: Die Komponenten in der UI-Komponentenbibliothek sind unabhängig voneinander. Die Verwendung der Komponentenbibliothek erleichtert Entwicklern die Wartung und Änderung eines Teils des Codes, ohne dass dies Auswirkungen auf die gesamte Anwendung hat.
4. Benutzererfahrung optimieren: Die UI-Komponentenbibliothek bietet einige vordefinierte Interaktionsmethoden und visuelle Effekte auf der Benutzeroberfläche. Diese Methoden verbessern nachweislich die Benutzererfahrung und erhöhen die Benutzerzufriedenheit.
Kurz gesagt, die Verwendung von UI-Komponentenbibliotheken kann die Effizienz, Konsistenz und Wartbarkeit der Front-End-Entwicklung verbessern und auch die Benutzererfahrung verbessern. Daher sollten Sie die Verwendung von UI-Komponentenbibliotheken bei der Entwicklung moderner Webanwendungen in Betracht ziehen.
2. Verwendung der UI-Komponentenbibliothek antd
2.1. Offizielle Website von antd: Offizielle Website von antd
2.2. Installieren Sie antd
npm i antd
2.3 Grundlegende Verwendung
Zuerst finden wir auf der offiziellen Website den Komponentenstil, den wir verwenden möchten. Beispiel:
Wir möchten diese blaue Schaltfläche verwenden:
Dann müssen wir nur auf den roten Kreis klicken, um den Code anzuzeigen:
Wählen Sie Ts oder aus Js-Code (hier am Beispiel von js-Code): 
Was wir brauchen, ist der Stil der ersten Schaltfläche. Kopieren Sie also die erste Schaltfläche und fügen Sie sie unserem Code hinzu:
import React, {
Component } from 'react'
// 标签样式库
import {
Button} from 'antd';
export default class App extends Component {
render() {
return (
<div>
App....
<button>点我</button>
<Button type="primary">Primary Button</Button>
</div>
)
}
}
Denken Sie daran, die Stilbibliothek vorzustellen: import { Button} from 'antd';
Schauen wir uns den Effekt im Vergleich zu nativen Schaltflächen an:
Weitere Techniken finden Sie in der Dokumentation der offiziellen Website.
Persönlicher Blog: Studiennotizen für den Rest meines Lebens