Render HTML 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 में HTML render करना core functionality है, जिसे समझना और efficiently implement करना React apps build करने के लिए जरूरी है।

React में HTML render करना easy है और ये JSX (JavaScript XML) के through किया जाता है, जो JavaScript और HTML को एक syntax में merge करता है।

इस topic में हम देखेंगे कि कैसे React के components HTML को render करते हैं, और कैसे JSX का use करके HTML और JavaScript को combine करते हैं।

ReactJs Render HTML

React में HTML render करना एक process है जो Virtual DOM के through complete होता है। React एक Virtual DOM बनाता है जो original DOM का shadow copy है और जब component में कोई change आता है तो सिर्फ required parts को re-render करता है, इससे app fast और responsive रहती है।

React में, components एक HTML structure को JSX syntax में return करते हैं, जिसे React real DOM में render करता है।

Prerequisites

अगर आप React में new हैं तो पहले आपको कुछ basic चीज़ें set up करनी होंगी -

• React App Setup : npx create-react-app my-app command के through एक नया React project setup करें।

• File Structure Understanding : React project में, src folder के अंदर सारे components और files राखी जाते हैं।

आपके पास App.js, index.js, और एक public/index.html file होगी जिसमे React app का base structure होगा।

●●●

ReactJS Render HTML Example

React में HTML render करने के लिए हम JSX syntax का use करते हैं. एक basic example देखते हैं जिसमे हम "Hello, World!" render करेंगे।

Step 1 : Basic Setup

File : src/App.js

Copy
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a basic React component rendering HTML content.</p>
    </div>
  );
}

export default App;

File : src/index.js

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

ReactDOM.render(<App />, document.getElementById('root'));

Explanation :

• App.js में हमने एक functional component बनाया है जो HTML render करता है। यह component एक div element में h1 और p tag को return करता है।

• index.js में ReactDOM.render function App component को <div id="root"></div> में render करता है जो public/index.html में located है।

इस example में, Hello, World! और एक paragraph root element में render हो जायेंगे।

●●●

Render Complex HTML Structure

React में हम nested HTML structure भी create कर सकते हैं जिसमे multiple HTML tags और elements हो सकते हैं। चलिए एक example देखते हैं जिसमे एक user profile के details render करेंगे।

Create UserProfile Component

File : src/components/UserProfile.js

Copy
import React from 'react';

function UserProfile() {
  return (
    <div className="user-profile">
      <h2>User Profile</h2>
      <img src="https://via.placeholder.com/150" alt="User Avatar" />
      <p>Name: John Doe</p>
      <p>Age: 28</p>
      <p>Location: New York</p>
    </div>
  );
}

export default UserProfile;

File : src/App.js

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

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <UserProfile />
    </div>
  );
}

export default App;

इस example में -

• हमने UserProfile component बनाया है जो एक div में HTML elements को render करता है।

• इस component में हम एक heading, एक image और कुछ user details render कर रहे हैं।

• App.js में, हमने UserProfile component को import करके App component के अंदर include किया है।

React components को organize करने का यह modular approach code को maintain और reuse करने में help करता है।

●●●

ReactJs Render Dynamic HTML

React में हम JavaScript expressions को {} brackets में use करके HTML में embed कर सकते हैं। इसका मतलब हम dynamically HTML content को update कर सकते हैं।

चलिए एक dynamic example देखते हैं -

File : src/components/DynamicGreeting.js

Copy
import React from 'react';

function DynamicGreeting(props) {
  const greeting = `Hello, ${props.name}!`;
  return (
    <div>
      <h2>{greeting}</h2>
      <p>Welcome to ReactJS rendering!</p>
    </div>
  );
}

export default DynamicGreeting;

File : src/App.js

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

function App() {
  return (
    <div>
      <DynamicGreeting name="Alice" />
      <DynamicGreeting name="Bob" />
    </div>
  );
}

export default App;

Explanation

• DynamicGreeting component props के through एक name accept करता है और उस name को dynamically display करता है।

• {props.name} को curly braces में wrap करके हम dynamically user का नाम render कर सकते हैं।

• App.js में, DynamicGreeting component को अलग-अलग names के साथ render किया गया है, तो यह HTML content dynamically render हो जाता है।

●●●

Conditional Rendering in React

React में हम conditional rendering भी कर सकते हैं, जो कि useful है जब हमें कुछ conditions के basis पर HTML render करना हो।

File : src/components/ConditionalRender.js

Copy
import React from 'react';

function ConditionalRender({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h2>Welcome back, User!</h2>
      ) : (
        <h2>Please log in to continue.</h2>
      )}
    </div>
  );
}

export default ConditionalRender;

File : src/App.js

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

function App() {
  return (
    <div>
      <ConditionalRender isLoggedIn={true} />
      <ConditionalRender isLoggedIn={false} />
    </div>
  );
}

export default App;

Explanation

• ConditionalRender component isLoggedIn prop का use करके check करता है कि user logged इन है या नहीं।

• अगर isLoggedIn true है तो एक message render होता है, और अगर false है तो दूसरा message render होता है।

●●●

ReactJs Render HTML with lists and loops

React में lists को render करना भी काफी easy है। हम JavaScript का .map() function use करके arrays को render कर सकते हैं।

File : src/components/ItemList.js

Copy
import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default ItemList;

File : src/App.js

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

function App() {
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
  return (
    <div>
      <h1>Fruit List</h1>
      <ItemList items={fruits} />
    </div>
  );
}

export default App;

Explanation

• ItemList component items prop के through एक array को accept करता है और .map() function के through उस array के items को <li> tags में render करता है।

• App.js में, हमने fruits का एक array define किया और उससे ItemList component को pass किया।

●●●

I hope, अब आपको basic level पर समझ आ गया होगा कि कैसे recatjs में rendering work करती है।

Happy Coding :)