Styling React-applikationer med Ant.Design

Ant (GitHub) er meget mere end et React UI-kit med et minimalistisk design æstetisk og alle komponenter under solen. Det er et kaninhul, der fører til en kæmpe labyrint af sammenkoblede biblioteker, hvor et alvorligt økosystem omgiver det. Der er et tilpasset build-værktøj, der er baseret på Webpack kaldet ant-tool, flere CLI-apps, community-stilladser og en komplet ramme (dva, der også har sin egen CLI). Og UI-komponenterne er mini-projekter i sig selv - se denne repo for information om hver komponent.

Mange af disse biblioteker ser ud til at være meget polerede, inklusive et helt React-animationsbibliotek. Og jeg ville meget gerne lære mere om dem, men Ant har en udfordring - størstedelen af ​​dokumentationen er på kinesisk.

Hvordan er din kinesisk?

Lad mig indlede dette med at påpege, at komponentbiblioteket og dets fantastiske stilguide er blevet oversat til engelsk af generøse frivillige, så UI-kittet er fuldstændigt anvendeligt. Og oversættelsesindsatsen demonstrerer projektets intentioner om at åbne Ant for et bredere publikum, hvilket er velegnet til virksomheder, der overvejer at vedtage det.

Der er dog nogle sprogproblemer, der stadig er tilbage. Engelsk er undertiden forvirrende eller uklar. Bibliotekets vedligeholder har kommenteret her, at de byder PR velkommen til forbedring af dokumentationen, så det kunne være en god måde at blive involveret i dette fantastiske projekt.

Held og lykke med at jage problemer!

Et andet spørgsmål er, at emner i Ant.Design for det meste arkiveres og diskuteres på GitHub på kinesisk. Dette kan være en afbryder for virksomhedsapplikationer, men jeg er ikke sikker på, at det skulle være en til tidlige opstart, da maur kan bruges ganske minimalt, uden at bruge smartere funktioner som indbygget formvalidering. Hvis du stadig finder et problem eller en fejl med biblioteket, vil det være vanskeligt at undersøge tidligere løsninger på dit problem, og det er derfor, jeg anbefaler at bruge det omgivende økosystem minimalt på dette tidspunkt.

Battle Testet

Populære UI-biblioteker til React inkluderer Material-UI, Semantic-UI, Foundation og Bootstrap (dette og dette), og de er alle ret modne. Materiale-UI bør udpeges, da det masseformørker de andre i popularitet, med over 22 000 stjerneklare - og over 600 åbne emner. Men det viser sig, at Ant.Design også er en overraskende værdig kandidat. Det er kamp testet af nogle af de mest trætte sider på nettet (Alibaba, Baidu), og det kan prale af en strålende stilguide, brugerdefineret værktøj og selvfølgelig et omfattende katalog over komponenter. Det har også kun 85 åbne udgaver i skrivende stund, hvilket er en god ting i betragtning af dens popularitet.

Så lad os tage en rundvisning i biblioteket, se, hvad det har at tilbyde, og hvordan man kommer i gang med at bruge det.

Myrkomponenter

Antinkomponentelisten er svimlende. Jo, det indeholder det grundlæggende - modaler, formularer (inline og lodret), navigationsmenuer, et gittersystem. Men det indeholder også masser af ekstramateriale, såsom et @mentioning-system, en tidslinje, badges, et alvorligt pænt bordsystem og andre små smarte funktioner, såsom et involveret adressefelt (se feltet Habitual Residence). Se - det har alt, hvad en moderne webapplikation skal have, med en smagfuld, minimalistisk æstetik.

Designprincipper

Der er et pænt, kortfattet afsnit i dokumentationen om Ant.Designs vejledende principper. Jeg fandt det en god læsning, da det fik mig til at tænke meget på UI / UX-overvejelser, især afsnittet "Giv en invitation", hvor de diskuterer forskellige måder at gøre interaktioner synlige af en bruger. Forresten, hvis nogen kan anbefale mig en god bog om UX, ville jeg være taknemmelig.

Netnettet

Ant layout systemet består af en 24-alikvot (et godt nyt ord, som jeg lærte fra den oversatte dokumentation - det betyder dele af en helhed) gitter og en separat layoutkomponent, end du kan vælge at bruge. Gitteret bruger det velkendte Row / Col-system, men du kan også specificere en prop, der kaldes flex, der giver dig mulighed for at udnytte Flexbox-egenskaber til at definere en responsiv brugergrænseflade. (Se et tidligere blogindlæg til mig for at få hjælp til at få Flex Flex-standarden.)

Flexbox understøttes nu fuldt ud på næsten hver browser (med delvis support på IE 11 såvel som nogle ældre mobile browsere), så det burde være fint at bruge. Hvis din kundebase i vid udstrækning er Internet Explorer-brugere, hvilket sker i nogle brancher eller lande, ville du være klog af at undlade at bruge flexrækker eller Layout-komponenten, da Layout er bygget udelukkende på Flexbox.

Layout inkluderer komponenter til en sidder, overskrift, indhold og sidefod. Igen, disse er strengt baseret på Flexbox, så der er ikke noget valg her - men for at være ærlig er jeg ikke sikker på, hvad disse komponenter giver dig på toppen af ​​at bruge det standard Row / Col-gitter-system, bortset fra et par ekstra rekvisitter, du kan lave brug af og muligvis nogle indbyggede designvalg. Alt i alt forekommer det mig ikke at være meget nyttigt.

Netudstyr

Col-elementer kan leveres med en span prop til at definere, hvor mange portioner en søjle tager, og en offset prop til at definere en valgfri offset; Række kan tage en tagrendeprop for at definere mellemrum mellem kolonner i en række (i pixels, ikke alikvoter).

Her er et UI-eksempel fra et sideprojekt af mig. Det indeholder en række med to kolonner:

Koden ser sådan ud:

Forms

Myr svækker dig ikke for så vidt angår formularer, med indstillinger for inline, vandrette og lodrette former, fantastiske markeringsfelter og klare valideringsmeddelelser og ikoner. Faktisk går det lidt over bord her. Det giver dig mulighed for at pakke hele din form-gengivelseskomponent i en højere ordre-komponent à la Form.create () () for at få adgang til en indbygget validatorsyntax og brugerdefineret tovejs-bindende system (cue hørbar læbebid). Du kan derefter specificere standardregler som 'krævet' eller levere tilpassede valideringsmetoder. (Hvad er komponenter med højere orden? Tjek dette fremragende indlæg af James K. Nelson.)

Har du brug for at bruge deres HOC? Absolut ikke, og jeg er ikke sikker på, at du skulle gøre det. Som jeg sagde ovenfor, at gå ned ad denne vej kan udsætte dig for sprogrisiko, hvis du støder på fejl, og jeg kan ikke se, hvorfor du alligevel vil bruge et brugerdefineret tovejs-bindende datasystem. Men du kan nemt bruge HOC og bare ikke bruge den tovejs bindende data.

Au Naturel - Almindelige reaktionsformularer

Så lad os undersøge, hvordan du bruger myr-valideringsmeddelelserne uden at bruge deres højere-ordre-komponent.

Myr giver os tre rekvisitter, som vi kan levere til hver Form.Item-komponent til at vise valideringsmeddelelser eller ikoner:

  1. validateStatus - Dette bestemmer farve- og ikonskemaet i valideringsmeddelelsen (se foto ovenfor) - gyldige indstillinger er succes, advarsel, fejl og validering.
  2. hjælp - Valideringsmeddelelsen, der skal vises.
  3. hasFeedback - Dette er en af ​​dem, der ikke kræver en værdi. Inkluder bare, hvis du vil vise det tilknyttede ikon, og det er som standard sandt.
Smukkeste valideringer, jeg nogensinde har set.

Her er et eksempel på et simpelt formelement, der viser en valideringsmeddelelse:

Bemærk, at jeg brugte langformet Form.Item-komponentnavnet. Du kan lave dig selv en genvej til denne og eventuelle andre ant-underkomponenter som følger:

const FormItem = Form.Item;
// .. giver dig mulighed for at bruge:

Form validering ved hjælp af komponenten High High-Order

Hvad nu, hvis vi ønsker at gøre brug af Ant Form dekoratøren? Det er ret ligetil at implementere. Opret din React-komponentklasse, og send den derefter som et argument til Form.create (). Komponenten kan derefter eksporteres:

klasse SomeComponent udvider React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
eksport {FancyFormComponent som standard}; // importeret som SomeComponent

Inde i din form skal du dekorere dine inputfelter ved hjælp af getFieldDecorater-metoden, der udsætter et ton ekstra rekvisitter på din komponent. Du kan nu manipulere formelementer direkte fra rekvisitterne (eek!).

Dette eksempel i dokumentationen giver en grundig demonstration af brugen af ​​den komplette komponent af højere orden.

Interaktive komponenter - besked (alarm)

Myr leverer en række andre komponenter, der giver webapplikationer en høj grad af interaktivitet. Et godt eksempel er alarmer - eller beskeder, som de kaldes i Myren. Tilføjelse af en advarsel er så simpelt som at kalde message.success ('Fantastisk! Vare er gemt.') I din komponent. Meddelelsestyper inkluderer succes, advarsel eller fejl. Glem bare ikke at importere besked (små bogstaver) fra 'antd'.

Minimalisme når det er bedst

Installation af Ant.Design

Som jeg nævnte ovenfor, kan du enten gå all-in på Ant-økosystemet (med dets tilpassede Webpack-adapter) eller bare vælge designrammen. Jeg gik med det sidstnævnte, og jeg formoder, at du måske også, ikke mindst fordi brug af andre dele af økosystemet kunne kræve et kendskab til kinesisk. Men jeg vil dække begge indstillinger.

Valgmulighed 1 - Brug CLI

Ant leveres med antd-init, en CLI til generering af en komplet React-applikation med Ant installeret. Jeg anbefaler ikke denne rute til ikke-kinesiske højttalere, men hvis du vil prøve det, er det nemt at komme i gang. Bare installer CLI vha. Npm, opret en ny mappe og kør antd-init:

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

Derefter bliver du mødt med følgende meddelelse:

antd-init @ 2 er kun til oplevelse antd. Hvis du vil oprette projekter, er det bedre at starte med dva-cli. dva er en reduktions- og reaktionsbaseret applikationsramme. alm koncept, understøttelse bivirkninger, hmr, dynamisk belastning og så videre. '

Det er et kaninhul. Åbn din nye applikation, og du vil se, at din velkendte webpack.config.js-fil ikke længere er kendt - CLI bruger ant-tool, et "Build Tool Baseret på Webpack", som jeg nævnte ovenfor. Dokumentationen er på kinesisk, men det ser ud til at indstille almindelige standarder for Webpack og derefter give dig mulighed for bare at angive værdier, du vil tilsidesætte. Sådan ser konfigurationsfilen ud:

// Lær mere om, hvordan du konfigurerer.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = funktion (webpackConfig) {
 webpackConfig.babel.plugins.push ( ’omdanne-runtime’);
 webpackConfig.babel.plugins.push (['import', {
 biblioteknavn: 'antd',
 stil: 'css',
 }]);
 returnere webpackConfig;
};

Index.js indeholder en dejlig demoside, der bruger den undervurderede Ant-styling.

Valgmulighed 2 - Brug Standard Webpack

Dette ville være min foretrukne rute, men det kan være mere kompliceret at få dine Webpack-indstillinger lige med det første. Siden Kom godt i gang indeholder nogle gode instruktioner. Installer først Ant i din React-app:

$ npm installer antd - gem

Myr anbefaler at bruge deres egen babel-plugin-import i din .babelrc:

"forudindstillinger": [
    "reagere",
    ...
  ],
  "plugins": ["transform-decorators-legacy", ..., ["import", [{bibliotekName: "antd", stil: "css"}]]
  ]
}

Sørg for, at din Webpack indeholder læssere til .js- og .css-filer, og at du skal være god til at gå. Hvis du vil bruge en myrkomponent, skal du importere den i modulfilen. For eksempel.

import {Række, Col, Ikon, Knap} fra 'antd';

Konklusion

Der er ingen tvivl om, at Ant har meget at tilbyde som en UI-ramme med et formidabelt katalog over komponenter og et seriøst økosystem omkring det. Det medfører dog en vis risiko. Hvis du oplever et problem med biblioteket, kommunikerer du måske på kinesisk. I sidste ende vil jeg anbefale at prøve det, hvis du kan lide den minimalistiske æstetik, mens du holder brug af det perifere ant-økosystem til et minimum.