📘 React JS क्या है?

🔹 ReactJS एक JavaScript लाइब्रेरी है जो यूज़र इंटरफेस (User Interface) या UI बनाने के लिए प्रयोग होती है।

✅ React सिर्फ UI बनाता है, यानी यह आपकी वेबसाइट या वेब ऐप का "View" Layer संभालता है।

🧠 React को किसने बनाया?

• It was created by Jordan Walke, who was a software engineer at Facebook.
• 2011 में internal use और 2013 में public release।
• Performance और Scalability को improve करने के लिए बनाया गया।

📜 React की History

🎯 React JS के Key Features

🚀 React JS का इस्तेमाल कहाँ होता है?

• Facebook, Instagram, WhatsApp Web
• Netflix, Airbnb
• Flipkart / Amazon (कुछ parts)
• Zomato / Swiggy

🧪 React JS के मुख्य Concepts

• JSX – JavaScript + HTML
• Components (Functional/Class)
• Props – Data Passing
• State – Dynamic Data
• Lifecycle Methods / Hooks
• Routing
• API Integration
• Form Handling
• Redux / Context API
• Server Components (React 19)

🔢 React JS के Versions Overview

📌 React 19 में नया क्या है?

• 🔧 New Compiler – Code को automatic optimize करता है।
• 🪝 use() Hook – Async functions को component में directly use कर सकते हैं।
• 🌐 Server Actions – Backend logic को frontend से call कर सकते हैं।
• 🎥 Streaming – Faster loading with partial UI updates।
• 📦 Built-in Asset Loading – Assets जैसे images, fonts को automatic handle करता है।

👨‍💻 क्यों सीखें React JS?

• Freelancing और Job में high demand
• Real-world apps बनाना आसान
• SEO Friendly + Fast UI
• Big Community Support
• Live Projects और Product development की skill आती है

📚 Conclusion:

📘 Library vs Framework Explained (Hindi)

import React from 'react';
                  function App() {
                    return <h1>Hello, World!</h1>;
                  }
               

@Component({
                    selector: 'app-root',
                    templateUrl: './app.component.html'
                  })
                  export class AppComponent {
                    title = 'MyApp';
                  }
               

React JSX (JavaScript XML)

What is JSX?

JSX stands for JavaScript XML.

It allows us to write HTML-like code inside JavaScript.

JSX makes it easier to write and add HTML in React applications.

Example of JSX

Why use JSX?

• It is easy to understand and write.
• It combines the power of JavaScript with HTML-like syntax.
• It helps in building UI faster and in a readable way.
• JSX is converted into pure JavaScript by React (using Babel).

Rules of JSX

• There must be only one parent element.
• Use className instead of class.
• JavaScript expressions are written inside {}.
• All tags must be properly closed (self-closing).

JSX ka full form hai JavaScript XML. Ye ek special syntax hai jisme hum JavaScript ke andar HTML jaisa code likh sakte hain.

1. JSX kyun use karte hain?

• Code readable aur HTML ke jaisa dikhai deta hai.
• JavaScript ki power aur HTML ka structure ek sath use kar sakte hain.
• Babel compiler JSX ko normal JavaScript me convert kar deta hai.

2. JSX Example (Hello World)

function App() {
                 return (
                   <div>
                     <h1>Hello World 👋</h1>
                     <p>This is JSX in React</p>
                   </div>
                 );
               }
            export default App;

3. JSX me JavaScript ka use

Curly braces { } ke andar JavaScript expressions likh sakte ho.

const name = "Praveen";
               const age = 22;
               function App() {
                 return (
                   <div>
                     <h2>Hello, {name}!</h2>
                     <p>Your age is {age}</p>
                     <p>2 + 2 = {2 + 2}</p>
                   </div>
                 );
            }

4. JSX ke Rules

• Ek component sirf ek hi parent element return karega
• Attributes me class ki jagah className likhna padta hai.
• Inline style ek object ke roop me likhte hain (camelCase properties ke sath).
• Self-closing tags compulsory hote hain (e.g. <img />).
• React me properties camelCase me hoti hain (backgroundColor, borderRadius).
• Values hamesha string honi chahiye ("20px", "solid red", "center").
• Numbers (without units) directly bhi de sakte ho (jaise lineHeight: 1.5).

function App() {
                 return (
                   <div className="container" style={{color:"blue", fontSize:"20px"}}>
                     <h1>Welcome to JSX</h1>
                     <img src="logo.png" alt="logo" />
                   </div>
                 );
            }

5. JSX ke Fayde

• Readable aur easy to write.
• JavaScript ke variables aur functions directly use kar sakte ho.
• Complex UI ko chhote-chhote components me todne me easy.

React Components

What is a Component?

A Component is a small, reusable piece of code that represents a part of the User Interface (UI).

Components make it easier to build and maintain large applications by breaking the UI into smaller parts.

Types of Components

• Functional Components (Most commonly used, simple to create)
• Class Components (Older style, less used after React Hooks)

1. Functional Component Example

            function Welcome() {
              return 
Hello, Students 👋
;
            }
            export default Welcome;
         

2. Using the Component in App.js

            import Welcome from "./Welcome";
            function App() {
              return (
                

                     
                
              );
            }
            export default App;
         

3. Class Component Example (Old Style)

            import React, { Component } from "react";
            class Welcome extends Component {
              render() {
                return 
Hello, Students 👋 (Class Component)
;
              }
            }
            export default Welcome;
         

Why use Components?

• Reusability – Use the same component multiple times.
• Maintainability – Easier to manage large projects.
• Readability – Code is clean and organized.
• Separation of concerns – Each component handles its own logic and UI.

Project Structure

            my-react-app/
            │
            ├─ index.html
            ├─ main.jsx
            ├─ App.jsx
            ├─ Component/
            │   ├─ Volu.jsx
            │   └─ Pk.jsx
            └─ package.json
         

main.jsx

            
            // main.jsx
            // Entry point of React app
            import { StrictMode } from 'react';
            import { createRoot } from 'react-dom/client';
            import App from './App.jsx';
            // Grab the root div from index.html
            const rootElement = document.getElementById('root');
            const root = createRoot(rootElement);
            // Render the App component inside StrictMode
            root.render(
              <StrictMode>
                <App />
              </StrictMode>
            );
            
         

App.jsx

                
            
            // App.jsx
            // Main component that combines other components
            import Mr from './Component/Volu.jsx';
            import Add from './Component/Pk.jsx';
            function App() {
              return (
                <div>
                  <Add />   {/* Renders Add component */}
                  <Mr />    {/* Renders Mr (Wedding Invitation) component */}
                </div>
              );
            }
            export default App;
            
         

Component/Volu.jsx (Mr Component)

            
            // Volu.jsx
            // Wedding Invitation component
            function Mr() {
              return (
                <div style={{
                  border: "2px solid #ccc",
                  padding: "20px",
                  width: "400px",
                  fontFamily: "Arial, sans-serif",
                  margin: "20px auto"
                }}>
                  <h2 style={{ textAlign: "center", color: "#d6336c" }}>Wedding Invitation</h2>
                  <p style={{ textAlign: "center" }}>John Doe & Jane Smith</p>
                  <p style={{ textAlign: "center" }}>Date: October 10, 2025</p>
                  <p style={{ textAlign: "center" }}>Venue: Sunshine Banquet Hall, Patna</p>
                  <p style={{ textAlign: "center" }}>RSVP: 9430556829</p>
                </div>
              );
            }
            export default Mr;
            
         

Component/Pk.jsx (Add Component)

            
            // Pk.jsx
            // Simple component for demonstration
            function Add() {
              return (
                <div style={{
                  border: "2px solid #007bff",
                  padding: "10px",
                  width: "400px",
                  fontFamily: "Arial, sans-serif",
                  margin: "20px auto",
                  textAlign: "center",
                  color: "#007bff"
                }}>
                  <h3>Hello, Students!</h3>
                  <p>This is an example React component.</p>
                </div>
              );
            }
            export default Add;
            
         

React Props

Props का मतलब है Properties। यह एक तरीका है जिससे हम Parent Component से Child Component को data भेज सकते हैं।

Key Points:

• Props का इस्तेमाल data pass करने के लिए होता है।
• Props बिलकुल उसी तरह काम करते हैं जैसे function के parameters।
• Props read-only होते हैं (Child component इन्हें change नहीं कर सकता)।

Example:

// App.jsx
import Welcome from "./Welcome";
function App() {
  return (
    <div>
      <Student name="Praveen" age="22" />
      <Student name="Aman" age="21" />
    </div>
  );
}

// Welcome.jsx
function Student(props) {
  return (
    <h2>Hello, my name is {props.name} and I am {props.age} years old.</h2>
  );
}
export default App;

Output:

Hello, my name is Praveen and I am 22 years old.
Hello, my name is Aman and I am 21 years old.
  

Passing Multiple Properties (Props)

आप React में एक से ज्यादा properties (props) एक component को pass कर सकते हैं।
हर attribute automatically component में object की property बन जाता है।

Key Points:

• Props multiple values को support करते हैं।
• हर attribute props object में key-value pair के रूप में जाता है।
• Child component इन्हें access करता है props.propertyName से।

Example:

// Parent Component
function App() {
  return (
    <div>
      <Car brand="Ford" model="Mustang" color="Red" year="2024" />
    </div>
  );
}

// Child Component
function Car(props) {
  return (
    <h2>
      I have a {props.color} {props.brand} {props.model} from {props.year}.
    </h2>
  );
}

Output:

I have a Red Ford Mustang from 2024.
  

Props Destructuring

English: When we pass multiple props to a component, writing props.name, props.age again and again becomes lengthy. To make it shorter and cleaner, we use destructuring.

हिंदी: जब हम किसी component को multiple props pass करते हैं, तो बार-बार props.name, props.age लिखना लंबा हो जाता है। इसे आसान और readable बनाने के लिए हम destructuring का इस्तेमाल करते हैं।

Key Points:

• English: Destructuring allows us to extract values directly from props object.
• हिंदी: Destructuring की मदद से हम props object से values सीधे निकाल सकते हैं।
• English: It makes code shorter and more readable.
• हिंदी: यह code को छोटा और readable बनाता है।

Example Without Destructuring:

// Parent Component
function App() {
  return (
    <div>
      <Student name="Praveen" age="22" course="React" />
    </div>
  );
}

// Child Component
function Student(props) {
  return (
    <h2>
      My name is {props.name}, I am {props.age} years old and learning {props.course}.
    </h2>
  );
}

Example With Destructuring:

// Parent Component
function App() {
  return (
    <div>
      <Student name="Praveen" age="22" course="React" />
    </div>
  );
}

// Child Component (using destructuring)
function Student({ name, age, course }) {
  return (
    <h2>
      My name is {name}, I am {age} years old and learning {course}.
    </h2>
  );
}

Output:

My name is Praveen, I am 22 years old and learning React.
  

Props Children

English: In React, you can send the content between the opening and closing tags of a component to another component. This can be accessed in the other component using the props.children property.

हिंदी: React में, आप किसी component के opening और closing tags के बीच का content दूसरे component में भेज सकते हैं। इसे दूसरे component में props.children की मदद से access किया जा सकता है।

Key Points:

• English: props.children contains whatever content is placed between the component tags.
• हिंदी: props.children में वह content होता है जो component के tags के बीच रखा गया हो।
• English: Useful for wrapping or nesting content inside a reusable component.
• हिंदी: यह reusable component में content को wrap या nest करने के लिए बहुत useful है।

Example:

// Parent Component App.jsx

import Age from './Praveen.jsx';
import Date from './Pankaj.jsx';
import Card from './Card.jsx';

function App() {

  return (
    <>
        <Age time="26 jan"/>
        <Date />

        <Card>
          <h2>React में, आप किसी component के opening और closing tags के बीच का content दूसरे 
 component में भेज सकते हैं। इसे दूसरे component में props.children 
 की मदद से access किया जा सकता है।</h2>
        </Card>

    </>
  )
}

export default App;

// Child Component Card,jsx
function Card(props) {
  return (
    <div style={{ border: "2px solid blue", padding: "10px", margin: "10px" }}>
      {props.children}  // Accessing children content
    </div>
  );
}

export default Card;

Output:

React में, आप किसी component के opening और closing tags के बीच 
 का content दूसरे component में भेज सकते हैं। इसे दूसरे
  component में props.children की मदद से access किया जा सकता है।
// Accessing children content
  

What is State?

1️ 👉 React में State manage करने के लिए सबसे ज्यादा useState hook use होता है।

• State is dynamic data storage – component auto re-renders when state changes
• Always use useState hook in functional components
• Use spread operator for updating objects/arrays
• State is mostly used with events (button click, input change)
• Two-way binding is done using value and onChange
• State + Conditional Rendering = powerful UI updates

 // Counter.jsx
import { useState } from "react"; 
function Counter(){
const [count, setCount] = useState(0); // initial state = 0
   function increase(){
        setCount(count + 1);
    }

return(
    <div>
        <h1>counter {count}</h1>
        <button onClick={increase}>increase</button>
    </div>
)

}

export default Counter;



Explanation

count = current state value

setCount = function to update state

useState(0) = initial value of state is 0

<h2>Count: {count}</h2>
<button onClick={increase}>Increase</button>

          
         // Multiplestate.jsx
         import { useState } from "react";
         function UserInfo() {
         const [name, setName] = useState("Praveen");
         const [age, setAge] = useState(22);
         return (
         <div>
         <h>Name: {name}</h>
         <h>Age: {age}</h>
         <button onClick={() => setAge(age + 1)}<Increase Age</button>
         </div>
         )
         }
         export default UserInfo;
         
      

React Conditional Rendering

1️⃣ Using if/else Statement

   // PAGE NAME : Ifcondition.jsx
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  } else {
    return <h2>Please log in.</h2>;
  }
}

export default Greeting;



// PAGE NAME : App.jsx

import Ifcondition from './Ifcondition.jsx';
function App() {
  return (

 <ButtonExample />


        <Ifcondition isLoggedIn ={true} />


  )
}

export default App
 

Explanation:

• हिंदी: अगर isLoggedIn = true → "Welcome back!" दिखेगा।
• हिंदी: अगर isLoggedIn = false → "Please log in." दिखेगा।

2️⃣ Using Ternary Operator

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    </div>
  );
}

export default Greeting;

Explanation:

• English: Shorter syntax using condition ? trueJSX : falseJSX.
• हिंदी: यही काम ternary operator से कम code में किया जा सकता है।

3️⃣ Using Logical AND (&&)

function Message(props) {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn && <h2>Welcome back!</h2>}
    </div>
  );
}

export default Message;

Explanation:

• हिंदी: अगर isLoggedIn = true → JSX render होगा।
• हिंदी: अगर isLoggedIn = false → कुछ नहीं दिखेगा।

Summary / Notes

• English: Conditional Rendering allows dynamic UI based on data or state.
• English: Common methods: if/else, ternary operator, logical &&.
• English: Often combined with state for interactive apps like login/logout, counters, forms.

React Lists

1️⃣ Basic Example

function NameList() {
  const names = ["Praveen", "Pankaj", "Neha"];

  return (
    <ul>
      {names.map((name) => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

export default NameList;

Explanation:

• हिंदी: Array names के हर item को map() function से list item (<li>) में बदला।
• English: Each element in the array is converted into a list element using map().

React Forms – Handling Checkbox (Checkbox क्या होता है?)

1️⃣ Basic Example

import { useState } from "react";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  function handleChange(event) {
    setIsChecked(event.target.checked); // ✅ checkbox 'checked' से value आती है
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert("Checkbox is " + (isChecked ? "Checked ✅" : "Not Checked ❌"));
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleChange} />
        I agree to the Terms & Conditions
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default CheckboxExample;

Step-by-Step Explanation:

• Checkbox की initial value false रखी गई (means unchecked).
• English: Starts unchecked by default.

• setIsChecked(event.target.checked);

• <input type="checkbox" checked={isChecked} onChange={handleChange} />

• Form submit पर page reload रोकते हैं (event.preventDefault()).
• Alert में current state दिखाते हैं।

• Checkbox tick करने पर alert आएगा → ✅ Checked
• Untick करने पर alert आएगा → ❌ Not Checked

2️⃣ Multiple Checkboxes Example

import { useState } from "react";

function MultipleCheckbox() {
  const [hobbies, setHobbies] = useState({
    cricket: false,
    music: false,
    reading: false
  });

  function handleChange(event) {
    const { name, checked } = event.target;
    setHobbies({ ...hobbies, [name]: checked });
  }

  function handleSubmit(event) {
    event.preventDefault();
    const selected = Object.keys(hobbies).filter(hobby => hobbies[hobby]);
    alert("Selected hobbies: " + (selected.length ? selected.join(", ") : "None"));
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input type="checkbox" name="cricket" checked={hobbies.cricket} onChange={handleChange} /> Cricket
      </label><br/>
      <label>
        <input type="checkbox" name="music" checked={hobbies.music} onChange={handleChange} /> Music
      </label><br/>
      <label>
        <input type="checkbox" name="reading" checked={hobbies.reading} onChange={handleChange} /> Reading
      </label><br/>

      <button type="submit">Submit</button>
    </form>
  );
}

export default MultipleCheckbox;

Step-by-Step Explanation:

• const [hobbies, setHobbies] = useState({ cricket: false, music: false, reading: false });
• हर checkbox के लिए एक key रखी गई।
• Initially सब false (unchecked)।

• const { name, checked } = event.target;
• setHobbies({ ...hobbies, [name]: checked });
• जब कोई checkbox बदले → उसी name की value update कर दो।

• const selected = Object.keys(hobbies).filter(hobby => hobbies[hobby]);
• Object से वो hobbies निकालते हैं जो true हैं।
• फिर alert में दिखाते हैं।

• अगर user ने “Cricket” और “Reading” tick किया →
• Alert: Selected hobbies: Cricket, Reading

3️⃣ Key Notes

4️⃣ Summary

• Checkbox में checked attribute जरूरी है।
• event.target.checked से true/false value मिलती है।
• Multiple checkboxes को object या array से manage करते हैं।
• React में हर checkbox भी एक controlled component होता है।

React Forms – Handling Radio Buttons (Radio Button क्या होता है?)

1️⃣ Basic Example

import { useState } from "react";

function RadioExample() {
  const [gender, setGender] = useState("");

  function handleChange(event) {
    setGender(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert("Selected Gender: " + (gender || "None"));
  }

  return (
    <form onSubmit={handleSubmit}>
      <h3>Select Gender:</h3>
      <label>
        <input
          type="radio"
          name="gender"
          value="Male"
          checked={gender === "Male"}
          onChange={handleChange}
        />
        Male
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="gender"
          value="Female"
          checked={gender === "Female"}
          onChange={handleChange}
        />
        Female
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="gender"
          value="Other"
          checked={gender === "Other"}
          onChange={handleChange}
        />
        Other
      </label>
      <br /><br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default RadioExample;

Step-by-Step Explanation:

• हमने gender नाम की state बनाई जिसकी initial value खाली string "" रखी।
• English: Holds selected gender value (initially empty).

• जब कोई radio button select होता है, event.target.value में उसका value आता है।
• setGender(event.target.value) से selected option update कर देते हैं।

• हर radio में checked={gender === "Male"} जैसा condition दिया गया है।
• React इसी से decide करता है कौन सा option selected है।

• Form submit पर page reload रोकते हैं (event.preventDefault()).
• Alert में selected gender दिखाते हैं।

• अगर user ने "Female" चुना → Alert: Selected Gender: Female
• अगर कुछ नहीं चुना → Alert: Selected Gender: None

2️⃣ Key Notes

3️⃣ Summary

• Radio button में name attribute सभी के लिए एक जैसा होना चाहिए।
• हर option की value अलग होनी चाहिए।
• React में radio भी एक controlled component है।
• checked और onChange से control करते हैं कि कौन सा option चुना गया है।

React Portals (React Portal क्या होता है?)

1️⃣ Why Use Portals?

• जब आपको Modal, Popup, Tooltip या Dialog box बनाना होता है जो page layout से अलग दिखे।
• Normal component tree में render करने से z-index या CSS layering समस्या आ सकती है।
• Portals इस problem को solve करते हैं — component को root DOM के किसी और part में render करके।

2️⃣ Example: Simple Modal Using React Portal

import ReactDOM from "react-dom";

function Modal({ children }) {
  // Modal को id="modal-root" वाले div में render करेंगे
  return ReactDOM.createPortal(
    <div style={{
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      background: "white",
      padding: "20px",
      border: "2px solid black",
      boxShadow: "0 0 10px rgba(0,0,0,0.3)"
    }}>
      {children}
    </div>,
    document.getElementById("modal-root")
  );
}

export default Modal;

3️⃣ App.jsx Example

import { useState } from "react";
import Modal from "./Modal.jsx";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <h1>React Portal Example</h1>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      {isOpen && (
        <Modal>
          <h2>Hello from the Portal! 👋</h2>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </Modal>
      )}
    </>
  );
}

export default App;

4️⃣ index.html (Important)

Portals को काम करने के लिए, index.html में एक extra div चाहिए:

<div id="root"></div>
<div id="modal-root"></div>  <!-- Modal यही render होगा -->

5️⃣ Step-by-Step Explanation

• Modal Component: ReactDOM.createPortal() से component को दूसरे DOM node (modal-root) में render किया गया।
• App Component: State (isOpen) से decide होता है कि Modal दिखाना है या नहीं।
• Modal Rendering: जब isOpen=true, Modal दिखाई देता है और उसका content modal-root में जाता है।
• Close Button: setIsOpen(false) करने पर Modal गायब हो जाता है।

6️⃣ Result

• “Open Modal” पर click करते ही एक popup box (Modal) खुलेगा।
• Modal component main App से बाहर (modal-root div में) render होता है।
• “Close” दबाने पर Modal बंद हो जाएगा।

7️⃣ Key Points

8️⃣ Summary

• React Portal = Render content outside normal parent DOM hierarchy.
• Modal या popup बनाते समय बहुत काम आता है।
• Beginners के लिए optional है, लेकिन समझना अच्छा रहेगा।

React Suspense (React Suspense क्या है?)

1️⃣ Basic Example: Lazy Loading Component

import { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./Suspence.jsx'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

  

2️⃣ LazyComponent.jsx

function LazyComponent() {
  return <h2>Hello! I am loaded lazily. 🎉</h2>;
}

export default LazyComponent;
  

3️⃣ Step-by-Step Explanation

• React.lazy() – Component को lazy load करने के लिए। (Dynamically imports component)
• Suspense Component – Lazy component के आस-पास wrap करें। (Wraps lazy component and shows fallback UI)
• fallback prop – Loading state में क्या दिखाना है। (What to render while the component is loading)
• Benefits – Initial bundle छोटा होता है → fast load; Users को loading feedback मिलता है। (Smaller initial bundle, better user experience)

4️⃣ Key Points

5️⃣ Summary

• React Suspense = Lazy loading + Async handling
• <Suspense> + fallback → smooth loading UI
• Beginners के लिए optional, लेकिन बड़े apps में बहुत जरूरी

Styling React Using CSS (React में CSS Styling)

1️⃣ Inline Styling

Hindi: Inline style attribute में styling करने के लिए value हमेशा JavaScript object होती है।

English: Inline styles require a JavaScript object as the value.

Example 1: Simple Inline Style

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}
  

Note: JSX में JavaScript expressions curly braces {} में लिखते हैं। चूँकि style के लिए object भी curly braces use करता है, इसलिए double curly braces {{}} होते हैं।

Example 2: camelCased Property Names

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}
  

• Hindi: CSS property names में hyphen (-) नहीं, camelCase use करें।
• English: Use camelCase for CSS properties in JS objects (e.g., backgroundColor instead of background-color).

Example 3: JavaScript Object

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}
  

• Hindi: Styling object बनाकर style attribute में reference किया।
• English: Create a JS object with styles and pass it to style attribute.

2️⃣ CSS Stylesheet

Hindi: CSS को अलग .css file में लिखें और component में import करें।

English: Write CSS in a separate .css file and import it in your component.

Example:

/* MyStylesheet.css */
body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

/* index.js */
import { createRoot } from 'react-dom/client';
import './MyStylesheet.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Header />
);
  

• Hindi: Imported stylesheet केवल उस component तक ही लागू होगी।
• English: The imported CSS will only affect the component that imported it.

3️⃣ CSS Modules

Hindi: Components के लिए local scope styling। Name conflicts से बचाता है।

English: Provides local scoped styling for components, preventing name conflicts.

Example:

/* my-style.module.css */
.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

/* index.jsx */
import { createRoot } from 'react-dom/client';
import styles from './my-style.module.css'; 
  
const Car = () => {
  return <h1 className={styles.bigred}>Hello Car!</h1>;
}
  
createRoot(document.getElementById('root')).render(
  <Car />
);
  

• Hindi: Module import करके, local scoped class apply की।
• English: Import the CSS module and use its className for local scoped styling.

4️⃣ Key Points

5️⃣ Summary

• React में CSS use करके UI को customize कर सकते हैं।
• Inline CSS → Quick, small styling.
• CSS Stylesheet → Traditional, easy to maintain.
• CSS Modules → Best for big projects, local scope, no name conflicts.

React CSS Modules (React में CSS Modules)

1️⃣ Create a CSS Module File

CSS Module file का नाम हमेशा *.module.css होना चाहिए।

/* my-style.module.css */
.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}
  

2️⃣ Import CSS Module in Component

import styles from './my-style.module.css';

const Car = () => {
  return <h1 className={styles.bigred}>Hello Car!</h1>;
}

export default Car;
  

• Hindi: import करने के बाद, className={styles.className} use करें।
• English: After importing, apply styles using className={styles.className}.

3️⃣ Key Features of CSS Modules

4️⃣ Step-by-Step Explanation

• Create a *.module.css file with your styles.
• Import the module in your component using import styles from './file.module.css'.
• Apply class using className={styles.className}.
• React automatically generates unique class names to prevent conflicts.

5️⃣ Summary

• CSS Modules are best for large React projects.
• They provide local scoped styling.
• Helps avoid class name conflicts and improves maintainability.
• Works seamlessly with React functional and class components.

React CSS-in-JS (React में CSS-in-JS)

1️⃣ Example using Inline Styles (Basic CSS-in-JS)

const Header = () => {
  const style = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    borderRadius: "5px",
    textAlign: "center"
  };

  return <h1 style={style}>Hello CSS-in-JS!</h1>;
}
  

• Hindi: Styling object बनाकर JSX element के style attribute में pass किया।
• English: Created a JS object with styles and passed it to the JSX element’s style attribute.

2️⃣ Example using styled-components

import styled from 'styled-components';

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

  &:hover {
    background-color: #ff8a00;
  }
`;

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

export default App;
  

• Hindi: styled-components library का use करके component level styling की।
• English: Used styled-components library to create styled React components.

3️⃣ Key Features of CSS-in-JS

4️⃣ Step-by-Step Explanation

• Create a JS object or use styled-components to define styles.
• Apply styles directly to JSX elements or create styled components.
• Props and state can dynamically modify the styles.
• CSS-in-JS ensures local scope and avoids global class conflicts.

5️⃣ Summary

• CSS-in-JS combines JavaScript and CSS for easier component styling.
• Popular approaches: Inline style objects, styled-components, emotion, JSS.
• Dynamic styling, scoped styles, and no extra CSS files are the main benefits.
• Ideal for modern React projects with component-based architecture.

React Router (React में Routing)

1️⃣ Why React Router?

• हिंदी: Routing मतलब अलग-अलग views के बीच navigation handle करना।
• English: Routing means handling navigation between different views.
• React Router enables:
• Create multiple pages in a single-page app
• Handle URL parameters & query strings
• Manage browser history & navigation
• Create nested routes & layouts
• Implement protected routes for authentication

2️⃣ Installation

npm install react-router-dom

3️⃣ Basic Setup

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() { return <h1>Home Page</h1>; }
function About() { return <h1>About Page</h1>; }
function Contact() { return <h1>Contact Page</h1>; }

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/about" element=<About /> />
        <Route path="/contact" element=<Contact /> />
      </Routes>
    </BrowserRouter>
  );
}
export default App;
  

4️⃣ Step-by-Step Explanation

• BrowserRouter: App को wrap करता है और SPA में routing enable करता है।
• Routes: सभी Route components को container करता है।
• Route: URL path और component mapping define करता है।
• Link: Navigation links बनाता है बिना page reload किए।

5️⃣ Nested Routes

आप Route के अंदर child Route define कर सकते हैं। इससे pages के अंदर sub-pages manage करना आसान होता है।

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function Products() {
  return (
    <div>
      <h1>Products</h1>
      <nav>
        <Link to="car">Cars</Link> |{" "}
        <Link to="bike">Bikes</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function CarProducts() { return <h2>Cars</h2>; }
function BikeProducts() { return <h2>Bikes</h2>; }

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/products" element=<Products />>
          <Route path="car" element=<CarProducts /> />
          <Route path="bike" element=<BikeProducts /> />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
  

• Outlet: Child routes को render करने के लिए placeholder।
• URL "/products/car" → CarProducts render होगा।
• URL "/products/bike" → BikeProducts render होगा।

6️⃣ Active Links (NavLink)

NavLink component active state detect करता है और style बदल सकता है।

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

const navLinkStyles = ({ isActive }) => ({
  color: isActive ? '#007bff' : '#333',
  fontWeight: isActive ? 'bold' : 'normal'
});

<NavLink to="/about" style={navLinkStyles}>About</NavLink>
  

7️⃣ URL Parameters

Dynamic routes के लिए URL parameters use किए जाते हैं ताकि different values pass की जा सकें।

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

function Info() {
  const { firstname } = useParams();
  return <h1>Hello, {firstname}!</h1>;
}

<Route path="/customer/:firstname" element=<Info /> />
  

• Visit /customer/Emil → Hello, Emil
• Visit /customer/Tobias → Hello, Tobias

8️⃣ Summary

• React Router SPA में multiple views और navigation enable करता है।
• BrowserRouter, Routes, Route, Link/NavLink main components हैं।
• Supports nested routes, dynamic URL parameters, and active link styling.
• Essential for medium to large React applications.

React Hooks (React में Hooks)

1️⃣ What Are Hooks?

• React Hooks को React 16.8 में introduce किया गया।
• ये आपको class components लिखे बिना state और lifecycle features use करने देते हैं।
• Hooks हमेशा function components के अंदर use होते हैं।

2️⃣ Why Use Hooks?

• Class components की complexity से बचने के लिए।
• Code को छोटा और readable बनाने के लिए।
• State, context, side-effects को function components में use करने के लिए।

3️⃣ Commonly Used React Hooks

• useState → Manage component state
• useEffect → Handle side effects (e.g., API calls, timers)
• useContext → Access global context data
• useRef → Access or modify DOM elements
• useMemo → Optimize performance (memoization)
• useCallback → Prevent unnecessary re-renders

4️⃣ useState Hook

useState component के अंदर data (state) store करने के लिए use होता है।

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}
export default Counter;
  

• useState(0) → count की initial value 0 set करता है।
• setCount() → State को update करता है।
• Every update causes component re-render.

5️⃣ useEffect Hook

useEffect side-effects (जैसे API calls, timers, DOM updates) handle करने के लिए use होता है।

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}
  

• Runs after every render (by default).
• If dependency array [count] दी है → सिर्फ count change होने पर चलेगा।

6️⃣ useContext Hook

Global data share करने के लिए useContext hook use होता है।

import { createContext, useContext } from 'react';

const UserContext = createContext();

function User() {
  const user = useContext(UserContext);
  return <h1>Hello, {user}!</h1>;
}

function App() {
  return (
    <UserContext.Provider value="Praveen">
      <User />
    </UserContext.Provider>
  );
}
  

7️⃣ useRef Hook

DOM elements को directly access करने के लिए use होता है।

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
  

8️⃣ useMemo Hook

Expensive calculations को optimize करने के लिए useMemo use होता है।

import { useMemo, useState } from 'react';

function Calculate() {
  const [num, setNum] = useState(0);
  const expensiveCalc = useMemo(() => {
    console.log("Calculating...");
    return num * 10;
  }, [num]);

  return (
    <div>
      <input type="number" onChange={(e) => setNum(Number(e.target.value))} />
      <h2>Result: {expensiveCalc}</h2>
    </div>
  );
}
  

9️⃣ useCallback Hook

useCallback functions को memoize करता है ताकि unnecessary re-render न हो।

import { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
  

🔟 Rules of Hooks

• Hooks हमेशा function component या custom hook के top level पर call करो।
• Hooks को loops, conditions या nested functions के अंदर मत call करो।
• Hooks सिर्फ React functions (या custom hooks) में use करो, normal JS में नहीं।

✅ Summary

• Hooks से class components की ज़रूरत खत्म हो गई।
• useState और useEffect सबसे common hooks हैं।
• Custom hooks से reusability और modularity बढ़ती है।