كيف تستخدم Shadcn/UI في React.js

بناء واجهات مستخدم حديثة وأنيقة هو أحد الأهداف الرئيسية لمطوري الواجهة الأمامية، ومع ظهور مكتبات المكونات، أصبحت هذه المهمة أسهل بكثير. اليوم، سأقدم لكم Shadcn/UI، مكتبة مكونات قوية وقابلة للتخصيص لـ React.js. سواء كنت جديدًا على React.js أو مطورًا مخضرمًا، يمكن أن تعزز Shadcn/UI تصميم تطبيقك بدون تعقيدات الأطر الأكبر. بالإضافة إلى ذلك، سأرشدك خلال عملية الإعداد خطوة بخطوة، بما في ذلك كيفية استغلال APIs والأدوات مثل Apidog لجعل عملية التطوير أكثر سلاسة.

بحلول نهاية هذه التدوينة، سيكون لديك فهم واضح لكيفية استخدام Shadcn/UI في مشروع React.js الخاص بك. وإذا كنت تبني واجهة برمجة التطبيقات الخاصة بك أو تعمل مع واحدة، فلا تنسَ تنزيل Apidog مجاناً—لأنه هو المنقذ عند اختبار وتطوير واجهات برمجة التطبيقات.

button

لنبدأ!

ما هو Shadcn/UI؟

قبل الخوض في الإعداد، لنحدد أولاً ما هو Shadcn/UI ولماذا هو خيار قوي لمشروعك React.js.

Shadcn/UI هي مكتبة مكونات قابلة للتخصيص مبنية خصيصًا لـ React.js. على عكس الأطر الأكبر مثل Material UI أو Bootstrap، تركز Shadcn/UI على منحك المزيد من التحكم في مظهر مكوناتك وإحساسها. توفر لك اللبنات الأساسية، مما يسمح لك بإنشاء واجهة فريدة بدون الارتباط بمواضيع محددة مسبقًا.

لماذا Shadcn/UI؟

خفيفة الوزن: على عكس المكتبات الثقيلة التي تجمع مكونات كثيرة لن تستخدمها أبدًا، تقدم Shadcn/UI فقط ما تحتاجه.
قابلة للتخصيص: يمكنك تصميم وهيكلة المكونات وفقًا لمتطلبات مشروعك الفريدة.
محسّنة لـ React.js: التكامل السلس مع React.js يعني أنه يمكنك التركيز على كتابة الشيفرة بدلاً من تعديل الإعدادات.
جاهزة لـ APIs: المكتبة متوافقة مع أدوات واجهة برمجة التطبيقات مثل Apidog، مما يسهل إدارة واختبار نقاط النهاية لواجهة برمجة التطبيقات ضمن تطبيق React الخاص بك.

دليل خطوة بخطوة: كيفية استخدام Shadcn/UI في مشروع React.js الخاص بك

الآن بعد أن عرفت ما هو Shadcn/UI، دعنا نتناول العملية خطوة بخطوة لدمجه في مشروع React.js. يفترض هذا الدليل أنك لديك بالفعل فهم أساسي لـ React وأن لديك Node.js مثبت على جهازك.

1. إنشاء مشروع React.js جديد

إذا كان لديك بالفعل مشروع React.js معد، يمكنك تخطي هذه الخطوة. بخلاف ذلك، يمكنك إنشاء مشروع جديد باستخدام الأوامر التالية:

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

سيؤدي ذلك إلى إنشاء مشروع React.js جديد باسم my-shadcn-ui-app وبدء خادم التطوير. الآن، يجب أن ترى تطبيق React الافتراضي يعمل.

2. تثبيت Shadcn/UI

أضف التبعيات إلى مشروعك يدويًا.

أضف Tailwind CSS

يتم تنسيق المكونات باستخدام Tailwind CSS. تحتاج إلى تثبيت Tailwind CSS في مشروعك.

اتبع تعليمات تثبيت Tailwind CSS للبدء.

أضف التبعيات

أضف التبعيات التالية إلى مشروعك:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

أضف مكتبة الأيقونات

إذا كنت تستخدم النمط default، قم بتثبيت lucide-react:

npm install lucide-react

إذا كنت تستخدم النمط new-york، قم بتثبيت @radix-ui/react-icons:

npm install @radix-ui/react-icons

تكوين بدائل المسار

أستخدم البديل @. هكذا أقوم بتكوينه في tsconfig.json:

{
  "compilerOptions": {   
	"baseUrl": ".",
        "paths": {
        "@/*": ["./*"]
        }
    }
}

بديل @ هو تفضيل. يمكنك استخدام بدائل أخرى إذا كنت تريد.

إذا كنت تستخدم بديل آخر مثل ~، ستحتاج إلى تحديث بيانات الاستيراد عند إضافة مكونات.

يمكنك الآن البدء في إضافة مكونات إلى مشروعك.

3. استيراد واستخدام مكونات Shadcn/UI

لننتقل إلى الجزء الممتع—إضافة بعض مكونات Shadcn/UI إلى تطبيقك React.js. في ملف src/App.js الخاص بك، يمكنك البدء باستيراد واستخدام واحدة من مكونات Shadcn/UI، مثل مكون الزر.

إليك مثال:

import React from 'react';
import { Button } from 'shadcn-ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>مرحبًا بكم في تطبيق Shadcn/UI الخاص بي</h1>
        <Button variant="primary">اضغط علي!</Button>
      </header>
    </div>
  );
}

export default App;

تم استيراد مكون Button من Shadcn/UI واستخدامه في مكون App. يمكنك استخدام خصائص مختلفة props لتخصيصه. في هذه الحالة، نستخدم خاصية variant="primary" لإعطاء الزر تصميمًا أساسيًا.

4. تخصيص سمة Shadcn/UI

إحدى أفضل ميزات Shadcn/UI هي قابليتها للتخصيص. يمكنك تعديل المكونات لتتناسب مع لغة تصميم تطبيقك الفريدة.

تتيح لك Shadcn/UI تعريف سمة مخصصة يمكن تطبيقها عالميًا. إليك كيفية القيام بذلك:

أ) إنشاء ملف سمة مخصصة

أولاً، قم بإنشاء ملف جديد يسمى theme.js في دليل src الخاص بك. في هذا الملف، ستقوم بتعريف سمة مخصصة كما يلي:

const theme = {
  colors: {
    primary: '#ff6347', // لون الطماطم
    secondary: '#4caf50', // لون أخضر
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Georgia, serif',
  },
};

export default theme;

ب) تطبيق السمة على مكوناتك

الآن بعد أن قمت بتعريف سمتك المخصصة، يمكنك تطبيقها على مكوناتك باستخدام مكون ThemeProvider. قم بتحديث ملف src/App.js الخاص بك كما يلي:

import React from 'react';
import { Button, ThemeProvider } from 'shadcn-ui';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
          <h1>مرحبًا بكم في تطبيق Shadcn/UI الخاص بي</h1>
          <Button variant="primary">اضغط علي!</Button>
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

في هذا الكود المحدث، قمنا باستيراد ThemeProvider من Shadcn/UI ولفّ تطبيقنا بداخله، مع تمرير theme المخصصة كخاصية.

5. إدارة واجهات برمجة التطبيقات باستخدام Apidog في مشروع Shadcn/UI + React الخاص بك

الآن بعد أن يبدو واجهتك الأمامية رائعة مع Shadcn/UI، حان الوقت لجعلها تعمل عن طريق ربطها مع واجهة برمجة التطبيقات. هنا يأتي دور Apidog. إذا لم تسمع عن Apidog من قبل، فهو أداة قوية لإدارة واجهات برمجة التطبيقات تبسط اختبار واجهات برمجة التطبيقات، الوثائق، والتعاون بين المطورين.

لماذا تستخدم Apidog مع تطبيق React.js الخاص بك؟

اختبار واجهات برمجة التطبيقات بسهولة: يمكنك اختبار نقاط نهاية واجهة برمجة التطبيقات مباشرة داخل مشروع React الخاص بك.
تعاون سلس: يتيح لك Apidog إنشاء ومشاركة وثائق واجهة برمجة التطبيقات مع فريقك.
تسريع عملية التطوير: يمكنك بسهولة محاكاة استجابات واجهة برمجة التطبيقات لتسريع عملية التطوير.

استخدام Apidog لاستدعاءات واجهة برمجة التطبيقات

دعنا نقول أنك تبني تطبيق React.js الذي يستخرج البيانات من واجهة برمجة تطبيقات الطقس. إليك كيف يمكنك استخدام Apidog لإدارة استدعاءات واجهة برمجة التطبيقات:

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: في محرر الاختبار، أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات الخاصة بك، واختر طريقة HTTP، وأضف أي رؤوس، أو معلمات، أو بيانات جسم تحتاجها. على سبيل المثال، يمكنك اختبار المسار الذي يرجع رسالة بسيطة أنشأناها سابقًا:

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

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

6. أفضل الممارسات لاستخدام Shadcn/UI و Apidog في React.js

إليك بعض أفضل الممارسات التي يجب عليك اتباعها للاستفادة القصوى من Shadcn/UI و Apidog:

تحسين الأداء: استخدم فقط مكونات Shadcn/UI التي تحتاجها للحفاظ على حجم حزمة صغير.
تجزئة مكوناتك: قسم واجهتك إلى مكونات صغيرة قابلة لإعادة الاستخدام.
اختبر واجهات برمجة التطبيقات الخاصة بك: استخدم Apidog لاختبار نقاط النهاية لواجهة برمجة التطبيقات بدقة وضمان عملها كما هو متوقع.
استخدم التحكم في الإصدارات: قم بالالتزام بتغييراتك بانتظام لتجنب فقدان التقدم والتعاون بفعالية مع فريقك.

الخاتمة: بناء تطبيقات React.js مع Shadcn/UI و Apidog

تهانينا! لديك الآن كل المعرفة التي تحتاجها لاستخدام Shadcn/UI في مشاريع React.js الخاصة بك. من إعداد المكتبة إلى تخصيص المكونات، لقد رأيت مدى سهولة إنشاء واجهات مستخدم جميلة. ومع Apidog، تصبح إدارة استدعاءات واجهة برمجة التطبيقات أمرًا سهلاً.

تذكر، سواء كنت تبني أداة داخلية أو تطبيقًا موجهًا للعملاء، يوفر لك Shadcn/UI المرونة لإنشاء شيء فريد، بينما يساعدك Apidog في تبسيط عملية واجهة برمجة التطبيقات الخاصة بك.

م. م. إذا كنت تعمل على واجهات برمجة التطبيقات، فلا تنسَ تنزيل Apidog مجانًا—فهو سيوفر لك ساعات من وقت التطوير والاختبار!

button