रिएक्ट के साथ काम करते समय, Vite पारंपरिक क्रिएट रिएक्ट ऐप सेटअप से कुछ महत्वपूर्ण अंतरों के साथ एक सुव्यवस्थित विकास अनुभव प्रदान करता है। यह ब्लॉग पोस्ट एक विशिष्ट Vite प्रोजेक्ट की संरचना का पता लगाएगा, जिसमें Index.html, main.jsx और App.jsx जैसी प्रमुख फ़ाइलों पर ध्यान केंद्रित किया जाएगा।

1. Index.html

Vite-संचालित रिएक्ट एप्लिकेशन में, Index.html एक महत्वपूर्ण प्रारंभिक बिंदु के रूप में कार्य करता है। क्रिएट रिएक्ट ऐप के विपरीत, जहां स्क्रिप्ट स्वचालित रूप से इंजेक्ट की जाती हैं, वाइट के लिए आपको सीधे स्क्रिप्ट फ़ाइलों को निर्दिष्ट करने की आवश्यकता होती है। यह स्पष्ट समावेशन आपके एप्लिकेशन के प्रवेश बिंदुओं और निर्भरताओं को समझना सरल बनाता है।

इस उदाहरण में, आप स्क्रिप्ट टैग को सीधे main.jsx लोड करते हुए देख सकते हैं। यह प्रत्यक्ष समावेशन क्रिएट रिएक्ट ऐप से एक बड़ा अंतर है, जो प्रोजेक्ट के प्रवेश बिंदुओं पर स्पष्टता और नियंत्रण बढ़ाता है।

1.1 निर्भरताएँ

यह सुनिश्चित करने के लिए कि आपकी स्क्रिप्ट फ़ाइलें सही ढंग से लोड हों, Vite आधुनिक ES मॉड्यूल आयात का लाभ उठाता है। सुनिश्चित करें कि आपके package.json में आवश्यक निर्भरताएँ शामिल हैं:

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

HTML फ़ाइल में स्क्रिप्ट को स्पष्ट रूप से शामिल करने से आपके एप्लिकेशन का सही लोडिंग और निष्पादन क्रम सुनिश्चित होता है, जिससे स्क्रिप्ट लोडिंग के साथ संभावित समस्याएं कम हो जाती हैं।

2. मुख्य.जेएसएक्स

main.jsx फ़ाइल आपके रिएक्ट एप्लिकेशन के लिए प्रवेश बिंदु के रूप में कार्य करती है। यह फ़ाइल रूट घटक को DOM में प्रस्तुत करने के लिए ज़िम्मेदार है। यह आमतौर पर आपके Index.html में स्क्रिप्ट टैग के src विशेषता में निर्दिष्ट फ़ाइल है।

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 फ़ाइल में आपके मुख्य ऐप घटक की परिभाषा शामिल है। यह घटक आपके रिएक्ट घटक वृक्ष की जड़ के रूप में कार्य करता है।

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

इस फ़ाइल में, आप अपने एप्लिकेशन की मुख्य संरचना और व्यवहार को परिभाषित करते हैं। ऐप घटक वह जगह है जहां आप प्राथमिक यूआई और कार्यक्षमता का निर्माण करेंगे, ठीक वैसे ही जैसे आप किसी अन्य रिएक्ट प्रोजेक्ट में करेंगे।

अतिरिक्त सामग्री और सर्वोत्तम प्रथाएँ

4. वाइट के साथ टेलविंड सीएसएस का उपयोग करना

टेलविंड सीएसएस को उपयोगिता-प्रथम स्टाइलिंग के लिए वाइट प्रोजेक्ट में आसानी से एकीकृत किया जा सकता है।

1. टेलविंड सीएसएस स्थापित करें:

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

1. टेलविंड कॉन्फ़िगर करें:

अपने प्रोजेक्ट के विशिष्ट पथों के साथ टेलविंड.कॉन्फिग.जेएस को अपडेट करें:

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

1. अपने सीएसएस में टेलविंड शामिल करें:

टेलविंड के आधार, घटकों और उपयोगिताओं को शामिल करने के लिए Index.css को अपडेट करें:

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

5. हॉट मॉड्यूल रिप्लेसमेंट (एचएमआर)

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. अनुकूलित निर्माण प्रक्रिया

वाइट का बिल्ड कमांड (वाइट बिल्ड) उत्पादन के लिए अत्यधिक अनुकूलित स्थिर संपत्तियों का उत्पादन करने के लिए हुड के तहत रोलअप का उपयोग करता है। यह सुनिश्चित करता है कि आपका एप्लिकेशन तेज़ और कुशल है।

निष्कर्ष

रिएक्ट प्रोजेक्ट में वाइट के साथ काम करना एक सुव्यवस्थित और कुशल विकास अनुभव प्रदान करता है। Index.html, main.jsx, और App.jsx जैसी प्रमुख फ़ाइलों के प्रवाह और संरचना को समझना आपकी विकास प्रक्रिया को महत्वपूर्ण रूप से बढ़ा सकता है। टेलविंड सीएसएस एकीकरण, एचएमआर और अनुकूलित बिल्ड के अतिरिक्त लाभों के साथ, वाइट रिएक्ट डेवलपर्स के लिए एक आधुनिक, शक्तिशाली टूल के रूप में खड़ा है।

इन सुविधाओं और सर्वोत्तम प्रथाओं का लाभ उठाकर, आप आसानी से उच्च-प्रदर्शन, स्केलेबल और रखरखाव योग्य एप्लिकेशन बना सकते हैं।