لماذا ينبغي أن تبدأ باستخدام Chakra UI في مشاريع الواجهة الأمامية

مقدمة: لماذا تحظى Chakra UI باهتمام المطورين؟

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

في هذا المقال ستتعرف على مفهوم Chakra UI، وطريقة تثبيتها، وأبرز مزاياها، وكيف تؤثر على تقييم Lighthouse، بالإضافة إلى كيفية تفعيل الوضع الداكن Dark Mode بسهولة.

ما هي Chakra UI؟

Chakra UI هي مكتبة مكونات Component-Based مخصصة لبناء الواجهات الأمامية، وتُستخدم بشكل أساسي مع React. تعتمد على فكرة توفير لبنات أساسية جاهزة مثل الأزرار، الحاويات، النصوص، والتخطيطات، بحيث يستطيع المطور بناء واجهة متناسقة وسهلة الصيانة دون البدء من الصفر.

أهم ما يميز هذه المكتبة أنها:

• قابلة للتخصيص بدرجة عالية.
• تدعم إعادة استخدام المكونات.
• تُسهّل كتابة واجهات متجاوبة مع مختلف الشاشات.
• تهتم بإمكانية الوصول Accessibility بشكل افتراضي.
• تنسجم مع أسلوب العمل المعتاد في React.

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

كيفية تثبيت Chakra UI والبدء بها

تثبيت المكتبة باستخدام Yarn أو NPM

داخل مجلد المشروع، يمكنك تثبيت Chakra UI مع الاعتماديات المطلوبة عبر أحد الأوامر التالية:

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

تهيئة ChakraProvider في مشاريع React

لكي تعمل المكتبة بشكل صحيح، يجب تغليف التطبيق بالمكون <ChakraProvider> داخل ملف index.js.

import React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
  )
}

تهيئة Chakra UI في Next.js

إذا كنت تستخدم Next.js، فانتقل إلى الملف pages/_app.js وأضف التهيئة التالية:

import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

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

أبرز مزايا Chakra UI التي تجعلها خياراً عملياً

خصائص التنسيق Style Props

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

على سبيل المثال، بدلاً من كتابة margin-top في CSS، يمكنك استخدام الخاصية mt بالشكل التالي:

<Text mt={8}>

وهذا يضيف هامشاً علوياً للعنصر المحدد. كما أن المكتبة توفر نظام ألوان غنياً مستلهماً من فلسفة مكتبات تصميم حديثة مثل Tailwind CSS، ما يسهل بناء واجهات جذابة ومتناسقة.

تخصيص السمة الافتراضية Theme

لا تفرض عليك Chakra UI شكلاً بصرياً ثابتاً، بل تتيح لك تعديل السمة الافتراضية وإنشاء هوية تصميم خاصة بمشروعك. يمكنك تعريف ألوانك الخاصة عبر الدالة extendTheme.

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"

// 2. Call `extendTheme` and pass your custom values
const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      // ...
      900: "#1a202c",
    },
  },
})

// 4. Now you can use these colors in your components
function Usage() {
  return <Box bg="brand.100">Welcome</Box>
}

يمكنك وضع هذا التخصيص داخل ملف theme.js أو دمجه داخل ملفات التهيئة مثل index.js أو _app.js بحسب نوع المشروع.

التصميم المتجاوب Responsive Styles بسهولة

التجاوب مع أحجام الشاشات المختلفة من أكثر المهام التي تستهلك وقت المطورين. لكن Chakra UI تجعل هذه المهمة أكثر بساطة ووضوحاً.

على سبيل المثال:

<Box m={[2, 3]} />

في هذا المثال، يتم تطبيق قيم مختلفة للمسافة margin وفقاً لنقاط التوقف breakpoints. كما يمكنك استخدام صياغة الكائن، وهي أوضح في كثير من الحالات:

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
  This is responsive text
</Text>

هنا سيكون حجم الخط:

• 24px على الشاشات الصغيرة.
• 40px على الشاشات المتوسطة.
• 56px على الشاشات الكبيرة.

الجميل في هذا الأسلوب أنه يحافظ على تجربة تطوير نظيفة، ويقلل الحاجة إلى كتابة استعلامات الوسائط Media Queries يدوياً.

مكوّن Stack لتنظيم العناصر دون تعقيد

من التحديات الشائعة في تنسيق الواجهات التعامل مع flex ومحاذاة العناصر بدقة. تقدم Chakra UI حلاً مريحاً عبر مكوّن Stack ومشتقاته:

• Stack لترتيب العناصر بشكل مرن.
• HStack لترتيب العناصر أفقياً.
• VStack لترتيب العناصر عمودياً.

هذا يختصر كثيراً من الوقت ويمنحك تخطيطاً واضحاً ومنظماً بدون كتابة تنسيقات معقدة في CSS.

كيف تؤثر Chakra UI على تقييم Lighthouse؟

قبل إطلاق أي تطبيق ويب، من المهم اختباره باستخدام أداة Google Lighthouse. هذه الأداة مدمجة ضمن أدوات المطور في متصفح Chrome، وتقوم بتحليل التطبيق وفق عدة محاور مثل:

• الأداء Performance
• إمكانية الوصول Accessibility
• تحسين محركات البحث SEO
• تجربة التطبيقات التقدمية PWA

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

ما المقصود بإمكانية الوصول؟

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

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

هذه المعايير تستند إلى مبادئ مبادرة إتاحة الويب WAI التابعة لمنظمة W3C.

ما علاقة Chakra UI بإمكانية الوصول؟

تم تصميم مكونات Chakra UI وفق معايير WAI، ما يعني أن كثيراً من التفاصيل المرتبطة بإمكانية الوصول مدمجة في المكونات من الأساس. وفي حالات عديدة، يكفي تزويد العنصر بخصائص مثل aria-label لكي يصبح أكثر وضوحاً للتقنيات المساعدة.

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

كيفية تفعيل الوضع الداكن Dark Mode في Chakra UI

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

تهيئة ColorModeScript في ملف index.js

إذا كان لديك مشروع React بالشكل المعتاد، فسيكون الملف الأساسي قريباً من المثال التالي:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

ولتفعيل تتبع وضع الألوان، أضف المكوّن ColorModeScript كما يلي:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'

ReactDOM.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode="light" />
    <App />
  </ChakraProvider>,
  document.getElementById('root')
)

يمكنك تعيين الخاصية initialColorMode إلى light أو dark أو system بحسب السلوك الذي تريده.

إضافة زر للتبديل بين الوضع الفاتح والداكن

إذا أردت إنشاء زر بسيط يبدّل بين النمطين، فابدأ أولاً بتثبيت مكتبة react-icons:

npm i react-icons

ثم استورد الأيقونات:

import { FaMoon, FaSun } from 'react-icons/fa'

بعد ذلك استورد المكوّن IconButton مع الخطاف useColorMode:

import { IconButton, useColorMode } from '@chakra-ui/react'

const { colorMode, toggleColorMode } = useColorMode()

هذا الخطاف يعمل بطريقة مشابهة لفكرة useState، لكنه مخصص لإدارة حالة الألوان على مستوى التطبيق بالكامل. حيث تحتوي القيمة colorMode على الوضع الحالي، بينما تقوم الدالة toggleColorMode بالتبديل بين light وdark.

يمكنك الآن إنشاء الزر بالشكل التالي:

<IconButton
  icon={colorMode === 'light' ? <FaSun /> : <FaMoon />}
  isRound="true"
  size="lg"
  alignSelf="flex-end"
  onClick={toggleColorMode}
/>

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

لماذا قد تكون Chakra UI خياراً مناسباً لمشروعك؟

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

• تقليل الوقت المطلوب لبناء الواجهات الأساسية.
• توفير مكونات نظيفة وقابلة لإعادة الاستخدام.
• تحسين التناسق البصري بين أجزاء التطبيق.
• تبسيط بناء الواجهات المتجاوبة.
• تعزيز إمكانية الوصول دون مجهود إضافي كبير.
• تسهيل التخصيص بما يناسب هوية العلامة التجارية.

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

الخلاصة التقنية

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