// Example: How Virtual DOM works
// 1. Initial state
const element = <div>Hello World</div>;

// 2. State changes
const newElement = <div>Hello React</div>;

// 3. React compares virtual DOM trees
// 4. Only updates the changed text node in real DOM

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

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

import React, { useState, useEffect } from 'react';

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

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

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

// JSX
const element = <h1 className="title">Hello World</h1>;

// Equivalent JavaScript
const element = React.createElement(
  'h1',
  {className: 'title'},
  'Hello World'
);

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  return (
    <div>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

// Parent Component
function App() {
  return (
    <UserCard 
      name="John Doe" 
      email="john@example.com"
      age={30}
    />
  );
}

// Child Component
function UserCard({ name, email, age }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Email: {email}</p>
      <p>Age: {age}</p>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Side effect: API call
    fetch('/api/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
        setLoading(false);
      });

    // Cleanup function (optional)
    return () => {
      // Cleanup code here
    };
  }, []); // Empty dependency array means run once

  if (loading) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

// Controlled Component
function ControlledForm() {
  const [value, setValue] = useState('');
  
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// Uncontrolled Component
function UncontrolledForm() {
  const inputRef = useRef(null);
  
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  
  return (
    <input ref={inputRef} defaultValue="Default" />
  );
}

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}