Electron डेस्कटॉप ऐप विकास · पाठ

HTML, CSS, JavaScript को एकीकृत करना

समझें कि मानक वेब तकनीकें Electron के UI की आधारशिला कैसे बनती हैं और आपको अपने मौजूदा वेब विकास कौशल का उपयोग करने देती हैं।

पाठ 1, कुल 4 में से11 चरण

HTML, CSS, JavaScript को एकीकृत करना, CoddyKit पर Electron डेस्कटॉप ऐप विकास का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Electron डेस्कटॉप ऐप विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

HTML, CSS, JS के साथ वेब UI

स्वागत है! Electron में आप डेस्कटॉप ऐप्लिकेशन के इंटरफ़ेस बनाने के लिए उन्हीं तकनीकों का उपयोग करते हैं, जिनका उपयोग वेबसाइट के लिए किया जाता है: HTML, CSS और JavaScript।

इसका अर्थ है कि आपका मौजूदा वेब विकास कौशल सीधे उपयोग किया जा सकता है। आइए देखें कैसे!

रेंडरर प्रक्रिया से परिचय

एक Electron ऐप में एक मुख्य प्रक्रिया और एक या अधिक रेंडरर प्रक्रियाएं होती हैं।

मुख्य प्रक्रिया मूल OS के साथ होने वाले संवाद संभालती है।
रेंडरर प्रक्रिया मूल रूप से Chromium ब्राउज़र का एक उदाहरण है। यहीं आपका HTML, CSS और JavaScript चलता है और आपके ऐप का उपयोगकर्ता इंटरफ़ेस बनता है।

हर Electron विंडो को उसकी अपनी रेंडरर प्रक्रिया के रूप में समझें।

संरचना और सामग्री के लिए HTML

HTML (HyperText Markup Language) आपके Electron ऐप के UI सहित किसी भी वेब पेज की आधारभूत संरचना है।

यह संरचना और सामग्री निर्धारित करता है:

शीर्षक (<h1>, <h2>)
अनुच्छेद (<p>)
बटन (<button>)

यह आपके ऐप के लेआउट के नक्शे जैसा है।

HTML सामग्री दिखाना

आपकी Electron की मुख्य प्रक्रिया एक HTML फ़ाइल को रेंडरर प्रक्रिया (एक नई विंडो) में लोड करती है। यह HTML फ़ाइल आपके ऐप का प्रारंभिक दृश्य बन जाती है।

यहां बताया गया है कि `main.js` एक सरल `index.html` फ़ाइल को कैसे लोड करता है:

`index.html` में यह शामिल हो सकता है:<h1>Hello Electron!</h1><p>My first desktop UI.</p>

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  // Load the index.html file
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

अपने UI की शैली के लिए CSS

CSS (Cascading Style Sheets) का उपयोग आपकी HTML सामग्री के प्रस्तुतीकरण को नियंत्रित करने के लिए किया जाता है। यह निर्धारित करता है कि आपका ऐप कैसा दिखाई देगा।

CSS की सहायता से आप निर्धारित कर सकते हैं:

रंग और पृष्ठभूमि
फ़ॉन्ट और टेक्स्ट का आकार
लेआउट (मार्जिन, पैडिंग, स्थिति निर्धारण)

यह आपके HTML के नक्शे को आकर्षक इंटरफ़ेस में बदल देता है।

शैलियों को जोड़ना और लागू करना

आप अपने `index.html` के <head> खंड में <link> टैग का उपयोग करके HTML से CSS फ़ाइल जोड़ते हैं।

उदाहरण के लिए, पिछले `h1` तत्व की शैली तय करने के लिए:

आपके `index.html` में यह शामिल होगा:<link rel="stylesheet" href="style.css">

और `style.css` में यह हो सकता है:h1 { color: #3366ff; text-align: center; }

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

इंटरैक्टिविटी के लिए JavaScript

JavaScript (JS) आपके Electron ऐप के UI में गतिशील व्यवहार और इंटरैक्टिविटी जोड़ता है।

यह आपको निम्नलिखित करने देता है:

उपयोगकर्ता की कार्रवाइयों, जैसे क्लिक और कुंजी दबाने पर प्रतिक्रिया देना
HTML सामग्री और CSS शैलियों में बदलाव करना
API से डेटा प्राप्त करना

JS एक स्थिर पेज को गतिशील और प्रतिक्रियाशील ऐप्लिकेशन में बदल देता है।

JS के साथ UI लॉजिक लागू करना

आप <script> टैग का उपयोग करके JavaScript को सीधे अपने HTML में शामिल कर सकते हैं या बाहरी .js फ़ाइलों से जोड़ सकते हैं।

आइए एक बटन जोड़ें और क्लिक किए जाने पर उससे एक चेतावनी दिखवाएं:

आपके `index.html` में यह शामिल होगा:<button id="myButton">Click Me!</button><script>document.getElementById('myButton').addEventListener('click', () => { alert('Hello from Electron!'); });</script>

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

HTML, CSS, JS: एकीकृत स्टैक

HTML, CSS और JavaScript मिलकर Electron उपयोगकर्ता इंटरफ़ेस बनाने के लिए एक शक्तिशाली और परिचित स्टैक बनाते हैं।

HTML सामग्री और संरचना प्रदान करता है।
CSS दृश्य प्रस्तुतीकरण निर्धारित करता है।
JavaScript इंटरैक्टिविटी और गतिशील व्यवहार जोड़ता है।

इससे वेब डेवलपर अपने मौजूदा ज्ञान का उपयोग करके मजबूत डेस्कटॉप ऐप्लिकेशन बना सकते हैं।

वेब तकनीकों की भूमिकाएं

निम्नलिखित में से कौन-से कथन Electron की रेंडरर प्रक्रिया में HTML, CSS और JavaScript की भूमिका का सही वर्णन करते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: वेब UI की मूल बातें

आज हमने सीखा कि Electron डेस्कटॉप ऐप्लिकेशन के उपयोगकर्ता इंटरफ़ेस बनाने के लिए परिचित वेब तकनीकों—HTML, CSS और JavaScript—का उपयोग करता है।

रेंडरर प्रक्रिया वह स्थान है जहां ये वेब तकनीकें चलती हैं।
HTML सामग्री की संरचना करता है।
CSS रूप-रंग को शैली देता है।
JavaScript गतिशील व्यवहार जोड़ता है।

अब आप Electron UI के मूलभूत निर्माण खंडों को समझते हैं। अगली बार हम लोकप्रिय फ्रंटएंड फ़्रेमवर्क को एकीकृत करना सीखेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 47

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “HTML, CSS, JavaScript को एकीकृत करना” पाठ निःशुल्क है?

हाँ—“HTML, CSS, JavaScript को एकीकृत करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Electron डेस्कटॉप ऐप विकास पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“HTML, CSS, JavaScript को एकीकृत करना” में मैं क्या सीखूँगा?

समझें कि मानक वेब तकनीकें Electron के UI की आधारशिला कैसे बनती हैं और आपको अपने मौजूदा वेब विकास कौशल का उपयोग करने देती हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Electron डेस्कटॉप ऐप विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Electron डेस्कटॉप ऐप विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Electron डेस्कटॉप ऐप विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“HTML, CSS, JavaScript को एकीकृत करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Electron डेस्कटॉप ऐप विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Electron डेस्कटॉप ऐप विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Electron डेस्कटॉप ऐप विकास पर वापस जाएँ