JSX In ReactJS In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में JSX काफी unique और powerful feature है जो React को और भी easy और efficient बनाता है। JSX (JavaScript XML) एक syntax extension है जो JavaScript में HTML लिखने का तरीका है।

JSX को JavaScript और HTML का hybrid कहा जा सकता है, जो React components बनाते वक्त readable और maintainable code लिखने में help करता है।

इस topic में हम detail में देखेंगे कि JSX क्या है, कैसे काम करता है, और कैसे हम इसे अपने React projects में use कर सकते हैं।

●●●

What is React JSX ?

JSX JavaScript XML का short form है, जो JavaScript में HTML जैसा syntax लिखने का तरीका है। जब भी हम React components बनाते हैं, तो हम JSX का use करके HTML structure लिख सकते हैं, जो React के अंदर convert होकर JavaScript बन जाता है।

React के बिना, ये syntax browsers के समझने लायक नहीं होता, लेकिन React कि parsing के बाद ये JavaScript में convert हो जाता है और browser में render हो सकता है।

How does JSX work in React ?

JSX, JavaScript को HTML elements के साथ combine करने में help करता है। JSX का use करके हम -

• Readable और Clean Code लिख सकते हैं।

• JavaScript Expressions का HTML में Use कर सकते हैं।

• Conditional Rendering और Lists को easily manage कर सकते हैं।

जब हम JSX लिखते हैं, तो React compiler उससे React.createElement() calls में convert करता है जो JavaScript को readable और executable बनाता है।

●●●

ReactJs JSX Syntax

चलिए JSX syntax का basic structure समझते हैं। JSX में हम HTML elements को लिखने के लिए directly tags का use करते हैं, जिसे JavaScript के अंदर return statement के साथ return करते हैं।

File : src/App.js

Copy
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React with JSX!</h1>
      <p>Welcome to JSX tutorial.</p>
    </div>
  );
}

export default App;

इस example में हमने एक App component बनाया है जो <h1> और <p> elements को JSX में render करता है।

Note: JSX में class attribute नहीं use करते; इसकी जगह className का use होता है क्योंकि class JavaScript का reserved keyword है।

JavaScript Expressions In JSX

JSX में हम {} curly braces का use करके JavaScript expressions embed कर सकते हैं। यह expressions कुछ भी हो सकते हैं - variables, functions, calculations, etc.

File : src/App.js

Copy
import React from 'react';

function App() {
  const name = "Alice";
  const age = 25;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>2 + 3 = {2 + 3}</p>
    </div>
  );
}

export default App;

Explanation

• {name} और {age} expressions को curly braces में wrap करके हम directly HTML के अंदर render कर सकते हैं।

• Math calculations जैसे {2 + 3} भी JSX में directly embed किया जा सकता है।

●●●

ReactJs Attributes in JSX

JSX में HTML attributes को pass करना simple है, लेकिन कुछ special attributes को handle करते वक्त अलग syntax का use करना पड़ता है।

जैसे -

• class के लिए className use करते हैं।

• for के लिए htmlFor attribute का use होता है (ये label के साथ use होता है)।

File : src/components/Profile.js

Copy
import React from 'react';

function Profile() {
  const imageUrl = "https://via.placeholder.com/150";
  
  return (
    <div className="profile">
      <h2>My Profile</h2>
      <img src={imageUrl} alt="Profile Picture" />
    </div>
  );
}

export default Profile;

File : src/App.js

Copy
import React from 'react';
import FruitList from './components/FruitList';

function App() {
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <div>
      <h1>Fruit List</h1>
      <FruitList fruits={fruits} />
    </div>
  );
}

export default App;

Explanation

• className="profile" में class कि जगह className use किया गया है।

• img tag में हमने src और alt attributes को dynamic value के साथ pass किया है।

●●●

ReactJs Inline Styling In JSX

JSX में inline styling को JavaScript objects के through handle करते हैं। Inline styling में CSS properties camelCase में लिखते हैं।

File : src/components/StyledText.js

Copy
import React from 'react';

function StyledText() {
  const style = {
    color: 'blue',
    fontSize: '20px',
    padding: '10px'
  };

  return (
    <div style={style}>
      <h2>This is styled text</h2>
      <p>Inline styling in JSX is handled using JavaScript objects.</p>
    </div>
  );
}

export default StyledText;

style attribute में JavaScript object को pass किया गया है जिसमे CSS properties को camelCase में लिखा गया है, जैसे fontSize और padding.

●●●

ReactJs JSX Fragments

Fragments का use unnecessary DOM nodes को avoid करने के लिए होता है। Fragments में <>...</> syntax का use किया जाता है जो extra <div> elements को add किये बिना multiple elements को एक साथ return करने में help करता है।

File : src/components/Info.js

Copy
import React from 'react';

function Info() {
  return (
    <>
      <h2>Fragment Example</h2>
      <p>This content is inside a fragment.</p>
    </>
  );
}

export default Info;

यहां <>...</> के use से हमने div के बिना multiple elements को एक साथ return किया है।

●●●

Happy coding :)