📦 React.js क्या है?

React एक JavaScript लाइब्रेरी है जिसे Facebook (अब Meta) ने विकसित किया है। यह मुख्यतः UI (User Interface) बनाने के लिए प्रयोग होता है। इसकी खासियत है:

• Component-Based Architecture
• Virtual DOM के कारण तेज़
•  renderingReusability और Scalability

React में हम HTML जैसे syntax को JSX के रूप में लिख सकते हैं जो JavaScript में compile होता है।

🚀 React.js की शुरुआत कैसे करें? (2025 अपडेट)

1. Node.js इंस्टॉल करें

React का इस्तेमाल करने के लिए Node.js की आवश्यकता होती है। Node.js की वेबसाइट से डाउनलोड करें। इंस्टॉल के बाद वर्जन चेक करें:

node -v

2. Vite के साथ React प्रोजेक्ट बनाएं (2025 Recommended)

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

3. React Folder Structure

my-react-app/
├── public/
├── src/
│   ├── App.jsx
│   ├── index.jsx
│   └── styles.css
├── package.json

सारा main code src फोल्डर में लिखा जाता है।

💡 JSX, Components और Props

JSX क्या है?

JSX = JavaScript + XML

const element = <h1>Hello, React!</h1>;

JSX को ब्राउज़र समझ नहीं सकता, इसलिए Babel इसे React.createElement() में बदलता है।

Functional Components

function Greeting() {
  return <h1>Hello from component</h1>;
}

Props क्या होते हैं?

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Usage
<Welcome name="Banti" />

📲 State और Events

useState से State मैनेज करना

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </>
  );
}

Input Field Handle करना

const [name, setName] = useState("");
<input type="text" onChange={(e) => setName(e.target.value)} />

🎯 Conditional Rendering और Dynamic Lists

Ternary Operator

{isLoggedIn ? <p>Welcome!</p> : <p>Please login</p>}

map() Function से List बनाना

const fruits = ["Apple", "Banana", "Cherry"];
<ul>
  {fruits.map((fruit, i) => (
    <li key={i}>{fruit}</li>
  ))}
</ul>

🔁 React Hooks और Lifecycle

useEffect

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useRef

const inputRef = useRef();
<input ref={inputRef} />

🌐 Routing with react-router-dom v6

1. Installation

npm install react-router-dom

2. BrowserRouter Setup

import { BrowserRouter } from 'react-router-dom';

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

3. Route Setup

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

4. NavLink

<NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
  About
</NavLink>

5. Nested Routing और Outlet

<Route path="/courses" element={<Courses />}>
  <Route path="web" element={<WebDev />} />
</Route>

📌 निष्कर्ष (Conclusion)

React.js एक शक्तिशाली JavaScript लाइब्रेरी है जो UI development को तेज़, modular और reusable बनाती है। इस पोस्ट में आपने जाना:

✅ React Setup और Tools (Vite)
✅ JSX और Component Structure
✅ Props, State और Events
✅ Conditional Logic और Lists
✅ useEffect, useRef जैसे Hooks
✅ Routing via React Router v6

अब आप खुद का React प्रोजेक्ट शुरू कर सकते हैं:

• Portfolio Website
• Blog System
• To-do App
• Resume Builder

📚 Recommended Resources

• React Official
•  DocsVite Documentation
• React Router Docs

🔥 नीचे Comment करें: आपने React.js में क्या प्रोजेक्ट बनाया है या क्या बनाना चाहते हैं?

लेखक: Banti Kevat | Web Developer & Blogger | Updated July 2025