Was ist reagieren? Was ist Ameisendesign?

react ist ein von Facebook eingeführtes JavaScript-Entwicklungsframework zum Erstellen von Benutzeroberflächen. Es wird hauptsächlich zum Erstellen von Benutzeroberflächen verwendet und erleichtert die Erstellung interaktiver Benutzeroberflächen. Ant Design ist eine vom Alibaba Ant Financial-Team entwickelte UI-Komponente, die hauptsächlich für Mid- und Back-End-Systeme verwendet wird. Sie wird mit TypeScript erstellt und stellt eine vollständige Typdefinitionsdatei bereit.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

Was ist reagieren?

React ist eine JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird. Sie entstand als internes Projekt von Facebook. Da das Unternehmen mit allen JavaScript-MVC-Frameworks auf dem Markt nicht zufrieden war, beschloss es, ein eigenes zu schreiben Instagram-Website. Nachdem ich es erstellt hatte, stellte ich fest, dass diese Reihe von Dingen sehr nützlich ist, und so wurde sie im Mai 2013 als Open Source veröffentlicht.

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Mit React können Sie kurze, unabhängige Codefragmente zu komplexen UI-Schnittstellen kombinieren. Diese Codefragmente werden „Komponenten“ genannt.

Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher beginnen immer mehr Menschen, darauf zu achten und es zu nutzen, weil sie glauben, dass es in Zukunft das Mainstream-Tool für die Webentwicklung sein könnte.

React ist eine Open-Source-JavaScript-Bibliothek, die HTML-Ansichten für Daten bereitstellt. React-Ansichten werden normalerweise mithilfe von Komponenten gerendert, die andere in benutzerdefinierten HTML-Tags angegebene Komponenten enthalten. React bietet Programmierern ein Modell, bei dem untergeordnete Komponenten keinen direkten Einfluss auf äußere Komponenten haben, effiziente Aktualisierungen von HTML-Dokumenten bei Datenänderungen und eine saubere Trennung zwischen Komponenten in modernen Single-Page-Anwendungen.

React macht das Erstellen einer interaktiven Benutzeroberfläche zum Kinderspiel. Entwerfen Sie prägnante Ansichten für jeden Status in Ihrer App, damit React Komponenten effizient aktualisieren und korrekt rendern kann, wenn sich Daten ändern. Die Komponentenlogik ist in JavaScript und nicht in Vorlagen geschrieben, sodass Sie Daten problemlos in Ihrer App weitergeben und den Status vom DOM trennen können.

Funktionen von React

• Deklaratives Design: React übernimmt ein deklaratives Paradigma, das die Beschreibung von Anwendungen erleichtert.

• Effizient: React minimiert die Interaktion mit dem DOM, indem es das DOM simuliert.

• Flexibel: React funktioniert gut mit bekannten Bibliotheken oder Frameworks.

• JSX: JSX ist eine Erweiterung der JavaScript-Syntax. JSX ist für die React-Entwicklung nicht erforderlich, wird aber empfohlen.

• Komponenten: Der Aufbau von Komponenten durch React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.

• Einseitiger Antwortdatenfluss: React implementiert einen unidirektionalen Antwortdatenfluss und reduziert dadurch doppelten Code, weshalb es einfacher als die herkömmliche Datenbindung ist.

Das Beherrschen von React kann Ihnen nicht nur bei der Front-End-Anwendungsentwicklung helfen, sondern seine Programmierideen können auch auf die Back-End-Entwicklung der nativen App-Entwicklung von React Native und das serverseitige Rendering angewendet werden. Unabhängig davon, ob Sie sich mit der Front-End-Entwicklung beschäftigen oder nicht, wird das Erlernen von React eine große Hilfe bei der Verbesserung Ihrer Fähigkeiten und Ihrer beruflichen Entwicklung sein.

Was ist Ameisendesign?

Ant Design ist eine vom Alibaba Ant Financial-Team entwickelte UI-Komponente auf Basis von React. Sie wird hauptsächlich für den Einsatz von Mid- und Back-End-Systemen verwendet.

Offizielle Website: https://ant.design/index-cn

Funktionen:

• Extrahiert aus der interaktiven Sprache und dem visuellen Stil von mittelständischen Unternehmen auf Unternehmensebene und Back-End-Produkte.

• Hochwertige React-Komponenten sofort einsatzbereit.

• Erstellt mit TypeScript und stellt vollständige Typdefinitionsdateien bereit.

• Vollständiges Link-Entwicklungs- und Design-Tool-System.

Erste Schritte

• Einführung in Ant Design

Ant Design ist ein Designsystem, das Produkte auf Unternehmensebene bedient. Die Komponentenbibliothek ist die React-Implementierung, die als npm-Paket veröffentlicht wird . Installieren und verwenden.

Sie können npm oder Yarn für die Entwicklung verwenden. Sie können nicht nur problemlos in der Entwicklungsumgebung debuggen, sondern es auch sicher in der Produktionsumgebung verpacken und bereitstellen und dabei die vielen Vorteile genießen, die das gesamte Ökosystem und die Toolkette mit sich bringen.

$ npm install antd --save
$ yarn add antd

In umi können Sie das antd-Plug-in öffnen, indem Sie antd im Plug-in-Set umi-plugin-react konfigurieren. Das antd-Plug-in hilft Ihnen bei der Einführung von antd und der Implementierung der On-Demand-Kompilierung.

Konfigurieren Sie in der config.js-Datei:

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

• Probieren Sie es aus

Als nächstes beginnen wir mit der Verwendung von Antd-Komponenten, wobei wir die Tabs-Komponente als Beispiel nehmen, Adresse: https://ant.design/components / tabs-cn/
Effekt:

Beziehen Sie sich auf das offizielle Beispiel, verwenden Sie es, erstellen Sie die Datei MyTabs.js:

import React from 'react'
import {Tabs} from 'antd'

const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}

class MyTabs extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

Effekt:

An diesem Punkt beherrschen wir die grundlegende Verwendung von Antd-Komponenten.

【Verwandte Empfehlung: Redis-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonWas ist reagieren? Was ist Ameisendesign?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!