अध्याय 4: स्टाइलिंग (Styling)

इस अध्याय में, हम रिएक्ट.js में यूजर इंटरफेस को स्टाइल करने के विभिन्न तरीकों का अन्वेषण करेंगे। स्टाइलिंग आपके वेब एप्लिकेशन के दृश्य और उपयोगकर्ता अनुभव को बढ़ाने में महत्वपूर्ण भूमिका निभाती है। रिएक्ट में स्टाइलिंग के कई विकल्प और तकनीकें उपलब्ध हैं, जिनका उपयोग आप अपनी आवश्यकताओं के अनुसार कर सकते हैं।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

इलाइन स्टाइल्स (Inline Styles): जावास्क्रिप्ट ऑब्जेक्ट्स का उपयोग करके स्टाइलिंग करना।
CSS स्टाइलशीट्स (CSS Stylesheets): पारंपरिक CSS फाइल्स का उपयोग करके स्टाइल्स लागू करना।
CSS मॉड्यूल्स (CSS Modules): स्कोप्ड और मॉड्यूलर CSS का उपयोग करना।
स्टाइल्ड कंपोनेंट्स (Styled Components): CSS-in-JS का उपयोग करके स्टाइलिंग और लॉजिक को एक साथ प्रबंधित करना।

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

इलाइन स्टाइल्स (Inline Styles)

रिएक्ट में इलाइन स्टाइल्स का उपयोग एक सरल और त्वरित तरीका है, जिसके माध्यम से आप अपने कम्पोनेंट्स के लिए स्टाइल्स को जावास्क्रिप्ट ऑब्जेक्ट्स के रूप में परिभाषित कर सकते हैं। इलाइन स्टाइल्स आपको प्रत्येक तत्व के लिए डायनामिक और कस्टमाइजेबल स्टाइल्स प्रदान करते हैं। यह तरीका छोटे और सरल स्टाइल्स लागू करने के लिए आदर्श है।

इलाइन स्टाइल्स का उपयोग (Using Inline Styles)

इलाइन स्टाइल्स का उपयोग रिएक्ट में काफी आसान है। आप जावास्क्रिप्ट ऑब्जेक्ट्स का उपयोग करके स्टाइल्स परिभाषित कर सकते हैं और इन्हें style एट्रिब्यूट के माध्यम से JSX तत्वों में लागू कर सकते हैं। उदाहरण के लिए:

function MyComponent() {
  const myStyle = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  };

  return (
    <div style={myStyle}>
      <h1>Hello, World!</h1>
    </div>
  );
}

इलाइन स्टाइल्स की विशेषताएँ (Features of Inline Styles)

डायनामिक स्टाइलिंग (Dynamic Styling): इलाइन स्टाइल्स जावास्क्रिप्ट के वेरिएबल्स और फंक्शन्स का उपयोग करके स्टाइल्स को डायनामिक और कस्टमाइजेबल बनाते हैं।
स्कोपेड स्टाइल्स (Scoped Styles): इलाइन स्टाइल्स केवल उस विशेष तत्व पर लागू होते हैं, जिससे स्टाइल्स के क्लैश होने की संभावना कम होती है।
जावास्क्रिप्ट फ्रेंडली (JavaScript Friendly): इलाइन स्टाइल्स जावास्क्रिप्ट के साथ अच्छी तरह से एकीकृत होते हैं, जिससे आप जटिल लॉजिक और कंडीशनल स्टाइलिंग आसानी से लागू कर सकते हैं।

इलाइन स्टाइल्स का उदाहरण (Example of Inline Styles)

नीचे दिए गए उदाहरण में, हम बटन के बैकग्राउंड कलर को इसके hover होने पर बदलते हैं:

import React, { useState } from 'react';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  const buttonStyle = {
    backgroundColor: isHovered ? 'green' : 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return (
    <button
      style={buttonStyle}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      Hover me!
    </button>
  );
}

export default HoverButton;

इलाइन स्टाइल्स के लाभ (Benefits of Inline Styles)

सरलता (Simplicity): छोटे और सरल स्टाइल्स लागू करने के लिए आसान और त्वरित तरीका।
डायनामिक स्टाइलिंग (Dynamic Styling): स्टाइल्स को जावास्क्रिप्ट के साथ डायनामिक रूप से बदलने की क्षमता।
स्कोपिंग (Scoping): स्टाइल्स केवल उसी तत्व पर लागू होते हैं, जिससे क्लैश की संभावना कम होती है।

इलाइन स्टाइल्स के नुकसान (Drawbacks of Inline Styles)

CSS फीचर्स की सीमाएँ (Limited CSS Features): इलाइन स्टाइल्स में CSS के कुछ फीचर्स, जैसे कि मीडिया क्वेरीज और होवर स्टेट्स को लागू करना मुश्किल हो सकता है।
कोड की पठनीयता (Code Readability): बड़े और जटिल स्टाइल्स को इलाइन स्टाइल्स में प्रबंधित करना मुश्किल हो सकता है, जिससे कोड की पठनीयता कम हो सकती है।
कैशिंग की कमी (Lack of Caching): इलाइन स्टाइल्स को हर बार रेंडरिंग के दौरान पुनः उत्पन्न किया जाता है, जिससे ब्राउज़र कैशिंग का लाभ नहीं मिलता।

CSS स्टाइलशीट्स (CSS Stylesheets)

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

CSS स्टाइलशीट्स का उपयोग (Using CSS Stylesheets)

रिएक्ट में CSS स्टाइलशीट्स का उपयोग करना सरल है। आप अपनी स्टाइल्स को एक अलग CSS फ़ाइल में लिख सकते हैं और फिर इसे अपने रिएक्ट कम्पोनेंट में इंपोर्ट कर सकते हैं। उदाहरण के लिए:

CSS फ़ाइल बनाना: सबसे पहले, एक नई CSS फ़ाइल बनाएं, जैसे कि App.css, और उसमें अपने स्टाइल्स लिखें:
```
/* App.css */
.app-container {
  background-color: #f0f0f0;
  padding: 20px;
}

.app-title {
  color: #333;
  font-size: 24px;
  text-align: center;
}
```
CSS फ़ाइल को इंपोर्ट करना: अब, अपनी रिएक्ट कम्पोनेंट फ़ाइल में CSS फ़ाइल को इंपोर्ट करें और क्लास नेम्स का उपयोग करके स्टाइल्स लागू करें:
```
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app-container">
      <h1 className="app-title">Hello, World!</h1>
    </div>
  );
}

export default App;
```

CSS स्टाइलशीट्स के लाभ (Benefits of CSS Stylesheets)

पुन: उपयोगिता (Reusability): एक ही CSS फ़ाइल को कई कम्पोनेंट्स में पुन: उपयोग किया जा सकता है।
संगठित कोड (Organized Code): स्टाइल्स को अलग-अलग फ़ाइलों में रखने से कोडबेस साफ और प्रबंधनीय रहता है।
कैशिंग (Caching): ब्राउज़र CSS फ़ाइलों को कैश कर सकता है, जिससे एप्लिकेशन का प्रदर्शन बेहतर होता है।
मीडिया क्वेरीज (Media Queries): CSS स्टाइलशीट्स का उपयोग करके आप आसानी से विभिन्न डिवाइसों और स्क्रीन आकारों के लिए रेस्पॉन्सिव डिज़ाइन बना सकते हैं।

CSS स्टाइलशीट्स के नुकसान (Drawbacks of CSS Stylesheets)

ग्लोबल नेचर (Global Nature): CSS स्टाइलशीट्स में स्टाइल्स ग्लोबल होते हैं, जिससे स्टाइल्स के क्लैश होने की संभावना बढ़ जाती है।
स्कोपिंग की कमी (Lack of Scoping): बिना किसी अतिरिक्त टूल के, CSS स्टाइल्स को स्कोप करना मुश्किल हो सकता है, जिससे स्टाइल्स अनपेक्षित तत्वों पर लागू हो सकते हैं।

CSS स्टाइलशीट्स का उदाहरण (Example of CSS Stylesheets)

नीचे दिए गए उदाहरण में, हम एक सिंपल बटन के लिए CSS स्टाइल्स लागू कर रहे हैं:

CSS फ़ाइल:

/* Button.css */
.button {
  background-color: #008cba;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button:hover {
  background-color: #005f5f;
}

रिएक्ट कम्पोनेंट:

import React from 'react';
import './Button.css';

function Button({ label }) {
  return (
    <button className="button">
      {label}
    </button>
  );
}

export default Button;

CSS मॉड्यूल्स (CSS Modules)

CSS मॉड्यूल्स रिएक्ट में स्टाइलिंग लागू करने का एक उन्नत तरीका है, जो स्कोपेड और मॉड्यूलर स्टाइल्स प्रदान करता है। CSS मॉड्यूल्स का उपयोग करके, आप अपने स्टाइल्स को ग्लोबल स्पेस में लीक होने से बचा सकते हैं, जिससे स्टाइल्स का क्लैश होने की संभावना कम हो जाती है। यह विधि बड़े और जटिल प्रोजेक्ट्स के लिए आदर्श है, जहां स्कोपिंग और मॉड्यूलरिटी महत्वपूर्ण हैं।

CSS मॉड्यूल्स क्या हैं? (What are CSS Modules?)

CSS मॉड्यूल्स आपको अपने स्टाइल्स को स्थानीय रूप से स्कोप करने की अनुमति देते हैं। इसका मतलब है कि CSS क्लास नेम्स और एनिमेशन केवल उस कम्पोनेंट पर लागू होते हैं जहां उन्हें परिभाषित किया गया है। यह दृष्टिकोण आपके रिएक्ट एप्लिकेशन को अधिक मॉड्यूलर और प्रबंधनीय बनाता है।

CSS मॉड्यूल्स का उपयोग (Using CSS Modules)

CSS मॉड्यूल्स का उपयोग करने के लिए, आपको अपनी CSS फाइल का नाम .module.css रखना होगा और इसे अपने रिएक्ट कम्पोनेंट में इंपोर्ट करना होगा। उदाहरण के लिए:

CSS मॉड्यूल फ़ाइल बनाना: सबसे पहले, एक नई CSS मॉड्यूल फाइल बनाएं, जैसे कि App.module.css, और उसमें अपने स्टाइल्स लिखें:
```
/* App.module.css */
.container {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

.title {
  color: #333;
  font-size: 24px;
  text-align: center;
}
```
CSS मॉड्यूल को इंपोर्ट करना: अब, अपनी रिएक्ट कम्पोनेंट फाइल में CSS मॉड्यूल को इंपोर्ट करें और स्टाइल्स को लागू करें:
```
import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  );
}

export default App;
```

CSS मॉड्यूल्स के लाभ (Benefits of CSS Modules)

स्कोपिंग (Scoping): CSS मॉड्यूल्स स्थानीय रूप से स्कोपेड होते हैं, जिससे स्टाइल्स का क्लैश होने की संभावना कम होती है।
पुन: उपयोगिता (Reusability): मॉड्यूलर स्टाइल्स को आसानी से विभिन्न कम्पोनेंट्स में पुन: उपयोग किया जा सकता है।
क्लीन कोडबेस (Clean Codebase): CSS मॉड्यूल्स का उपयोग करके, आप अपने कोडबेस को अधिक साफ और प्रबंधनीय बना सकते हैं।
कैशिंग (Caching): पारंपरिक CSS की तरह, CSS मॉड्यूल्स भी ब्राउज़र कैशिंग के साथ अच्छी तरह से काम करते हैं।

CSS मॉड्यूल्स का उदाहरण (Example of CSS Modules)

नीचे दिए गए उदाहरण में, हम एक सिंपल बटन के लिए CSS मॉड्यूल्स लागू कर रहे हैं:

CSS मॉड्यूल फ़ाइल:

/* Button.module.css */
.button {
  background-color: #008cba;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button:hover {
  background-color: #005f5f;
}

रिएक्ट कम्पोनेंट:

import React from 'react';
import styles from './Button.module.css';

function Button({ label }) {
  return (
    <button className={styles.button}>
      {label}
    </button>
  );
}

export default Button;

CSS मॉड्यूल्स के नुकसान (Drawbacks of CSS Modules)

कन्वेंशन (Convention): CSS मॉड्यूल्स के लिए अलग-अलग फाइल नेमिंग कन्वेंशन का पालन करना होता है, जैसे कि .module.css, जिससे कुछ डेवलपर्स को अतिरिक्त प्रयास की आवश्यकता हो सकती है।
प्रारंभिक सेटअप (Initial Setup): कुछ परियोजनाओं में, विशेष रूप से कस्टम वेबपैक कॉन्फिगरेशन के साथ, CSS मॉड्यूल्स को सेटअप करना थोड़ा जटिल हो सकता है।

स्टाइल्ड कंपोनेंट्स (Styled Components)

स्टाइल्ड कंपोनेंट्स (Styled Components) रिएक्ट में CSS-in-JS का उपयोग करके स्टाइलिंग लागू करने का एक आधुनिक तरीका है। यह तकनीक आपको स्टाइल्स और कम्पोनेंट्स को एक ही स्थान पर रखने की अनुमति देती है, जिससे कोड अधिक मॉड्यूलर और प्रबंधनीय बनता है। स्टाइल्ड कंपोनेंट्स आपको जावास्क्रिप्ट के भीतर ही स्टाइल्स को लिखने और प्रबंधित करने की सुविधा प्रदान करते हैं, जिससे स्टाइल्स को डायनामिक और कस्टमाइजेबल बनाना आसान हो जाता है।

स्टाइल्ड कंपोनेंट्स क्या हैं? (What are Styled Components?)

स्टाइल्ड कंपोनेंट्स एक लोकप्रिय CSS-in-JS लाइब्रेरी है जो आपको रिएक्ट कम्पोनेंट्स के लिए स्टाइल्स लिखने की अनुमति देती है। यह जावास्क्रिप्ट के भीतर ही CSS को लिखने और लागू करने का एक शक्तिशाली तरीका प्रदान करती है। स्टाइल्ड कंपोनेंट्स का उपयोग करके, आप स्टाइल्स को कम्पोनेंट्स के साथ बंध सकते हैं, जिससे स्टाइल्स का क्लैश होने की संभावना कम हो जाती है और कोड अधिक पठनीय और प्रबंधनीय बनता है।

स्टाइल्ड कंपोनेंट्स का उपयोग (Using Styled Components)

स्टाइल्ड कंपोनेंट्स का उपयोग करने के लिए, आपको सबसे पहले styled-components लाइब्रेरी को अपने प्रोजेक्ट में इंस्टॉल करना होगा। इसके बाद, आप स्टाइल्ड कंपोनेंट्स को परिभाषित और उपयोग कर सकते हैं।

स्टाइल्ड कंपोनेंट्स इंस्टॉल करना:
```
npm install styled-components
```

स्टाइल्ड कंपोनेंट्स बनाना और उपयोग करना:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
`;

const Title = styled.h1`
  color: #333;
  font-size: 24px;
  text-align: center;
`;

function App() {
  return (
    <Container>
      <Title>Hello, World!</Title>
    </Container>
  );
}

export default App;

स्टाइल्ड कंपोनेंट्स के लाभ (Benefits of Styled Components)

स्कोपिंग (Scoping): स्टाइल्स केवल उन्हीं कम्पोनेंट्स पर लागू होते हैं जिनके लिए वे परिभाषित किए गए हैं, जिससे स्टाइल्स का क्लैश होने की संभावना कम होती है।
डायनामिक स्टाइलिंग (Dynamic Styling): जावास्क्रिप्ट के माध्यम से स्टाइल्स को डायनामिक रूप से बदलना और प्रबंधित करना आसान होता है।
मॉड्यूलरिटी (Modularity): स्टाइल्स और कम्पोनेंट्स को एक साथ रखने से कोड अधिक मॉड्यूलर और प्रबंधनीय बनता है।
सहजता (Ease of Use): CSS और जावास्क्रिप्ट के बीच की खाई को पाटने से डेवलपर्स के लिए स्टाइल्स को लिखना और प्रबंधित करना आसान हो जाता है।

स्टाइल्ड कंपोनेंट्स का उदाहरण (Example of Styled Components)

नीचे दिए गए उदाहरण में, हम एक सिंपल बटन के लिए स्टाइल्ड कंपोनेंट्स का उपयोग कर रहे हैं:

स्टाइल्ड बटन कंपोनेंट:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #008cba;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #005f5f;
  }
`;

function App() {
  return (
    <Button>Click Me</Button>
  );
}

export default App;

स्टाइल्ड कंपोनेंट्स के नुकसान (Drawbacks of Styled Components)

बंडल साइज (Bundle Size): स्टाइल्ड कंपोनेंट्स का उपयोग करने से आपके बंडल का साइज बढ़ सकता है, खासकर बड़े प्रोजेक्ट्स में।
लर्निंग कर्व (Learning Curve): CSS-in-JS की अवधारणा नए डेवलपर्स के लिए थोड़ी जटिल हो सकती है, खासकर उन लोगों के लिए जो पारंपरिक CSS के आदी हैं।