Construirea de site-uri web și aplicații este dificilă. Există o mulțime de lucruri de luat în considerare pentru a ne asigura că aplicațiile noastre sunt utilizabile și accesibile, inclusiv modul în care funcționează componentele noastre React.

Cum putem profita de puterea Chakra UI pentru a crea aplicații web excelente?

  • Ce este Chakra UI?
  • Ce face ca Chakra UI să fie atât de grozavă?
  • Ce vom construi?
  • Pasul 0: Crearea unui nou proiect React cu Next.js
  • Pasul 1: Instalarea și configurarea UI Chakra în Next.js
  • Pasul 2: Adăugarea componentelor UI Chakra într-o aplicație React
  • Pasul 3: Realizarea componentelor receptive cu interfața de utilizare Chakra
  • Pasul 4: Personalizarea temei implicite a UI Chakra

Ce este Chakra UI?

UI Chakra este o bibliotecă de componente pentru React care facilitează crearea interfeței de utilizare a unei aplicații sau a unui site web.

Scopul lor este de a oferi un set simplu, modular și accesibil de componente pentru a porni rapid și a funcționa.

Ce face ca Chakra UI să fie atât de grozavă?

Pentru a începe, implicit Chakra se străduiește să facă fiecare componentă accesibilă. Este o parte critică a dezvoltării aplicației, care este adesea trecută cu vederea, iar mentenanții Chakrelor s-au străduit să se asigure că componentele respectă Linii directoare WAI-ARIA.

Chakra include, de asemenea, un API simplu care permite dezvoltatorilor să devină productivi. Permite oamenilor și echipelor să creeze aplicații incluzive, fără a fi nevoiți să vă faceți griji cu privire la construirea unor grupuri de componente.

Pentru stilizare și personalizare, Chakra folosește Emoţie sub capotă pentru a oferi dezvoltatorilor posibilitatea de a-și stiliza componentele chiar în interiorul JavaScript-ului lor cu elemente de recuzită de stil. Acesta vine cu o temă implicită, dar permite posibilitatea de a o înlocui cu ușurință cu setări personalizate.

Ce vom construi?

Pentru a avea o idee bună despre modul în care funcționează Chakra, vom reconstrui în mod esențial șablonul Next.js implicit cu componentele UI Chakra.

Acest lucru ne va ajuta să înțelegem câteva concepte importante, cum ar fi cum să utilizați Chakra UI cu Next.js, cum să adăugați stiluri personalizate cu recuzită și cum să personalizați tema Chakra UI.

Conceptele de aici se pot aplica aproape oricăror Reacţiona app, deși exemplele vor fi ușor specifice pentru Next.js.

Pasul 0: Crearea unui nou proiect React cu Next.js

Pentru a începe, avem nevoie de o aplicație React. Vom folosi Next.js ca cadru, ceea ce ne va oferi posibilitatea de a crea cu ușurință o nouă aplicație.

Odată ajuns în directorul în care doriți să creați proiectul, rulați:

yarn create next-app my-chakra-app
# or
npx create-next-app my-chakra-app

Notă: nu ezitați să vă schimbați my-chakra-app la orice doriți să denumiți directorul proiectului.

Și odată ce ați terminat, puteți naviga în acel director și puteți începe proiectul cu:

yarn dev
# or
npm run dev

Asta ar trebui să crească serverul dvs. de dezvoltare la http: // localhost: 3000 și ar trebui să fim gata să plecăm!

Cum se utilizeaza Chakra UI cu Nextjs si React
Șablon Next.js implicit

Urmați împreună cu comiterea!

Pasul 1: Instalarea și configurarea UI Chakra în Next.js

Apoi, să instalăm Chakra UI.

În directorul proiectului, executați:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or 
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Aceasta va instala Chakra UI și dependențele sale, care include Emotion, deoarece se bazează pe ea pentru stil.

Pentru ca Chakra să funcționeze în interiorul aplicației noastre, trebuie să configurăm un furnizor la rădăcina aplicației noastre. Acest lucru va permite tuturor componentelor Chakrei să vorbească între ele și să utilizeze configurația pentru a menține stiluri consistente.

Interior pages/_app.js, mai întâi să importăm furnizorul nostru în partea de sus:

import { ThemeProvider, theme } from '@chakra-ui/core';

Apoi, înlocuiți instrucțiunea return din interiorul componentei cu:

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

După cum veți observa, trecem și pe un theme variabilă la furnizorul nostru. Importăm tema implicită a interfeței Chakra direct din Chakra și o transmitem noastra ThemeProvider deci toate componentele noastre pot obține stilurile și configurațiile implicite.

În cele din urmă, dorim să adăugăm o componentă numită CSSReset drept ca un copil direct al nostru ThemeProvider.

Mai întâi, adăugați CSSReset ca import:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core';

Apoi adăugați componenta chiar în interior ThemeProvider:

<ThemeProvider theme={theme}>
  <CSSReset />
  <Component {...pageProps} />
</ThemeProvider>

Și acum, dacă reîncarcăm pagina, putem vedea că lucrurile arată puțin diferit!

1612036331 835 Cum se utilizeaza Chakra UI cu Nextjs si React
Next.js cu resetarea CSS a UI Chakra

Browserul vine cu o mulțime de stiluri implicite și în mod implicit, Chakra UI nu le suprascrie. Aceasta include stiluri precum marginile unui element buton.

Deși nu avem neapărat nevoie de resetarea CSS aici, am putea înlocui aceste lucruri manual. Aceasta ne oferă o bază în care vom ști că Chakra UI funcționează așa cum este intenționat și putem începe să adăugăm componentele noastre.

Urmați împreună cu comiterea!

Pasul 2: Adăugarea componentelor UI Chakra într-o aplicație React

Acum, pentru partea distractivă. Vom folosi componentele UI Chakra pentru a încerca să reconstruim șablonul implicit Next.js. Nu va arăta exact 100%, dar va purta spiritul și îl putem personaliza așa cum am dori.

Construirea titlului și a descrierii

Începând de sus, să ne actualizăm titlul și descrierea.

În partea de sus a paginii, trebuie să importăm Heading componentă:

import { Heading, Link } from "@chakra-ui/core";

Atunci să înlocuim <h1> cu:

<Heading as="h1" size="2xl" mb="2">
  Welcome to Next.js!
</Heading>

Aici, folosim Titlu componentă pe care o setăm apoi „ca” o h1. Putem folosi orice nume de etichetă de element de titlu HTML, dar, din moment ce înlocuim un h1, dorim să îl folosim.

De asemenea, stabilim un size atribut, care ne permite să controlăm cât de mare este titlul de ieșire, precum și mb, care înseamnă margin-bottom, permițându-ne să adăugăm spațiu mai jos.

Și putem vedea deja că pagina noastră arată mai mult ca șablonul implicit.

1612036331 934 Cum se utilizeaza Chakra UI cu Nextjs si React
Componenta titlului UI Chakra

De asemenea, dorim să adăugăm înapoi linkul nostru.

Adăuga Link la declarația noastră de import din partea de sus și apoi din interiorul nostru <Heading> componentă, înlocuiți textul Next.js cu:

<Link color="teal.500" href="https://nextjs.org">Next.js!</Link>

Chakra Legătură componenta creează o legătură așa cum era de așteptat, dar apoi ne permite să folosim accesoriile de stil pentru a o personaliza. Aici, folosim variabila de culoare teal.500 că Chakra oferă pentru a schimba legătura noastră cu culorile Chakrei.

Și putem vedea că avem link-ul nostru Next.js!

1612036331 491 Cum se utilizeaza Chakra UI cu Nextjs si React
Titlul UI Chakra cu componenta Link

Ultima piesă a antetului este descrierea. Pentru asta, vrem să folosim componenta Text.

Adăuga Text și Code la declarația de import și înlocuiți descrierea cu:

<Text fontSize="xl" mt="2">
  Get started by editing <Code>pages/index.js</Code>
</Text>

Folosim Text componentă pentru a recrea a <p> etichetă și Cod componentă pentru a ne crea <code> etichetă. Similar cu componenta noastră Heading, adăugăm un fontSize pentru a face fontul mai mare și mt care înseamnă margin-top pentru a adăuga spațiu deasupra acestuia.

Și acum avem antetul nostru!

1612036331 681 Cum se utilizeaza Chakra UI cu Nextjs si React
Componentă text Chakra UI cu cod

Înlocuirea cardurilor de informații cu componentele UI Chakra

Pentru fiecare dintre cărțile noastre, putem folosi aceleași concepte ca și în antet pentru a recrea fiecare dintre casetele noastre.

Pentru a începe, adăugați un import pentru Flex componentă și înlocuiți eticheta <div className={styles.grid}> cu:

<Flex flexWrap="wrap" alignItems="center" justifyContent="center" maxW="800px" mt="10">
  ...
</Flex>

Asigurați-vă că lăsați toate cardurile în interiorul componentei Flex. Contracta componenta va recrea grila noastră adăugând Flexbox împreună cu aceleași proprietăți care erau pe grilă înainte.

În acest moment, ar trebui să fie exact la fel ca înainte.

Apoi, adăugați Box la extrasul de import și apoi înlocuiți primul card cu:

<Box as="a" href="https://nextjs.org/docs" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Documentation &rarr;</Heading>
  <Text fontSize="lg">Find in-depth information about Next.js features and API.</Text>
</Box>

Similar cu componenta noastră Heading, ne setăm Cutie componenta „ca” an <a> etichetă permițându-i să servească drept link. Apoi ne configurăm accesoriile de stil pentru a reproduce cărțile noastre.

În interiorul acestuia, folosim componenta Heading și Text pentru a recrea conținutul real al cardurilor.

Și după ce am schimbat doar prima carte, acum putem vedea modificările:

1612036331 808 Cum se utilizeaza Chakra UI cu Nextjs si React
Componenta Chakra UI Box

Acum, putem să ne întoarcem și să înlocuim celelalte trei cărți cu aceleași componente pentru a finaliza recrearea grilei noastre.

Pentru distracție, putem adăuga un al 5-lea card care leagă de Chakra UI:

<Box as="a" href="https://chakra-ui.com/" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Chakra UI &rarr;</Heading>
  <Text fontSize="lg">Build accessible React apps & websites with speed.</Text>
</Box>

Și, cu toate modificările noastre, putem vedea acum șablonul nostru de pornire recreat, Next.js!

1612036331 139 Cum se utilizeaza Chakra UI cu Nextjs si React
UI Chakra recreând grila Next.js

Urmați împreună cu comiterea!

Pasul 3: Realizarea componentelor receptive cu interfața de utilizare Chakra

O parte din ceea ce a putut furniza grila implicită Next.js a fost capacitatea cărților de a se extinde la lățime maximă odată ce dimensiunea browserului devine suficient de mică. Acest lucru este deosebit de relevant la 600px, ceea ce înseamnă de obicei că cineva se află pe un dispozitiv mobil.

Dacă ne uităm la pagina noastră de pe un dispozitiv mobil, putem vedea că cardurile noastre nu umple întreaga lățime.

1612036331 744 Cum se utilizeaza Chakra UI cu Nextjs si React
UI Chakra implicit fără răspuns

Chakra ne permite setați stiluri receptive cu dimensiuni coapte, permițându-ne să recreăm cu ușurință cărțile noastre de rețea receptive.

Pentru a face acest lucru, în loc să trecem o singură valoare la recuzita stilului nostru, putem trece într-o matrice.

De exemplu, pe fiecare dintre componentele noastre Box, să actualizăm flexBasis prop:

flexBasis={['auto', '45%']}

Aici, conform lui Chakra puncte de întrerupere responsive implicite , spunem că, în mod implicit, ne dorim flexBasis a fi setat ca auto. Dar pentru orice 480px și mai mare, din nou, care este primul punct de întrerupere implicit al Chakrei, l-am setat la 45%.

Chakra consideră că stilul său receptiv este mai întâi mobil, motiv pentru care vedeți 480px acționează ca o dimensiune minimă, nu ca o dimensiune maximă.

Și odată cu această schimbare, putem vedea acum că, pe un dispozitiv mare, avem încă grila noastră.

1612036331 921 Cum se utilizeaza Chakra UI cu Nextjs si React
Componentele UI Chakra pe un dispozitiv mare

Dar acum pe mobil, cardurile noastre ocupă întreaga lățime!

1612036331 972 Cum se utilizeaza Chakra UI cu Nextjs si React
Componente UI Chakra pe un dispozitiv mic

Folosirea tiparului de matrice funcționează pentru toate punctele de întrerupere, deci dacă doriți mai mult control asupra stilurilor dvs., Chakra vă permite să faceți acest lucru.

Urmați împreună cu comiterea!

Pasul 4: Personalizarea temei implicite a UI Chakra

În timp ce Chakra oferă o temă implicită destul de grozavă, avem și capacitatea de a o personaliza după bunul nostru plac pentru a se potrivi cu marca noastră sau cu gustul personal.

De exemplu, în timp ce tealul pe care l-am folosit pentru link-ul nostru de Heading este grozav și folosește stilurile Chakrei, ce ar fi dacă aș vrea să personalizez toate linkurile pentru a folosi violetul pe care îl am utilizați pe site-ul meu?

Pentru a începe, Chakra vine cu un violet implicit, astfel încât să putem actualiza link-ul nostru pentru a utiliza acel violet:

Welcome to <Link color="purple.500" href="https://nextjs.org">Next.js!</Link>

Și vedem schimbarea noastră.

1612036331 124 Cum se utilizeaza Chakra UI cu Nextjs si React
Realizarea linkului antet Next.js purpuriu cu stilul de culoare prop

Arată grozav, dar să îl actualizăm la violetul exact pe care îl folosesc.

Interior de pages/_app.js, vom crea un nou obiect în partea de sus a paginii, unde vom răspândi tema implicită creând un nou obiect tematic. De asemenea, vom înlocui theme sprijin cu noul nostru obiect:

const customTheme = {
  ...theme
}

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>

Dacă salvăm și reîncarcăm pagina, aceasta va arăta exact la fel.

Apoi, dorim să actualizăm culorile, deci, în obiectul nostru tematic personalizat, să adăugăm proprietatea culorilor, unde putem seta apoi violetul personalizat:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: '#692ba8'
  }
}

Notă: veți vedea aici că ne răspândim și noi theme.colors. Dacă nu, vom înlocui obiectul culorilor doar cu valoarea mov, ceea ce înseamnă că nu vom avea alte culori.

Dar dacă reîncarcăm pagina, linkul nostru nu mai este violet!

1612036331 846 Cum se utilizeaza Chakra UI cu Nextjs si React
Legătura Next.js fără culoare

Chakra folosește de obicei game de culori, ceea ce ne permite să folosim diferite nuanțe ale fiecărei culori. În componenta noastră Link, specificăm purple.500 pe care noi nu am stabilit să existe.

Deci, pentru a remedia problema, putem folosi un instrument de genul Smart Swatch pentru a obține toate valorile de culoare de care avem nevoie și pentru a le seta în obiectul tematic personalizat:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: {
      50: '#f5e9ff',
      100: '#dac1f3',
      200: '#c098e7',
      300: '#a571dc',
      400: '#8c48d0',
      500: '#722fb7',
      600: '#59238f',
      700: '#3f1968',
      800: '#260f40',
      900: '#10031a',
    }
  }
}

Sfat: Smart Swatch vă permite, de fapt, să copiați acele valori ca obiect JavaScript, făcând mai ușor să lipiți în tema noastră!

Și acum, dacă reîncarcăm pagina, ne putem vedea movul!

1612036331 819 Cum se utilizeaza Chakra UI cu Nextjs si React
Next.js cu violet personalizat

Deși aici am folosit o valoare a intervalului, putem specifica și variabile de culoare fără un interval.

Să spunem că am vrut să las Chakra implicit violet „așa cum este”, dar să-mi ofere o modalitate de a-mi referi violetul.

Pentru a face acest lucru, aș putea elimina acele valori violet și adăuga o nouă variabilă personalizată:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    spacejelly: '#692ba8'
  }
}

Apoi actualizați-mi linkul pentru a utiliza acea culoare:

Welcome to <Link color="spacejelly" href="https://nextjs.org">Next.js!</Link>

Și putem vedea că acum ne folosim de violet fără a suprascrie originalul:

1612036331 380 Cum se utilizeaza Chakra UI cu Nextjs si React
Next.js cu variabilă de culoare personalizată

Putem aplica acest lucru la majoritatea părților stilurilor Chakrei, inclusiv la tipografie și la setarea punctelor de întrerupere personalizate. Este o altă modalitate de a face proiectul nostru personalizat pe al nostru în timp ce profităm totuși de puterea Chakrei!

Urmați împreună cu comiterea!

Ce altceva poți face cu Chakra UI?

În timp ce am parcurs câteva exemple mai simple, acesta deschide cu adevărat ușa către modificări și controale de stil mai complexe pe care Chakra le oferă cu API-urile sale componente.

Există, de asemenea, o mulțime de componente minunate pe care le puteți utiliza pentru a vă transforma site-ul web sau aplicația și a face dezvoltarea rapidă și ușoară!

Ei chiar furnizați rețete care au câteva exemple despre cum puteți combina componentele, rezultând o funcționalitate puternică. Aceasta include un antet receptiv și chiar adăugarea de animații cu Framer Motion.