Chakra size temiz, kullanışlı tarzlara sahip basit bileşenler sunar.

Uygulamaların özel CSS ile şekillendirilmesi, bir projenin karmaşıklığı büyüyene kadar tamamen eğlencelidir. Buradaki zorluk, uygulama boyunca tutarlı bir tasarımın şekillendirilmesinde ve sürdürülmesinde yatmaktadır.

Hala CSS'yi kullanabiliyor olsanız da, Chakra UI gibi bir kullanıcı arayüzü stili kütüphanesini kullanmak genellikle daha etkilidir. Bu kitaplık, önceden tanımlanmış kullanıcı arayüzü bileşenlerini ve yardımcı program donanımlarını kullanarak uygulamalarınızı şekillendirmenin hızlı ve sorunsuz bir yolunu sağlar.

React Uygulamalarında Chakra Kullanıcı Arayüzünü Kullanmaya Başlamak

Başlamak için Çakra arayüzü, devam et ve, create-react-app'i kullanarak temel bir React uygulamasını iskeleleyin emretmek. Alternatif olarak şunları yapabilirsiniz: React projesi oluşturmak için Vite'ı kullanın.

Daha sonra şu bağımlılıkları yükleyin:

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

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

instagram viewer

Chakra'nın Tema Sağlayıcısını Ekle

Bu bağımlılıkları yükledikten sonra uygulamayı sarmalamanız gerekir. Çakra Sağlayıcı. Sağlayıcıyı ya cihazınıza ekleyebilirsiniz. index.jsx, main.jsx, veya Uygulama.jsx aşağıdaki gibi:

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(



 </ChakraProvider>
 </React.StrictMode>,
)

Uygulamayı şununla sarma: Çakra Sağlayıcı Uygulamanız genelinde Chakra UI'nın bileşenlerine ve stil özelliklerine erişmek için gereklidir.

Farklı Temaları Değiştir

Chakra UI, açık, koyu ve sistem renk modları için destek içeren, varsayılan olarak önceden oluşturulmuş bir tema sağlar. Ancak, uygulamanızın kullanıcı arayüzü temalarını ve diğer stil özelliklerini, bir tema nesnesi içinde, şurada belirtildiği gibi daha da özelleştirebilirsiniz: Çakra'nın belgeleri.

Koyu ve açık temalar arasında geçiş yapmak için bir bileşenler/ThemeToggler.jsx dosyadaki kaynak dizini açın ve aşağıdaki kodu ekleyin.

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

Şimdi devam edin ve simgeler paketini içe aktarın:

npm i @chakra-ui/icons

Tema Değiştirici bileşeni, kullanıcıların uygulamada açık ve koyu temalar arasında geçiş yapmasına olanak tanıyan bir düğme oluşturacaktır.

Bu bileşen mevcut renk moduna erişir. Renk Modu'nu kullan kanca ve kullanır Renk Modu'nu değiştir modlar arasında geçiş yapma işlevi.

SimgeDüğmesi bileşen bir simgenin özelliklerini üstlenirken aynı zamanda bir düğmenin tıklanabilir özelliklerine de sahiptir.

Giriş Formu Kullanıcı Arayüzü Oluşturun

Yeni bir tane oluştur Login.jsx dosyadaki bileşenler dizini açın ve içine aşağıdaki kodu ekleyin:

İlk önce bu içe aktarmaları ekleyin.

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

Bu UI bileşenlerini içe aktardıktan sonra, React işlevsel bileşenini ve oturum açma kullanıcı arayüzü için tüm öğeleri tutacak ana kapsayıcı bileşenlerini tanımlayın.

functionLogin() {
const { colorMode } = useColorMode();
return (

"center" align="center" height="80vh" >



 </Stack>
 </Center>
 </Flex>
 </Box>
 );
}

exportdefault Login;

Kutu bileşen bir oluşturur div öğesi—üzerine diğer tüm Çakra Kullanıcı Arayüzü bileşenlerini oluşturduğunuz temel yapı taşı olarak hizmet eder. EsnekÖte yandan, görüntüleme özelliği şu şekilde ayarlanmış bir Box bileşenidir: esnek. Bu, bileşene stil vermek için flex özelliklerini kullanabileceğiniz anlamına gelir.

Hem Center hem de Stack bileşenleri düzen bileşenleridir ancak işlevsellik bakımından ufak farklılıklara sahiptirler. Merkez bileşen, tüm alt bileşenlerin merkezde hizalanmasından sorumludur; Stack ise kullanıcı arayüzü öğelerini birlikte gruplandırır ve aralarına boşluk ekler.

Şimdi formun başlık kısmını oluşturalım. Başlık bileşeni bu kısım için gerçekten yararlı olacaktır. Stack bileşeninin içine bu kodu ekleyin.

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

VStack bileşen alt öğelerini dikey yönde yığınlar. Daha sonra, oturum açma formunu ve öğelerini barındıracak kart bileşenini oluşturun.

'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>



'4'>

'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Email Address</FormLabel>
 type='text'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={email}
 />
 </FormControl>



'space-between'>
'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Password</FormLabel>


as='a'
 href='#'
 variant='link'
 size='xs'
 color='#0969da'
 fontWeight='500'
 >
 Forgot password?
 </Button>
 </HStack>


 type='password'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={password}
 />
 </FormControl>


 type="submit"
 bg='#2da44e'
 color='white'
 size='sm'
 _hover={{ bg: '#2c974b' }}
 _active={{ bg: '#298e46' }}
 >
 Sign in
 </Button>
 </Stack>
 </form>
 </CardBody>
 </Card>

Devam edin ve bilgilerinizi güncelleyin Uygulama.jsx Giriş bilgilerini ve ThemeToggler bileşenini içe aktarmak için dosya.

import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (




 </div>
 )
}

Harika! Değişiklikleri güncellemek için geliştirme sunucusunu başlatın.

npm run dev

Artık sayfa tarayıcıya yüklendiğinde, başlangıçta varsayılan ışık modu temasını görüntüleyecektir.

Şimdi tıklayın Temayı Değiştir Tema modunu değiştirmek için simge düğmesine basın.

React Hook'ları Kullanarak Form Durumunu Yönetme

Bu noktada, oturum açma formunda yalnızca iki giriş alanı ve bir oturum açma düğmesi bulunur. İşlevsel hale getirmek için durum yönetimi mantığını uygulayarak başlayalım React kancalarını kullanma.

Oturum Açma işlevsel bileşeninin içinde aşağıdaki durumları tanımlayın.

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);

Daha sonra şunu ekleyin: onChange giriş alanlarındaki değişiklikleri dinleyecek, girişleri yakalayacak ve e-posta ve şifre durumlarını buna göre güncelleyecek işleyici işlevi.

Bu kod ifadelerini giriş alanlarına ekleyin.

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

Bu değişikliklerle artık kullanıcı girişlerini yakalayabiliyorsunuz.

Chakra Kullanıcı Arayüzünün Yerleşik Özellikleriyle Form Doğrulama ve Hata İşlemenin Uygulanması

Şimdi girdileri işleyecek ve uygun sonuçları döndürecek bir işleyici işlevi ekleyin. Üzerinde biçim öğe açılış etiketini ekleyin Gönderildiğinde işleyici işlevi aşağıdaki gibidir.

Daha sonra, şunu tanımlayın: tanıtıcıGönder işlev. Tanımladığınız durumların hemen altına aşağıdaki kodu ekleyin.

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('');
 }
};

Bu asenkron tanıtıcıGönder Birisi formu gönderdiğinde işlev tetiklenecektir. İşlev, bir işleme eylemini simüle ederek yükleme durumunu doğru olarak ayarlar. Kullanıcıya görsel bir ipucu sağlamak için Chakra UI'nin yükleme döndürücüsünü oluşturabilirsiniz.

Ayrıca, handleSubmit işlevi şunu çağıracaktır: Kullanıcı Girişi doğrulamak için e-postayı ve şifreyi parametre olarak alan işlev.

Kimlik Doğrulama API İsteğini Simüle Edin

Bir kullanıcı tarafından sağlanan girişlerin geçerli olduğunu doğrulamak için, aşağıdakileri tanımlayarak bir API çağrısını simüle edebilirsiniz: Kullanıcı Girişi Bir arka uç API'sinin yaptığına benzer şekilde oturum açma kimlik bilgilerini doğrulayacak işlev.

HandleSubmit işlevinin hemen altına şu kodu ekleyin:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email '[email protected]' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Bu kod, basit bir mantık doğrulama mantığını gerçekleştiren eşzamansız bir işlevi tanımlar.

Çakra'nın Kullanıcı Arayüzü Özelliklerini İşleme Hatası.

Chakra'nın geri bildirim bileşenlerini kullanarak kullanıcılara formdaki etkileşimlerine göre uygun görsel geri bildirimler sağlayabilirsiniz. Bunu yapmak için, bu bileşenleri Chakra'nın kullanıcı arayüzü kütüphanesinden içe aktararak başlayın.

Alert, AlertIcon, AlertTitle, CircularProgress

Şimdi form elementi açılış etiketinin hemen altına aşağıdaki kodu ekleyin.

{error && !isLoggedIn && 
'error' variant='solid'> 

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

{success}</AlertTitle>
 </Alert>
)}

Son olarak, yükleme döndürücü CircularProgress bileşenini dahil etmek için gönder düğmesine bu güncellemeyi yapın.

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

Başarılı bir şekilde oturum açtıktan sonra kullanıcının göreceği şey:

Oturum açma işleminde bir hata varsa aşağıdaki gibi bir yanıt görmeleri gerekir:

Chakra Kullanıcı Arayüzü ile Geliştirme Sürecinizi İyileştirin

Chakra UI, hızlı bir şekilde oluşturmak için kullanabileceğiniz bir dizi iyi tasarlanmış ve özelleştirilebilir UI bileşeni sağlar. Kullanıcı arayüzlerine tepki verin. Tasarımlarınız ne kadar basit veya karmaşık olursa olsun, Chakra'nın neredeyse tüm kullanıcı arayüzleri için bileşenleri vardır. görevler.