Eine umfassende Anleitung zur Verwendung von Ant Design mit React

Ant Design (AntD) ist ein beliebtes Designsystem und eine React UI-Komponentenbibliothek. Es bietet eine Reihe hochwertiger, vorgefertigter und anpassbarer UI-Komponenten zum Erstellen eleganter und benutzerfreundlicher Schnittstellen in React-Anwendungen. Ant Design folgt den Prinzipien des Material Design und bietet eine konsistente und zusammenhängende Designsprache für moderne Webanwendungen.

Hauptmerkmale von Ant Design:

1. Umfassende Komponentenbibliothek: Ant Design bietet eine breite Palette von Komponenten, wie Schaltflächen, Eingaben, Formulare, Modalitäten, Tabellen, Datumsauswahl und mehr. Bei der Entwicklung dieser Komponenten wurde Wert auf Benutzerfreundlichkeit und einheitliches Design gelegt.

2. Anpassbar: Ant Design bietet Anpassungsoptionen über Themen, sodass Sie Stile wie Farben, Schriftarten, Abstände und mehr anpassen können. Sie können das integrierte Design verwenden oder es an das Branding Ihres Projekts anpassen.

3. Responsives Design: Die Komponenten in Ant Design sind standardmäßig responsiv, sodass Sie ganz einfach mobilfreundliche Layouts erstellen können. Ant Design bietet Dienstprogramme wie das Rastersystem, mit denen Sie Layouts über verschiedene Bildschirmgrößen hinweg organisieren können.

4. Internationalisierung (i18n): Ant Design unterstützt die Internationalisierung und bietet Komponenten mit integrierter Unterstützung für mehrere Sprachen, einschließlich Datumsformate, Zahlenformatierung und mehr.

5. Barrierefreiheit: Ant Design-Komponenten wurden unter Berücksichtigung der Barrierefreiheit entwickelt und bieten Benutzern mit Behinderungen Navigationsfähigkeit über die Tastatur und Unterstützung für Bildschirmleseprogramme.

6. Rich Ecosystem: Ant Design umfasst auch eine Reihe von Tools und Bibliotheken, wie z. B. Ant Design Pro (ein Gerüst für Unternehmensanwendungen) und Ant Design Diagramme zur visuellen Datendarstellung.

7. TypeScript-Unterstützung: Ant Design bietet hervorragende TypeScript-Unterstützung und gewährleistet so eine bessere Typsicherheit und ein verbessertes Entwicklererlebnis.

8. Designrichtlinien: Ant Design folgt einem klaren Satz von Designprinzipien und -mustern, um ein einheitliches und konsistentes Benutzererlebnis zu schaffen. Es ist ideal für Entwickler, die ein einheitliches Erscheinungsbild ihrer Anwendungen beibehalten möchten.

So beginnen Sie mit Ant Design in React:

1. Ant Design in React installieren

Um Ant Design zu installieren, verwenden Sie npm oder Yarn, um es Ihrem React-Projekt hinzuzufügen.

npm install antd

Importieren Sie dann die CSS-Datei in Ihre index.js oder App.js, um die globalen Stile von Ant Design anzuwenden:

npm install antd

2. Verwendung von Ant-Design-Komponenten in React

Sobald Ant Design installiert ist, können Sie mit der Verwendung seiner Komponenten beginnen. Hier einige Beispiele:

Beispiel 1: Ameisen-Design-Schaltfläche

import 'antd/dist/antd.css';

1. Erstellen Sie eine craco.config.js-Datei:

import React from 'react';
import { Button } from 'antd';

function App() {
  return (
    <div>



<p>In this example, we import the Button component from antd and use it in our React component. You can easily change the button type (primary, danger, default, etc.) and apply additional styling or functionality.</p>

<h5>
  
  
  Example 2: Ant Design Grid System
</h5>

<p>Ant Design comes with a flexible grid system that makes it easy to create responsive layouts. Here's an example of a responsive layout using Ant Design’s Row and Col components:<br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';
import { Row, Col } from 'antd';

function App() {
  return (
    <div>



<p>In this example:</p>

<ul>
<li>
Row is used to define a flex container for the columns.</li>
<li>
Col is used to define individual columns.</li>
<li>The gutter prop adds space between the columns.</li>
<li>The xs, sm, and md props make the layout responsive across different screen sizes.</li>
</ul>

<h5>
  
  
  Example 3: Ant Design Modal
</h5>

<p>Ant Design's Modal component allows you to easily create modal dialogs.<br>
</p>

<pre class="brush:php;toolbar:false">import React, { useState } from 'react';
import { Button, Modal } from 'antd';

function App() {
  const [visible, setVisible] = useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);

  return (
    <div>



<p>In this example, we use useState to control the visibility of the modal. The Button triggers the modal, and Modal displays the dialog with an <strong>OK</strong> and <strong>Cancel</strong> button.</p>

<h4>
  
  
  3. <strong>Customizing the Ant Design Theme</strong>
</h4>

<p>Ant Design allows you to customize its default theme to fit your project’s branding by modifying variables.</p>

<h5>
  
  
  Example: Customizing Button Color
</h5>

<p>You can use a <strong>Less</strong> file to modify Ant Design’s default theme. To do this, you'll need to configure your webpack or use tools like <strong>Create React App</strong> with <strong>craco</strong> or <strong>customize-cra</strong>.</p>

<ol>
<li>Install <strong>craco</strong>:
</li>
</ol>

<pre class="brush:php;toolbar:false">   npm install @craco/craco

Dadurch wird die Primärfarbe der Ant Design-Komponenten (z. B. Schaltflächen) in #1DA57A geändert.

4. Verwendung von Ameisen-Design-Symbolen

Ant Design bietet eine große Auswahl an SVG-Symbolen, um die Benutzeroberfläche Ihrer App zu verbessern. Sie können sie direkt in Ihren Komponenten verwenden.

   module.exports = {
     style: {
       less: {
         modifyVars: {
           '@primary-color': '#1DA57A',
         },
         javascriptEnabled: true,
       },
     },
   };

Dann importieren und verwenden Sie die Symbole:

Reagieren aus „Reagieren“ importieren;
import { Button } from 'antd';
import { SmileOutlined } aus '@ant-design/icons';

Funktion App() {
  zurückkehren (
    <div>



<p>In diesem Beispiel verwenden wir das SmileOutlined-Symbol aus dem @ant-design/icons-Paket und fügen es der Button-Komponente hinzu.</p>

<h3>
  
  
  Abschluss
</h3>

<p>Ant Design ist ein leistungsstarkes und umfassendes Designsystem, das einen umfangreichen Satz an UI-Komponenten zum Erstellen moderner, reaktionsfähiger React-Anwendungen bietet. Seine Anpassbarkeit, Zugänglichkeitsfunktionen und konsistenten Designprinzipien machen es zu einer großartigen Wahl für Entwickler, die ausgefeilte, benutzerfreundliche Schnittstellen erstellen möchten, ohne zu viel Zeit für das Design aufzuwenden.</p>

<p>Mit integrierter Unterstützung für Internationalisierung, einem reaktionsfähigen Rastersystem und einfacher Anpassung ist Ant Design ein hervorragendes Werkzeug für die Erstellung von Anwendungen auf Unternehmensebene oder kleineren Projekten.</p>


          </div>