1. React.js Kya Hai? JSX aur Components Samjhe – Beginner Guide 2026

// Vanilla JS (without React)
let count = 0;
const button = document.getElementById("btn");
const display = document.getElementById("display");

button.addEventListener("click", () => {
  count++;
  display.innerText = count; // Manual DOM manipulation
});

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

// React without JSX – very messy
const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Hello World'),
  React.createElement('p', null, 'This is React')
);

// React with JSX – beautiful!
const element = (
  <div className="container">
    <h1>Hello World</h1>
    <p>This is React</p>
  </div>
);

// ✅ Correct
const name = "Rahul";
const element = <h1>Hello, {name}</h1>;

// ❌ Wrong – JavaScript expressions ka use karo, statements nahi
// const element = <h1>{if(true){ "Hello" }}</h1>; 

// ✅ Multiple lines – wrap in parentheses
const element = (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

// ✅ className use karo, class nahi (kyuki class is JavaScript keyword)
const element = <div className="my-class">Hello</div>;

// ✅ Self-closing tags
const image = <img src="photo.jpg" alt="description" />;

// ✅ Inline styles – double curly braces
const style = <div style={{ color: 'red', fontSize: '20px' }}>Styled</div>;

// Simple functional component
function Welcome() {
  return <h1>Welcome to React!</h1>;
}

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

// Arrow function syntax
const Button = () => {
  return <button>Click Me</button>;
};

// Export karna
export default Welcome;

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

export default Welcome;

// App.js (Parent component)
import Welcome from './Welcome';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Welcome />
      <Greeting name="Rahul" />
      <Greeting name="Priya" />
      <Greeting name="Amit" />
    </div>
  );
}

// ✅ Functional (Modern)
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ❌ Class (Old - avoid in new projects)
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

// Parent Component
function App() {
  return (
    <div>
      <UserCard 
        name="Rahul Sharma" 
        age={25} 
        city="Mumbai"
        isActive={true}
      />
    </div>
  );
}

// Child Component – props receive karta hai
function UserCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>City: {props.city}</p>
      <p>Status: {props.isActive ? "Active" : "Inactive"}</p>
    </div>
  );
}

// Destructuring – cleaner way
function UserCard({ name, age, city, isActive }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>City: {city}</p>
      <p>Status: {isActive ? "Active" : "Inactive"}</p>
    </div>
  );
}

// ✅ Props are READ-ONLY – modify nahi kar sakte
function BadComponent(props) {
  // props.name = "New Name"; // ❌ ERROR – cannot modify props
  return <h1>{props.name}</h1>;
}

// ✅ Data flow – parent to child (one-way)
// App -> UserCard -> UserInfo -> UserAvatar

import { useState } from 'react';

function Counter() {
  // Syntax: const [value, setValue] = useState(initialValue);
  const [count, setCount] = useState(0);     // count = 0, setCount function
  const [name, setName] = useState("");       // string state
  const [user, setUser] = useState(null);     // object/array state
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <p>Hello, {name || "Guest"}!</p>
    </div>
  );
}

function UserForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  
  // Update object – spread operator use karo
  const updateName = (name) => {
    setForm({ ...form, name });
  };
  
  const [items, setItems] = useState([]);
  
  // Add to array
  const addItem = (item) => {
    setItems([...items, item]);
  };
  
  return (
    <div>
      <input 
        value={form.name}
        onChange={(e) => updateName(e.target.value)}
      />
      <button onClick={() => addItem("New Item")}>Add</button>
    </div>
  );
}

# Terminal mein ye command run karo
npm create vite@latest my-first-app -- --template react

# Project folder mein jao
cd my-first-app

# Dependencies install karo
npm install

# App start karo
npm run dev

my-first-app/
├── src/
│   ├── App.jsx      # Main component
│   ├── main.jsx     # Entry point
│   └── index.css    # Global styles
├── index.html
└── package.json

// src/App.jsx
import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="app">
      <h1>Namaste React! 🙏</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click Me
      </button>
    </div>
  );
}

export default App;

// src/components/Header.jsx
function Header() {
  return (
    <header>
      <h1>My React App</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>
  );
}

export default Header;

// src/App.jsx
import Header from './components/Header';

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Welcome to React!</h2>
      </main>
    </div>
  );
}

import { useState } from 'react';

function CounterApp() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  
  const increment = () => setCount(count + step);
  const decrement = () => setCount(count - step);
  const reset = () => setCount(0);
  
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>Counter App</h1>
      
      <div style={{ fontSize: '48px', margin: '20px' }}>
        {count}
      </div>
      
      <div>
        <button onClick={decrement} style={buttonStyle}>-</button>
        <button onClick={reset} style={{...buttonStyle, background: 'gray'}}>
          Reset
        </button>
        <button onClick={increment} style={buttonStyle}>+</button>
      </div>
      
      <div style={{ marginTop: '20px' }}>
        <label>Step Size: </label>
        <input 
          type="number"
          value={step}
          onChange={(e) => setStep(Number(e.target.value))}
          min="1"
        />
      </div>
      
      <p>Click step: {step} | Total clicks: {count / step}</p>
    </div>
  );
}

const buttonStyle = {
  fontSize: '24px',
  padding: '10px 20px',
  margin: '5px',
  background: '#007bff',
  color: 'white',
  border: 'none',
  borderRadius: '5px',
  cursor: 'pointer'
};

export default CounterApp;

// ❌ Wrong
<div class="container">Hello</div>

// ✅ Correct
<div className="container">Hello</div>

// ❌ Wrong – React won't re-render
const [count, setCount] = useState(0);
count = 5; // No re-render

// ✅ Correct – use setter function
setCount(5);

// ❌ Wrong – not using component
function App() {
  return (
    <div>
      Header  // Just text, not component
    </div>
  );
}

// ✅ Correct
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

// ❌ Warning: Each child should have unique key
{items.map(item => <li>{item}</li>)}

// ✅ Correct
{items.map(item => <li key={item.id}>{item.name}</li>)}