Styling React-toepassingen met Ant.Design

Ant (GitHub) is veel meer dan een React UI-kit met een minimalistisch design en elk onderdeel onder de zon. Het is een konijnenhol dat leidt naar een gigantisch doolhof van onderling verbonden bibliotheken, met een ernstig ecosysteem eromheen. Er is een op maat gemaakte tool gebaseerd op Webpack genaamd ant-tool, verschillende CLI-apps, community-steigers en een compleet framework (dva, dat ook een eigen CLI heeft). En de UI-componenten zijn op zichzelf mini-projecten - zie deze repo voor informatie over elke component.

Veel van deze bibliotheken lijken erg gepolijst, waaronder een hele React-animatiebibliotheek. En ik wil er graag meer over leren, maar Ant komt met een uitdaging - het grootste deel van de documentatie is in het Chinees.

Hoe is het met je Chinees?

Laat me dit voorafgaan door erop te wijzen dat de componentenbibliotheek en de geweldige stijlgids door royale vrijwilligers in het Engels zijn vertaald, dus de UI-kit is volledig bruikbaar. En de vertaalinspanning toont de bedoelingen van het project om Ant open te stellen voor een breder publiek, goed voor bedrijven die overwegen het over te nemen.

Er zijn echter nog enkele taalproblemen. Het Engels is soms verwarrend of duister. De beheerder van de bibliotheek heeft hier opgemerkt dat ze PR's verwelkomen voor het verbeteren van de documentatie, dus dat kan een geweldige manier zijn om betrokken te raken bij dit geweldige project.

Veel succes met het opsporen van problemen!

Een ander probleem is dat problemen in Ant.Design meestal worden ingediend en besproken op GitHub in het Chinees. Dit kan een dealbreaker zijn voor bedrijfstoepassingen, maar ik weet niet zeker of het er een zou moeten zijn voor vroege startups omdat Ant vrij minimaal kan worden gebruikt, zonder gebruik te maken van slimmere functies zoals ingebouwde formuliervalidatie. Als u echter een probleem of een probleem met de bibliotheek vindt, is het moeilijk om eerdere oplossingen voor uw probleem te onderzoeken en daarom raad ik aan in dit stadium minimaal gebruik te maken van het omliggende ecosysteem.

Gevecht getest

Populaire UI-bibliotheken voor React omvatten Material-UI, Semantic-UI, Foundation en Bootstrap (dit en dit), en ze zijn allemaal redelijk volwassen. Material-UI moet worden gekozen omdat het de anderen in populariteit enorm overschaduwt, met meer dan 22.000 stargazers - en meer dan 600 open nummers. Maar het blijkt dat Ant.Design ook een verrassend waardevolle kandidaat is. Het is in de strijd getest door enkele van de meest betreden sites op het web (Alibaba, Baidu), en het heeft een briljante stijlgids, aangepaste tooling en natuurlijk een uitgebreide catalogus met componenten. Het heeft ook slechts 85 open nummers op het moment van schrijven, wat een goede zaak is gezien de populariteit.

Laten we dus eens een rondleiding door de bibliotheek maken om te zien wat deze te bieden heeft en hoe u ermee aan de slag kunt.

Ant componenten

De lijst met Ant-componenten is duizelingwekkend. Natuurlijk bevat het de basis - modals, formulieren (inline en verticaal), navigatiemenu's, een rastersysteem. Maar het bevat ook een heleboel extra's, zoals een @vermeldingssysteem, een tijdlijn, badges, een serieus leuk tafelsysteem en andere kleine fancy functies, zoals een betrokken adresvak (zie het veld Habitual Residence). Neem een ​​kijkje - het heeft alles wat een moderne webapplicatie zou moeten hebben, met een smaakvolle, minimalistische esthetiek.

Ontwerpprincipes

Er is een mooi, beknopt gedeelte in de documentatie over de leidende principes van Ant.Design. Ik vond het veel leesplezier omdat het me aan het denken zette over overwegingen met betrekking tot UI / UX, met name het gedeelte 'Een uitnodiging doen', waar ze verschillende manieren bespreken om interacties door een gebruiker zichtbaar te maken. Trouwens, als iemand me een goed boek over UX kan aanbevelen, zou ik dankbaar zijn.

Grid-systeem

Het Ant-lay-outsysteem bestaat uit een 24-aliquot (een geweldig nieuw woord dat ik uit de vertaalde documentatie heb geleerd - het betekent delen van een geheel) raster en een afzonderlijke lay-outcomponent die u kunt gebruiken. Het raster maakt gebruik van het bekende Row / Col-systeem, maar u kunt ook een rek opgeven genaamd flex waarmee u Flexbox-eigenschappen kunt benutten om een ​​responsieve gebruikersinterface te definiëren. (Zie een eerdere blogpost van mij voor hulp bij het leren van de Flex-standaard.)

Flexbox wordt nu volledig ondersteund door zowat elke browser (met gedeeltelijke ondersteuning op IE 11 en sommige oudere mobiele browsers), dus het zou prima moeten zijn om te gebruiken. Als uw klantenbestand grotendeels Internet Explorer-gebruikers is, wat in sommige bedrijfstakken of landen gebeurt, is het verstandig om af te zien van het gebruik van flexrijen of de component Layout, omdat Layout strikt op Flexbox is gebouwd.

Lay-out bevat componenten voor een Sider, Header, Content en Footer. Nogmaals, deze zijn strikt gebaseerd op Flexbox, dus hier is geen keuze - maar om eerlijk te zijn, ik weet niet zeker wat deze componenten je bieden bovenop het standaard Row / Col-rastersysteem, afgezien van een paar extra rekwisieten die je kunt maken gebruik van en mogelijk enkele ingebouwde ontwerpkeuzes. Al met al lijkt het mij niet erg nuttig.

Grid Props

Col-elementen kunnen worden geleverd met een spanprop om te bepalen hoeveel aliquots een kolom inneemt en een offsetprop om een ​​optionele offset te definiëren; Rij kan een rugmarge nemen om ruimte tussen kolommen in een rij te definiëren (in pixels, niet in hoeveelheden).

Hier is een UI-voorbeeld van een bijproject van mij. Het bevat een rij met twee kolommen:

De code ziet er ongeveer zo uit:

vormen

Ant laat je niet in de steek wat betreft formulieren, met opties voor inline, horizontale en verticale formulieren, geweldige selectievakjes en duidelijke validatieberichten en pictogrammen. In feite gaat het hier een beetje overboord. Hiermee kunt u uw gehele formulierweergavecomponent in een hogere-ordecomponent à la Form.create () () omwikkelen om toegang te krijgen tot een ingebouwde syntaxis van de validator en een aangepast tweewegbindingssysteem (cue hoorbaar lipbijten). U kunt vervolgens standaardregels opgeven, zoals 'verplicht', of aangepaste validatiemethoden opgeven. (Wat zijn componenten van een hogere orde? Bekijk dit uitstekende bericht van James K. Nelson.)

Moet je hun HOC gebruiken? Absoluut niet, en ik weet niet zeker of u dat zou moeten doen. Zoals ik hierboven al zei, kan het volgen van dat pad je blootstellen aan taalrisico als je bugs tegenkomt en ik snap niet waarom je toch een aangepast tweeweg bindend datasysteem wilt gebruiken. Maar u kunt eenvoudig de HOC gebruiken en gewoon niet de tweerichtingsgegevensbinding gebruiken.

Au Naturel - Duidelijke reactievormen

Laten we dus eens kijken hoe we de Ant-validatieberichten kunnen gebruiken zonder hun hogere-ordecomponent te gebruiken.

Ant geeft ons drie rekwisieten die we aan elk Form.Item-onderdeel kunnen leveren om validatieberichten of pictogrammen weer te geven:

  1. validateStatus - Dit bepaalt het kleur- en pictogramschema van het validatiebericht (zie foto hierboven) - geldige opties zijn succes, waarschuwing, fout en validatie.
  2. help - Het te tonen validatiebericht.
  3. hasFeedback - Dit is een van de rekwisieten die geen waarde vereisen. Gewoon opnemen als u het bijbehorende pictogram wilt weergeven, en het staat standaard op true.
Mooiste validaties die ik ooit heb gezien.

Hier is een voorbeeld van een eenvoudig formulierelement dat een validatiebericht weergeeft:

Merk op dat ik de lange vorm Form.Item-componentnaam heb gebruikt. U kunt als volgt een snelkoppeling maken voor deze en alle andere Ant-subcomponenten:

const FormItem = Form.Item;
// .. kunt u gebruiken:

Formuliervalidatie met de component Ant hogere orde

Wat als we nu wel gebruik willen maken van de Ant Form-decorateur? Het is vrij eenvoudig om te implementeren. Maak uw React-componentklasse en geef deze als argument door aan Form.create (). De component kan vervolgens worden geëxporteerd:

class SomeComponent verlengt React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
exporteer {FancyFormComponent als standaard}; // geïmporteerd als SomeComponent

Versier uw invoervelden in uw formulier met behulp van de methode getFieldDecorater, die een heleboel extra rekwisieten op uw component blootlegt. Je kunt nu vormelementen rechtstreeks vanuit de rekwisieten manipuleren (eek!).

Dit voorbeeld in de documentatie geeft een grondige demonstratie van het gebruik van het complete onderdeel van hogere orde.

Interactieve componenten - bericht (waarschuwing)

Ant biedt een aantal andere componenten die webapplicaties een hoge mate van interactiviteit geven. Een goed voorbeeld zijn waarschuwingen - of berichten, zoals ze in Ant worden genoemd. Een waarschuwing toevoegen is net zo eenvoudig als het oproepen van message.success ('Geweldig! Item is opgeslagen.') In uw component. Berichttypen omvatten succes, waarschuwing of fout. Vergeet niet het bericht (kleine letters) te importeren uit ‘antd’.

Minimalisme op zijn best

Ant.Design installeren

Zoals ik hierboven al zei, kun je all-in gaan op het Ant-ecosysteem (met zijn aangepaste Webpack-adapter), of gewoon kiezen voor het ontwerpraamwerk. Ik ging met de laatste en ik vermoed dat jij dat ook zou kunnen doen, niet in het minst omdat het gebruik van andere delen van het ecosysteem een ​​praktische kennis van het Chinees vereist. Maar ik zal beide opties behandelen.

Optie 1 - Gebruik de CLI

Ant wordt geleverd met antd-init, een CLI voor het genereren van een volledige React-toepassing met geïnstalleerde Ant. Ik raad deze route niet aan voor niet-Chinese sprekers, maar als je het wilt proberen, is het eenvoudig om te beginnen. Installeer gewoon de CLI met behulp van npm, maak een nieuwe map aan en voer antd-init uit:

npm installeer antd-init -g; mkdir demo-app; cd $ _; antd-init;

U wordt dan begroet door het volgende bericht:

antd-init @ 2 is alleen voor ervaring antd. Als u projecten wilt maken, is het beter om met dva-cli te initiëren. dva is een op redux en react gebaseerd applicatie-framework. iepenconcept, ondersteuning van bijwerkingen, hmr, dynamische belasting enzovoort

Het is een konijnenhol. Open uw nieuwe applicatie en u zult zien dat uw vertrouwde webpack.config.js-bestand niet meer bekend is - de CLI gebruikt ant-tool, een "Build Tool Based on Webpack" dat ik hierboven heb genoemd. De documentatie is in het Chinees, maar lijkt algemene standaardwaarden voor Webpack in te stellen en u vervolgens gewoon waarden te laten opgeven die u wilt negeren. Dit is hoe het configuratiebestand eruit ziet:

// Meer informatie over het configureren.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = function (webpackConfig) {
 webpackConfig.babel.plugins.push (transformeren-runtime ");
 webpackConfig.babel.plugins.push ([‘import’, {
 libraryName: ‘antd’,
 stijl: ‘css’,
 }]);
 retour webpackConfig;
};

De index.js bevat een mooie demopagina die de ingetogen Ant-stijl gebruikt.

Optie 2 - Gebruik standaard webpack

Dit is mijn voorkeursroute, maar het kan ingewikkelder zijn om uw Webpack-instellingen eerst goed te krijgen. De pagina Aan de slag bevat enkele goede instructies. Installeer eerst Ant in uw React-app:

$ npm install antd - opslaan

Ant beveelt aan om hun eigen babel-plugin-import in uw .babelrc te gebruiken:

"presets": [
    "Reageer",
    ...
  ],
  "plugins": ["transform-decorators-legacy", ..., ["import", [{libraryName: "antd", style: "css"}]]
  ]
}

Zorg ervoor dat uw Webpack laders voor .js en .css-bestanden bevat, en dat u klaar moet zijn. Als u een Ant-component wilt gebruiken, importeert u deze in het modulebestand. Bijv.

import {Row, Col, Icon, Button} van 'antd';

Gevolgtrekking

Er is geen twijfel dat Ant veel te bieden heeft als een UI-framework, met een formidabele catalogus van componenten en een serieus ecosysteem eromheen. Het brengt echter wel enig risico met zich mee. Als u problemen ondervindt met de bibliotheek, zit u misschien vast in het Chinees. Uiteindelijk adviseer ik het uit te proberen als je van de minimalistische esthetiek houdt, terwijl het gebruik van het perifere Ant-ecosysteem tot een minimum wordt beperkt.