Ինչպես ստեղծել օգտագործողի համար հարմար ձևեր՝ օգտագործելով Chakra UI-ն React-ում

Չակրան ձեզ տալիս է պարզ բաղադրիչներ մաքուր, օգտագործելի ոճերով:

Հարմարեցված CSS-ով հավելվածների ոճավորումը զվարճալի է այնքան ժամանակ, քանի դեռ նախագիծը բարդանում է: Խնդիրը կայանում է նրանում, որ ոճավորումը և հետևողական դիզայնը պահպանվում է հավելվածի ողջ ընթացքում:

Թեև դուք դեռ կարող եք օգտագործել CSS-ը, հաճախ ավելի արդյունավետ է օգտագործել UI ոճավորող գրադարան, ինչպիսին է Chakra UI-ն: Այս գրադարանը տրամադրում է ձեր հավելվածները ձևավորելու արագ և առանց դժվարության եղանակ՝ օգտագործելով նախապես սահմանված UI բաղադրիչները և կոմունալ պարագաները:

Ինչպես սկսել Chakra UI-ով React Applications-ում

Chakra UI-ի հետ սկսելու համար առաջ գնացեք և տեղադրեք հիմնական React հավելվածը, օգտագործելով «create-react-app» հրամանը: Որպես այլընտրանք, դուք կարող եք օգտագործել Vite-ը React նախագիծ ստեղծելու համար:

Հաջորդը, տեղադրեք այս կախվածությունները.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Ավելացնել Չակրայի թեմաների մատակարար

Այս կախվածությունները տեղադրելուց հետո դուք պետք է փաթեթավորեք հավելվածը ChakraProvider-ով: Դուք կարող եք մատակարարին ավելացնել կամ ձեր index.jsx, main.jsx կամ App.jsx այսպես.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)

Հավելվածը ChakraProvider-ով փաթաթելը անհրաժեշտ է՝ ձեր հավելվածում Chakra UI-ի բաղադրիչներին և ոճային հատկություններին մուտք գործելու համար:

Փոխարկել տարբեր թեմաներ

Chakra UI-ն ապահովում է լռելյայն նախապես կառուցված թեմա, որը ներառում է լույսի, մութ և համակարգի գունային ռեժիմների աջակցություն: Այնուամենայնիվ, դուք կարող եք հետագայում հարմարեցնել ձեր հավելվածի UI-ի թեմաները և ոճի այլ հատկությունները թեմայի օբյեկտում, ինչպես նշված է Չակրայի փաստաթղթերում:

Մուգ և բաց թեմաները փոխարկելու համար ստեղծեք components/ThemeToggler.jsx ֆայլ src գրացուցակում և ներառեք հետևյալ կոդը:

import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
export default function ThemeToggler() {
    const { colorMode, toggleColorMode } = useColorMode();
    return (
        <Box textAlign="center" py={4} >
          <IconButton
            icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
            onClick={toggleColorMode}
            variant="ghost"
          />
          <h2>Toggle Theme</h2>
        </Box>
    );
}

Այժմ, առաջ գնացեք և ներմուծեք պատկերակների փաթեթը.

npm i @chakra-ui/icons

ThemeToggler բաղադրիչը կարտադրի կոճակ, որը թույլ է տալիս օգտատերերին անցնել հավելվածի թեթև և մուգ թեմաների միջև:

Այս բաղադրիչը մուտք է գործում ընթացիկ գունային ռեժիմ՝ useColorMode կեռիկը և օգտագործում է toggleColorMode ֆունկցիան՝ ռեժիմների միջև անցնելու համար:

IconButton բաղադրիչը վերցնում է պատկերակի առանձնահատկությունները՝ միաժամանակ ունենալով կոճակի սեղմման հնարավորությունները:

Ստեղծեք մուտքի ձևի միջերես

Ստեղծեք նոր Login.jsx ֆայլ components գրացուցակում և դրան ավելացրեք հետևյալ կոդը.

Նախ, ավելացրեք այս ներմուծումները:

import React, { useState } from 'react';
import { 
    Box,
    Button,
    Card,
    CardBody,
    Center,
    Flex,
    FormControl,
    FormLabel,
    Heading,
    HStack,
    Input,
    Stack,
    VStack,
    useColorMode,
} from '@chakra-ui/react';

Այս UI բաղադրիչները ներմուծելուց հետո սահմանեք React ֆունկցիոնալ բաղադրիչը և հիմնական կոնտեյների բաղադրիչները, որոնք կպահեն մուտքի օգտատիրոջ միջերեսի բոլոր տարրերը:

function Login() {
    const { colorMode } = useColorMode();
    return (
        <Box>
            <Flex justify="center" align="center" height="80vh" >
                <Center>
                    <Stack>
                    </Stack>
                </Center>
            </Flex>
        </Box>
    );
}
export default Login;

Box բաղադրիչը ներկայացնում է div տարր՝ այն ծառայում է որպես հիմնական շինարարական բլոկ, որի վերևում դուք կառուցում եք Chakra-ի բոլոր մյուս բաղադրիչները: Մյուս կողմից, Flex-ը Box բաղադրիչ է, որի ցուցադրման հատկությունը սահմանված է flex: Սա նշանակում է, որ դուք կարող եք օգտագործել ճկուն հատկությունները բաղադրիչը ոճավորելու համար:

Ե՛վ Կենտրոնը, և՛ Stack բաղադրիչները դասավորության բաղադրիչներ են, այնուամենայնիվ, դրանք ունեն աննշան տարբերություններ ֆունկցիոնալության մեջ: Կենտրոնական բաղադրիչը պատասխանատու է բոլոր մանկական բաղադրիչները իր կենտրոնում հավասարեցնելու համար, մինչդեռ Stack-ը միավորում է UI տարրերը և ավելացնում նրանց միջև հեռավորությունը:

Հիմա եկեք կառուցենք ձևի վերնագրի բաժինը: Header բաղադրիչը իսկապես օգտակար կլինի այս մասի համար: Stack բաղադրիչի ներսում ավելացրեք այս կոդը:

<VStack spacing='6'>
    <Heading
        fontWeight='500'
        fontSize='30px'
        letterSpacing='-0.5px'
    >
        Login
    </Heading> 
</VStack>

VStack բաղադրիչն իր երեխայի տարրերը կուտակում է ուղղահայաց ուղղությամբ: Հաջորդը, ստեղծեք քարտի բաղադրիչը, որը կտեղավորի մուտքի ձևը և դրա տարրերը:

<Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>
  <CardBody>
    <form>
      <Stack spacing='4'>
        <FormControl isRequired>
          <FormLabel size='sm'
            color={colorMode === 'dark' ? 'black' : 'black'}
          >Email Address</FormLabel>
          <Input
            type='text'
            bg='white'
            borderColor='#d8dee4'
            size='sm'
            borderRadius='6px'
            color={colorMode === 'dark' ? 'black' : 'black'}
            value={email}
          />
        </FormControl>
        <FormControl isRequired>
          <HStack justify='space-between'>
            <FormLabel size='sm'
              color={colorMode === 'dark' ? 'black' : 'black'}
            >Password</FormLabel>
            <Button
              as='a'
              href='#'
              variant='link'
              size='xs'
              color='#0969da'
              fontWeight='500'
            >
              Forgot password?
            </Button>
          </HStack>
          <Input
            type='password'
            bg='white'
            borderColor='#d8dee4'
            size='sm'
            borderRadius='6px'
            color={colorMode === 'dark' ? 'black' : 'black'}
            value={password}
          />
        </FormControl>
        <Button
          type="submit"
          bg='#2da44e'
          color='white'
          size='sm'
          _hover={{ bg: '#2c974b' }}
          _active={{ bg: '#298e46' }}
        >
          Sign in
        </Button>
      </Stack>
    </form>
  </CardBody>
 </Card>

Շարունակեք և թարմացրեք ձեր App.jsx ֆայլը՝ մուտք գործելու, ինչպես նաև ThemeToggler բաղադրիչը ներմուծելու համար:

import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
  return (
    <div>
     <ThemeToggler />
     <Login />
    </div>
  )
}

Հիանալի Փոփոխությունները թարմացնելու համար գործարկեք զարգացման սերվերը:

npm run dev

Այժմ, երբ էջը բեռնվի բրաուզերում, այն սկզբում կցուցադրի լռելյայն լուսային ռեժիմի թեման:

Այժմ սեղմեք Փոխարկել թեման պատկերակի կոճակը՝ թեմայի ռեժիմը փոխելու համար:

Form State-ի կառավարում React Hooks-ի միջոցով

Այս պահին մուտքի ձևը պարունակում է միայն երկու մուտքագրման դաշտ և մուտքի կոճակ: Այն գործունակ դարձնելու համար եկեք սկսենք իրականացնել պետական կառավարման տրամաբանություն՝ օգտագործելով React hooks:

Սահմանեք հետևյալ վիճակները Login ֆունկցիոնալ բաղադրիչի ներսում.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);

Այնուհետև ավելացրեք onChange handler ֆունկցիան, որը կլսի փոփոխությունները մուտքագրման դաշտերում, կգրանցի մուտքերը և համապատասխանաբար կթարմացնի էլփոստի և գաղտնաբառի վիճակները:

Ավելացրեք այս կոդի հայտարարությունները մուտքագրման դաշտերում:

onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

Այս փոփոխություններով դուք այժմ գրանցում եք օգտվողի մուտքերը:

Ձևաթղթերի վավերացում և սխալների մշակում Chakra UI-ի ներկառուցված հատկանիշներով

Այժմ ավելացրեք կարգավորիչի գործառույթ, որը կմշակի մուտքերը և կվերադարձնի համապատասխան արդյունքներ: form տարրի բացման պիտակի վրա ավելացրեք onSubmit մշակիչ գործառույթը հետևյալ կերպ:

<form onSubmit={handleSubmit}>

Հաջորդը, սահմանեք handleSubmit ֆունկցիան: Ձեր սահմանած վիճակներից անմիջապես ներքևում ներառեք հետևյալ կոդը.

const handleSubmit = async event => {
    event.preventDefault();
    setIsLoading(true); 
    try {
        await userLogin({ email, password });
        setSuccess('Logged in successfully!');
        setIsLoading(false);
        setIsLoggedIn(true);
    } catch (error) {
        setError('Invalid username or password!');
        setIsLoading(false);
        setEmail('');
        setPassword('');
    }
};

Այս ասինխրոն handleSubmit ֆունկցիան կգործարկվի, երբ ինչ-որ մեկը ներկայացնի ձևը: Ֆունկցիան սահմանում է բեռնման վիճակը true-ի նմանակելով մշակման գործողությունը: Դուք կարող եք մատուցել Chakra UI-ի բեռնման մանողը՝ օգտատիրոջը տեսողական ազդանշան տրամադրելու համար:

Ավելին, handleSubmit ֆունկցիան կկանչի userLogin ֆունկցիան, որն ընդունում է էլփոստը և գաղտնաբառը որպես պարամետրեր՝ դրանք վավերացնելու համար:

Մոդելավորել նույնականացման API հարցումը

Ստուգելու համար, որ օգտատիրոջ կողմից տրամադրված մուտքերը վավեր են, դուք կարող եք մոդելավորել API-ի զանգը՝ սահմանելով userLogin ֆունկցիան, որը կստուգի մուտքի հավատարմագրերը, ինչպես կստուգեր հետին պլանի API-ն:

Հենց handleSubmit ֆունկցիայի տակ ավելացրեք այս կոդը.

const userLogin = async ({ email, password }) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (email === 'test@email.com' && password === 'password') {
                resolve();
            } else {
                reject();
            }
        }, 1000);
    });
};

Այս կոդը սահմանում է ասինխրոն ֆունկցիա, որն իրականացնում է պարզ տրամաբանական վավերացման տրամաբանություն:

Չակրայի UI-ի առանձնահատկությունների հետ կապված սխալները:

Դուք կարող եք համապատասխան տեսողական արձագանք տրամադրել օգտատերերին՝ հիմնվելով ձևի վրա նրանց փոխազդեցությունների վրա՝ օգտագործելով Չակրայի հետադարձ կապի բաղադրիչները: Դա անելու համար սկսեք ներմուծել այս բաղադրիչները Chakra-ի UI գրադարանից:

Alert, AlertIcon, AlertTitle, CircularProgress

Այժմ ավելացրեք հետևյալ կոդը հենց ձևի տարրի բացման պիտակի տակ:

{error && !isLoggedIn && 
    <Alert status='error' variant='solid'> 
      <AlertIcon />
      <AlertTitle>{error}</AlertTitle>
     </Alert>
}
{isLoggedIn && ( 
    <Alert status="success" variant='solid'>
      <AlertIcon />
      <AlertTitle>{success}</AlertTitle>
    </Alert>
)}

Վերջապես, այս թարմացումը դարձրեք «ներկայացնել» կոճակը՝ ներառելու բեռնման մանողը՝ CircularProgress, բաղադրիչը:

{isLoading
 ? (<CircularProgress isIndeterminate size="24px" color="teal" />)
 : ('Sign In')}

Ահա թե ինչ կտեսնի օգտվողը, երբ նրանք հաջողությամբ մուտք գործեն.

Եթե մուտքի գործընթացում սխալ կա, նրանք պետք է տեսնեն այսպիսի պատասխան.

Բարելավեք ձեր զարգացման գործընթացը Chakra UI-ով

Chakra UI-ն ապահովում է լավ մշակված և հարմարեցված UI բաղադրիչների մի շարք, որոնք դուք կարող եք օգտագործել՝ արագորեն ստեղծելու React UI-ներ: Անկախ նրանից, թե որքան պարզ կամ բարդ են ձեր դիզայնը, Չակրան ունի բաղադրիչներ UI-ի գրեթե բոլոր առաջադրանքների համար: