كيفية بناء نماذج سهلة الاستخدام باستخدام Chakra UI في React

يعد تصميم التطبيقات باستخدام CSS المخصص أمرًا ممتعًا حتى يزداد تعقيد المشروع. ويكمن التحدي في التصميم والحفاظ على تصميم متسق في جميع أنحاء التطبيق.

على الرغم من أنه لا يزال بإمكانك استخدام CSS، إلا أنه غالبًا ما يكون استخدام مكتبة تصميم واجهة المستخدم مثل Chakra UI أكثر فعالية. توفر هذه المكتبة طريقة سريعة وخالية من المتاعب لتصميم تطبيقاتك باستخدام مكونات واجهة المستخدم المحددة مسبقًا والدعائم المساعدة.

البدء باستخدام Chakra UI في تطبيقات React

للبدء مع واجهة المستخدم شقرا، تفضل و، قم ببناء تطبيق React أساسي باستخدام تطبيق create-react-app يأمر. بدلا من ذلك، يمكنك استخدم Vite لإنشاء مشروع React.

بعد ذلك، قم بتثبيت هذه التبعيات:

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

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

إضافة موفر موضوع شقرا

بعد تثبيت هذه التبعيات، تحتاج إلى تغليف التطبيق بالملحق ChakraProvider. يمكنك إضافة الموفر إما في ملفك الشخصي مؤشر.jsx, main.jsx، أو App.jsx على النحو التالي:

import React 





instagram viewer

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

التفاف التطبيق مع ChakraProvider ضروري للوصول إلى مكونات Chakra UI وخصائص التصميم في جميع أنحاء التطبيق الخاص بك.

تبديل مواضيع مختلفة

توفر Chakra UI سمة افتراضية تم إنشاؤها مسبقًا تتضمن دعمًا لأوضاع الألوان الفاتحة والداكنة والنظام. ومع ذلك، يمكنك تخصيص سمات واجهة المستخدم الخاصة بالتطبيق الخاص بك وخصائص النمط الأخرى داخل كائن السمة كما هو محدد في وثائق شقرا.

للتبديل بين المظهرين الداكن والفاتح، قم بإنشاء ملف المكونات/ThemeToggler.jsx الملف في src الدليل ويتضمن الكود التالي.

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

الآن، تابع واستورد حزمة الرموز:

npm i @chakra-ui/icons

ال ThemeToggler سيعرض المكون زرًا يتيح للمستخدمين التبديل بين السمات الفاتحة والداكنة في التطبيق.

يصل هذا المكون إلى وضع الألوان الحالي useColorMode هوك ويستخدم toggleColorMode وظيفة للتبديل بين الأوضاع.

ال زر أيقونة يأخذ المكون خصائص الرمز بينما يتمتع أيضًا بإمكانيات الزر القابلة للنقر.

إنشاء واجهة مستخدم لنموذج تسجيل الدخول

إنشاء جديد تسجيل الدخول.jsx الملف في عناصر الدليل وأضف إليه الكود التالي:

أولاً، قم بإضافة هذه الواردات.

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

بعد استيراد مكونات واجهة المستخدم هذه، حدد مكون React الوظيفي ومكونات الحاوية الرئيسية التي ستحتوي على جميع عناصر واجهة مستخدم تسجيل الدخول.

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

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



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

ال صندوق يعرض المكون أ شعبة العنصر - فهو بمثابة لبنة البناء الأساسية التي تقوم فوقها ببناء جميع مكونات Chakra UI الأخرى. ثني، من ناحية أخرى، هو مكون Box مع تعيين خاصية العرض الخاصة به على ثني. هذا يعني أنه يمكنك استخدام الخصائص المرنة لتصميم المكون.

يعد كل من مكونات Center وStack مكونات تخطيط، ومع ذلك، لديهم اختلافات طفيفة في الوظائف. المكون المركزي مسؤول عن محاذاة جميع المكونات الفرعية في مركزه، بينما يقوم Stack بتجميع عناصر واجهة المستخدم معًا وإضافة مسافات بينها.

الآن، دعونا نبني قسم الرأس في النموذج. سيكون مكون الرأس مفيدًا جدًا لهذا الجزء. داخل مكون Stack، أضف هذا الكود.

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

ال VStack يقوم المكون بتكديس عناصره الفرعية في الاتجاه الرأسي. بعد ذلك، قم بإنشاء مكون البطاقة الذي سيحتوي على نموذج تسجيل الدخول وعناصره.

'#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>

المضي قدما وتحديث الخاص بك App.jsx ملف لاستيراد تسجيل الدخول، بالإضافة إلى مكون ThemeToggler.

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




 </div>
 )
}

عظيم! ابدأ تشغيل خادم التطوير لتحديث التغييرات.

npm run dev

الآن، بمجرد تحميل الصفحة على المتصفح، ستعرض في البداية سمة الوضع الخفيف الافتراضية.

الآن، انقر فوق تبديل الموضوع زر الرمز لتبديل وضع السمة.

إدارة حالة النموذج باستخدام React Hooks

في هذه المرحلة، يحتوي نموذج تسجيل الدخول فقط على حقلي إدخال وزر تسجيل الدخول. لجعله فعالاً، لنبدأ بتنفيذ منطق إدارة الحالة باستخدام خطافات التفاعل.

حدد الحالات التالية داخل المكون الوظيفي لتسجيل الدخول.

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={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

مع هذه التغييرات، يمكنك الآن التقاط مدخلات المستخدم.

تنفيذ التحقق من صحة النموذج ومعالجة الأخطاء باستخدام الميزات المضمنة في Chakra UI

الآن، أضف وظيفة المعالج التي ستقوم بمعالجة المدخلات وإرجاع النتائج المناسبة. على ال استمارة علامة فتح العنصر، قم بإضافة عند تقديم وظيفة المعالج على النحو التالي.

بعد ذلك، قم بتحديد 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 سيتم تشغيل الوظيفة عندما يقوم شخص ما بإرسال النموذج. تقوم الوظيفة بتعيين حالة التحميل على "صحيح" — لمحاكاة إجراء المعالجة. يمكنك عرض أداة التحميل الخاصة بـ Chakra UI لتوفير إشارة مرئية للمستخدم.

علاوة على ذلك، ستقوم الدالة HandleSubmit باستدعاء userLogin الوظيفة التي تأخذ البريد الإلكتروني وكلمة المرور كمعلمات للتحقق من صحتها.

محاكاة طلب واجهة برمجة تطبيقات المصادقة

للتحقق من صحة المدخلات المقدمة من قبل المستخدم، يمكنك محاكاة استدعاء واجهة برمجة التطبيقات (API) عن طريق تحديد userLogin الوظيفة التي ستتحقق من بيانات اعتماد تسجيل الدخول المشابهة لكيفية عمل واجهة برمجة التطبيقات الخلفية.

مباشرة أسفل وظيفة HandleSubmit، أضف هذا الكود:

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

يحدد هذا الرمز وظيفة غير متزامنة تقوم بتنفيذ منطق بسيط للتحقق من الصحة.

ميزات واجهة المستخدم الخاصة بمعالجة أخطاء شقرا.

يمكنك تقديم تعليقات مرئية مناسبة للمستخدمين بناءً على تفاعلاتهم في النموذج باستخدام مكونات تعليقات Chakra. للقيام بذلك، ابدأ باستيراد هذه المكونات من مكتبة واجهة المستخدم الخاصة بـ Chakra.

Alert, AlertIcon, AlertTitle, CircularProgress

الآن، أضف الكود التالي مباشرة أسفل علامة فتح عنصر النموذج.

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

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

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

أخيرًا، قم بإجراء هذا التحديث على زر الإرسال ليشمل مكون التحميل الدائري، CircularProgress.

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

إليك ما سيراه المستخدم بمجرد تسجيل الدخول بنجاح:

إذا كان هناك خطأ في عملية تسجيل الدخول، فمن المفترض أن يروا استجابة مثل هذا:

قم بتحسين عملية التطوير الخاصة بك باستخدام Chakra UI

توفر Chakra UI مجموعة من مكونات واجهة المستخدم المصممة جيدًا والقابلة للتخصيص والتي يمكنك استخدامها للبناء بسرعة رد فعل واجهات المستخدم. بغض النظر عن مدى بساطة أو تعقيد تصميماتك، فإن شقرا لديها مكونات لجميع واجهات المستخدم تقريبًا مهام.