عند العمل مع React، يقدم Vite تجربة تطوير مبسطة مع بعض الاختلافات الرئيسية عن إعداد تطبيق Create React التقليدي. ستستكشف مشاركة المدونة هذه بنية مشروع Vite النموذجي، مع التركيز على الملفات الرئيسية مثل Index.html، وmain.jsx، وApp.jsx.

1.index.html

في تطبيق React المدعم بـ Vite، يعمل ملف Index.html كنقطة بداية مهمة. على عكس تطبيق Create React، حيث يتم إدخال البرامج النصية تلقائيًا، يتطلب Vite منك تحديد ملفات البرامج النصية مباشرةً. يعمل هذا التضمين الصريح على تبسيط فهم نقاط الدخول وتبعيات تطبيقك.

في هذا المثال، يمكنك رؤية علامة البرنامج النصي التي تقوم بتحميل main.jsx مباشرة. يعد هذا التضمين المباشر اختلافًا كبيرًا عن إنشاء تطبيق React، مما يعزز الوضوح والتحكم في نقاط دخول المشروع.

1.1 التبعيات

لضمان تحميل ملفات البرامج النصية بشكل صحيح، يستفيد Vite من عمليات استيراد وحدة ES الحديثة. تأكد من أن package.json الخاص بك يتضمن التبعيات الضرورية:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

يضمن تضمين البرنامج النصي في ملف HTML بشكل صريح ترتيب التحميل والتنفيذ الصحيح لتطبيقك، مما يخفف من المشكلات المحتملة في تحميل البرنامج النصي.

2.main.jsx

يعمل الملف main.jsx كنقطة دخول لتطبيق React الخاص بك. هذا الملف مسؤول عن تقديم المكون الجذر إلى DOM. وهو عادةً الملف المحدد في سمة src لعلامة البرنامج النصي في ملف Index.html.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
  
);

في هذا الملف، يتم استخدام ReactDOM.createRoot لعرض مكون التطبيق في عنصر HTML مع جذر المعرف. يعمل أسلوب العرض المباشر هذا، دون الاحتفاظ بأي عناصر جذرية مؤقتًا، على تبسيط العملية، مما يوضح مكان بدء التطبيق والمكونات المتضمنة.

3.App.jsx

يحتوي ملف App.jsx على تعريف مكون التطبيق الرئيسي لديك. يعمل هذا المكون كجذر لشجرة مكونات React الخاصة بك.

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

في هذا الملف، يمكنك تحديد البنية والسلوك الرئيسيين لتطبيقك. مكون التطبيق هو المكان الذي ستبني فيه واجهة المستخدم والوظيفة الأساسية، تمامًا كما تفعل في أي مشروع React آخر.

مواد إضافية وأفضل الممارسات

4. استخدام Tailwind CSS مع Vite

يمكن دمج Tailwind CSS بسهولة في مشروع Vite للحصول على تصميم يرتكز على المنفعة أولاً.

1. تثبيت Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. تكوين Tailwind:

قم بتحديث tailwind.config.js باستخدام المسارات المحددة لمشروعك:

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. تضمين Tailwind في CSS الخاص بك:

تحديث ملف Index.css ليشمل قاعدة Tailwind ومكوناته وأدواته المساعدة:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. استبدال الوحدة الساخنة (HMR)

يقدم Vite خدمة HMR مبتكرة، مما يسمح لك برؤية التغييرات في الوقت الفعلي دون تحديث الصفحة.

6. متغيرات البيئة

يستخدم Vite ملفات .env لإدارة متغيرات البيئة. قم بإنشاء ملف .env في جذر مشروعك وحدد المتغيرات الخاصة بك:

VITE_API_URL=https://api.example.com

الوصول إلى هذه المتغيرات في تطبيقك باستخدام import.meta.env:

const apiUrl = import.meta.env.VITE_API_URL;

7. عملية البناء الأمثل

يستخدم أمر البناء الخاص بـ Vite (vite build) مجموعة التحديثات الموجودة أسفل الغطاء لإنتاج أصول ثابتة مُحسّنة للغاية للإنتاج. وهذا يضمن أن طلبك سريع وفعال.

خاتمة

يوفر العمل مع Vite في مشروع React تجربة تطوير مبسطة وفعالة. إن فهم تدفق وبنية الملفات الرئيسية مثل Index.html، وmain.jsx، وApp.jsx يمكن أن يعزز بشكل كبير عملية التطوير لديك. بفضل المزايا الإضافية لتكامل Tailwind CSS وHMR والبنيات المحسنة، تبرز Vite كأداة حديثة وقوية لمطوري React.

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