React: Noderīgas ārējās bibliotēkas

UI ir saīsinājums no angļu valodas vārdiem “user interface” jeb lietotāja saskarne. Tā ir kontaktpunkts starp cilvēkiem un datoriem. Jūs kā lietotājs mijiedarbojaties ar tehnoloģiju, kas ir daļa no lietotāja saskarnes. UI mērķis ir ļaut lietotājam efektīvi vadīt datoru, aplikāciju, ierīci…, ar kuru viņš mijiedarbojas, un saņemt atgriezenisko saiti, lai paziņotu par uzdevumu veiksmīgu pabeigšanu.

Šajā rakstā jūs uzzināsiet par dažām labi izstrādātām lietotāja saskarnes bibliotēkām, piemēram, ChakraUI, kas var paātrināt lietojumprogrammu izstrādi.

Jūs arī izpētīsiet, kā vienkāršot veidlapas dizainu, izmantojot tādus rīkus kā Formik, un rakstīt deklaratīvās validācijas noteikumus ar ķēdes operatoriem, izmantojot Yup.

Chakra UI

UI bibliotēkas ir lielisks veids, kā paātrināt izstrādes procesu. Tie nodrošina spēcīgu, labi pārbaudītu un ļoti konfigurējamu iepriekš iebūvētu komponentu komplektu, ko varat izmantot, lai izveidotu savas lietojumprogrammas. Šīs sastāvdaļas darbojas kā atomi vai celtniecības bloki, liekot pamatu sarežģītāku komponentu izveidei.

Viens no populārākajiem UI risinājumiem ir Chakra UI. Chakra UI ir vienkārša, modulāra un pieejama komponentu bibliotēka, kas nodrošina jūsu React lietojumprogrammām nepieciešamos blokus.

Chakra sagrupē dažādus komponentus pēc kategorijām, piemēram, izkārtojuma, veidlapas, datu displeja, atgriezeniskās saites, tipogrāfijas vai pārklājuma.

Layout – Izkārtojuma komponenti ir atbildīgi par satura virtuālo norobežotāju vai robežu noteikšanu. Viņi arī pārvalda, kā viņu bērni tiek guldīti (rinda vai kolonna) un atstarpes starp viņiem starp citiem īpašumiem. Daži izkārtojuma komponenti, kas jāizceļ, ir:

  • HStack un VStack: tie attēlo bērnus, izmantojot flex īpašības, un stack elementus attiecīgi horizontāli vai vertikāli. Abiem ir atstatuma balsts, kas ļauj iestatīt atstarpi starp elementiem.
  • Box: tas ļauj izveidot lodziņu ar fona krāsu, apmali, ēnu utt. Tam ir nepieciešams bg atbalsts, kas ļauj iestatīt fona krāsu.

Typography – Tipogrāfija ir arī svarīga kategorija, kuru ir vērts pieminēt. Šajā grupā ir divas galvenās sastāvdaļas:

  • Virsraksts – heading: atveido vienu no dažādajiem DOM galvenes tagiem (h1, h2, h3…). Lai norādītu konkrēto semantisko HTML tagu, ir nepieciešams izmēra atbalsts, kas ļauj iestatīt virsraksta lielumu un kā palīgierīci.
<Heading as='h2' size='2xl'>
    Nosaukums šeit
 </Heading>
  • Teksts – Text: tiek izmantots, lai interfeisā renderētu tekstu un rindkopu. Tas piedāvā fonta lieluma atbalstu, lai palielinātu teksta fonta lielumu.
<Text fontSize='lg'>Teksts tiek rakstīts šeit</Text>

Lai redzētu visas dažādās komponentu kategorijas un dažādus rekvizītus, ko katrs komponents pieņem, varat pārbaudīt oficiālo dokumentācijas lapu.

Stila rekvizīti – Style props

Chakra izmanto stila rekvizītus, lai nodrošinātu css direktīvas tieši kā rekvizītus dažādiem komponentiem. Atsauci uz visiem pieejamajiem stila rekvizītiem varat atrast Chakra UI dokumentācijā.

Parasti css stilu camelCase versijas var uzskatīt par derīgiem stila rekvizītiem. Bet jūs varat arī izmantot saīsināto versiju. Piemēram, tā vietā, lai izmantotu backgroundColor, varat izmantot bg.

<Box backgroundColor='tomato' /> ir tas pats, kas <Box bg='tomato' />

Saliekot visu kopā, tālāk redzamajā piemērā ir attēlotas trīs kastes, kas ir sakrautas rindā ar 16 pikseļu vertikālu atstarpi starp lodziņiem, kur katra lodziņa augstums ir 40 pikseļi un atšķirīga fona krāsa, kā arī konkrēts numurs kā tās atvasinājumi jeb bērni:

<HStack spacing=”16px”>
  <Box h='40px' bg='yellow.200'>
    1
  </Box>
  <Box h='40px' bg='tomato'>
    2
  </Box>
  <Box h='40px' bg='pink.100'>
    3
  </Box>
</HStack>

Formik un Yup

Formik ir vēl viena populāra atvērtā pirmkoda bibliotēka, kas palīdz izveidot veidlapas programmā React. Bibliotēka rūpējas par atkārtotiem veidlapas stāvokļa pārvaldības, apstiprināšanas un iesniegšanas uzdevumiem, lai jūs varētu koncentrēties uz savas lietojumprogrammas biznesa loģiku. Tas tiek darīts, nodrošinot komponentu un āķu komplektu, ko varat pievienot savām veidlapām.

Yup ir JavaScript atvērtā pirmkoda bibliotēka, ko izmanto, lai pārbaudītu veidlapas datus pirms to iesniegšanas serverī. Tas nodrošina ķēdējamu operatoru kopu, ko varat lietot veidlapas laukiem, lai deklaratīvi norādītu validācijas noteikumus.

Formik ir aprīkots ar iebūvētu atbalstu shēmai balstītai veidlapas līmeņa validācijai, izmantojot Yup, tāpēc tie strādā kopā nevainojami.

Vissvarīgākā Formik sastāvdaļa ir Formik āķis. Šis āķis apstrādā visus dažādos jūsu veidlapas stāvokļus. Tam ir nepieciešams tikai konfigurācijas objekts kā arguments.

Sadalīsim āķa lietojumu ar koda piemēru:

import * as Yup from 'yup';
import { useFormik } from 'formik';

// The below code would go inside a React component
const {
  values,
  errors,
  touched,
getFieldProps,
handleSubmit,
} = useFormik({
intialValues: {
    comment: "",
  },
onSubmit: (values) => {
    // Handle form submission
  },
validationSchema: Yup.object({
    comment: Yup.string().required("Required"),
  }),
});

UseFormik āķis izmanto objektu kā argumentu ar šādām īpašībām:

  • initialValues: objekts ar veidlapas lauku sākotnējām vērtībām
  • onSubmit: funkcija, kas tiks izsaukta, kad veidlapa tiks iesniegta, ar veidlapas vērtībām kā argumentu. Šajā piemērā ziņojumam var piekļūt, izmantojot values.comment.
  • validationSchema: Yup shēma, kas tiks izmantota, lai apstiprinātu veidlapas laukus. Šajā piemērā ziņojums ir lauks ar virknes vērtību, kas ir obligāta. Kā redzat, noteikumi ir cilvēkiem lasāmi un viegli saprotami.

Āķis atgriež objektu ar šādām īpašībām:

vērtības – values: objekts ar pašreizējām veidlapas lauku vērtībām. Šajā piemērā ziņojumam var piekļūt, izmantojot vērtības.comment.

kļūdas – errors: objekts ar pašreizējām veidlapas lauku kļūdām. Ja lauka “komentārs” validācija neizdodas, piemēram, ja ievade ir pieskārusies un tās vērtība ir tukša, saskaņā ar validācijas shēmu ziņojuma kļūdai varat piekļūt, izmantojot errors.comment. Šajā konkrētajā gadījumā ziņojuma kļūda būtu “Obligāts”. Ja lauks tomēr ir derīgs, vērtība nebūs definēta.

pieskārieni – touched: objekts ar pašreizējo veidlapas lauku skarto stāvokli. Varat to izmantot, lai noteiktu, vai lauks ir pieskāries (vismaz vienu reizi fokusēts) vai nē. Šajā piemērā komentāra stāvoklim varat piekļūt, izmantojot vietni touched.comment. Ja lauks ir pieskāries, vērtība būs patiesa, pretējā gadījumā tā būs nepatiesa.

saņem laukuma rekvizītus – getFieldProps: funkcija, kas izmanto lauka nosaukumu kā argumentu un atgriež objektu ar šādām īpašībām:

    • nosaukums – name: lauka nosaukums.
    • vērtība – value: lauka pašreizējā vērtība.
    • izmaiņas  -onChange: HandChange funkcija.
    • ap,iglojums – onBlur: funkcija, kas tiks izsaukta, kad lauks ir izplūdis. Tas atjaunina atbilstošo lauku skartajā objektā.

Šo funkciju var izmantot, izplatot atgriezto objektu ievades elementā. Piemēram, ja jums būtu ievades elements ar nosaukumu “komentārs”, jūs darītu kaut ko līdzīgu:

<input {...getFieldProps("komentārs")} />
  • handleSubmit: funkcija, kas tiks izsaukta, kad veidlapa tiks iesniegta. Tas izmanto notikumu kā argumentu un izsauc funkciju onSubmit ar vērtību objektu kā argumentu. Šī funkcija ir jāpiesaista veidlapai onSubmit notikums.

 

Secinājums

Šajā rakstā jūs uzzinājāt par trim populārākajām bibliotēkām, kas var ietaupīt jūsu dārgo laiku jūsu lietotņu izstrādes laikā. Viņu galvenais mērķis ir rūpēties par ikdienišķiem un atkārtotiem uzdevumiem un ļaut jums koncentrēties uz svarīgākajām lietām.

Jūs tikāt iepazīstināts ar Chakra UI kā veidu, kā izmantot labi izstrādātus komponentus, kurus varat apvienot, lai izveidotu sarežģītākas saskarnes.

Visbeidzot, jūs ieguvāt zināšanas par atvērtā pirmkoda bibliotēku ar nosaukumu Formik un tās ideālo pavadoni Yup, lai viegli izveidotu sarežģītas React formas.

Loading

Noderīgs raksts? Dalies ar citiem: