ETE Practice Questions

// rawData.js
const employees = [
  { id: 1, name: 'Alice', department: 'Engineering', salary: 5000, active: true },
  { id: 2, name: 'Bob', department: 'HR', salary: 4000, active: true },
  { id: 3, name: 'Charlie', department: 'Engineering', salary: 5500, active: false },
  { id: 4, name: 'David', department: 'Engineering', salary: 4800, active: true },
];

// Solution Script
const processPayroll = (data) => {
  // A. Filter active employees
  const activeEmployees = data.filter(emp => emp.active);

  // B. Map to update salary for Engineering (Immutable approach)
  const updatedSalaries = activeEmployees.map(emp => {
    if (emp.department === 'Engineering') {
      // Using spread operator to create new object copy
      return { ...emp, salary: emp.salary * 1.10 };
    }
    return emp;
  });

  // C. Reduce to get total cost of ONLY active Engineers
  const totalEngineeringCost = updatedSalaries
    .filter(emp => emp.department === 'Engineering')
    .reduce((acc, curr) => acc + curr.salary, 0);

  // D. Spread operator for deep copy (simplified level)
  const finalReport = [...updatedSalaries];

  console.log("Updated List:", finalReport);
  console.log("Total Engineering Cost:", totalEngineeringCost);
};

processPayroll(employees);

import React from 'react';

// A. JSX Implementation
const ProfileJSX = ({ name, job }) => {
  return (
    <div className="card">
      <h1>{name}</h1>
      <h3>{job}</h3>
      <button onClick={() => alert(`Hello ${name}`)}>Contact Me</button>
    </div>
  );
};

// B. React.createElement Implementation
const ProfileRaw = ({ name, job }) => {
  return React.createElement(
    'div',
    { className: 'card' },
    React.createElement('h1', null, name),
    React.createElement('h3', null, job),
    React.createElement(
      'button',
      { onClick: () => alert(`Hello ${name}`) },
      'Contact Me'
    )
  );
};

// D. Parent Component
export default function App() {
  return (
    <div>
      <h2>JSX Version:</h2>
      <ProfileJSX name="John Doe" job="Developer" />
      <hr />
      <h2>createElement Version:</h2>
      <ProfileRaw name="Jane Doe" job="Designer" />
    </div>
  );
}

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

// A. Class Component Implementation
class ProductCardClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qty: 0
    };
  }

  handleBuy = () => {
    this.setState({ qty: this.state.qty + 1 });
  };

  render() {
    const { productName, price } = this.props;
    return (
      <div style={{ border: '1px solid black', padding: '10px', margin: '10px' }}>
        <h3>{productName} (Class)</h3>
        <p>Price: ${price}</p>
        <p>Quantity: {this.state.qty}</p>
        <button onClick={this.handleBuy}>Buy</button>
      </div>
    );
  }
}

// B. Functional Component Implementation
const ProductCardFunc = ({ productName, price }) => {
  // Using useState hook
  const [qty, setQty] = useState(0);

  const handleBuy = () => {
    setQty(prevQty => prevQty + 1);
  };

  return (
    <div style={{ border: '1px solid blue', padding: '10px', margin: '10px' }}>
      <h3>{productName} (Func)</h3>
      <p>Price: ${price}</p>
      <p>Quantity: {qty}</p>
      <button onClick={handleBuy}>Buy</button>
    </div>
  );
};

export { ProductCardClass, ProductCardFunc };

// Widget.module.css (Assume this file exists)
/*
.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  padding: 20px;
}
*/

import React from 'react';
import styles from './Widget.module.css'; // Importing CSS Module

export default function Dashboard() {
  // A. Inline Styling
  const inlineStyle = {
    backgroundColor: '#f0f0f0',
    color: 'blue',
    padding: '20px',
    marginBottom: '10px'
  };

  return (
    <div>
      {/* Widget 1: Inline */}
      <div style={inlineStyle}>
        <h2>Inline Widget</h2>
        <p>This is styled using a JS object.</p>
      </div>

      {/* Widget 2: CSS Modules */}
      <div className={styles.card}>
        <h2>Module Widget</h2>
        <p>This is styled using CSS Modules to scope styles locally.</p>
      </div>

      {/* Widget 3: TailwindCSS */}
      <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
        <h2 className="text-xl font-medium text-black">Tailwind Widget</h2>
        <button className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
          Click Me
        </button>
      </div>
    </div>
  );
}

import React, { Component } from 'react';

class DigitalClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date()
    };
    this.timerID = null;
  }

  // B. Setup interval on mount
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.tick();
    }, 1000);
    console.log('Clock Mounted');
  }

  // C. Log on update
  componentDidUpdate(prevProps, prevState) {
    if (prevState.time !== this.state.time) {
       console.log('Tick');
    }
  }

  // D. Cleanup on unmount
  componentWillUnmount() {
    clearInterval(this.timerID);
    console.log('Clock Unmounted - Timer Cleared');
  }

  tick() {
    this.setState({
      time: new Date()
    });
  }

  render() {
    return (
      <div>
        <h2>Current Time:</h2>
        {/* E. Render formatted time */}
        <h1>{this.state.time.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

export default DigitalClock;

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

const DocumentTitleUpdater = () => {
  // A. useState for counter
  const [count, setCount] = useState(0);

  // C. & D. useEffect for side effect (updating document title)
  useEffect(() => {
    document.title = `Count: ${count}`;
    console.log("Title Updated");

    // Optional cleanup (not strictly asked but good practice)
    return () => {
      document.title = "React App"; 
    };
  }, [count]); // Dependency array ensures this runs only when 'count' changes

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter Value: {count}</h1>
      {/* B. Buttons */}
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
      <button onClick={() => setCount(prev => prev - 1)}>Decrement</button>
    </div>
  );
};

export default DocumentTitleUpdater;

import React, { useReducer } from 'react';

// A. Initial State
const initialState = {
  cart: [],
  total: 0
};

// B. & C. Reducer Function
const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        cart: [...state.cart, action.payload],
        total: state.total + action.payload.price
      };
    case 'CLEAR_CART':
      return initialState;
    default:
      return state;
  }
};

const ShoppingCart = () => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  const addItem = () => {
    const newItem = { id: Date.now(), name: 'Product', price: 100 };
    dispatch({ type: 'ADD_ITEM', payload: newItem });
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <p>Items in cart: {state.cart.length}</p>
      <p>Total Price: ${state.total}</p>
      
      {/* D. Buttons dispatching actions */}
      <button onClick={addItem}>Add Item ($100)</button>
      <button onClick={() => dispatch({ type: 'CLEAR_CART' })}>
        Clear Cart
      </button>

      <ul>
        {state.cart.map(item => (
          <li key={item.id}>{item.name} - ${item.price}</li>
        ))}
      </ul>
    </div>
  );
};

export default ShoppingCart;

import React, { createContext, useState, useContext } from 'react';

// A. Create Context
const ThemeContext = createContext();

// B. Create Provider
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// C. Consuming Component
const ThemedButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const styles = {
    backgroundColor: theme === 'light' ? '#fff' : '#333',
    color: theme === 'light' ? '#000' : '#fff',
    padding: '10px 20px',
    border: '1px solid gray',
    cursor: 'pointer'
  };

  return (
    <button style={styles} onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    </button>
  );
};

// D. Main App
export default function App() {
  return (
    <ThemeProvider>
      <div style={{ padding: '50px' }}>
        <h1>Context API Example</h1>
        <ThemedButton />
      </div>
    </ThemeProvider>
  );
}

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

// A. Child Component wrapped in React.memo
const ButtonComponent = React.memo(({ handleClick, label }) => {
  console.log(`Rendering button - ${label}`);
  return <button onClick={handleClick}>{label}</button>;
});

const OptimizationDemo = () => {
  const [age, setAge] = useState(25);
  const [salary, setSalary] = useState(50000);

  // D. useCallback ensures this function instance is preserved unless age changes
  const incrementAge = useCallback(() => {
    setAge((prev) => prev + 1);
  }, [age]);

  // useCallback ensures this function instance is preserved unless salary changes
  const incrementSalary = useCallback(() => {
    setSalary((prev) => prev + 1000);
  }, [salary]);

  return (
    <div>
      <h2>Age: {age}</h2>
      <h2>Salary: {salary}</h2>
      
      {/* Changing Age won't re-render Salary button and vice versa */}
      <ButtonComponent handleClick={incrementAge} label="Increment Age" />
      <ButtonComponent handleClick={incrementSalary} label="Increment Salary" />
    </div>
  );
};

export default OptimizationDemo;

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

// A. Custom Hook Definition
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // C. Re-run if URL changes

  // D. Return state object
  return { data, loading, error };
};

// E. Usage in Component
const UserList = () => {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data && data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

import React, { useState } from 'react';

const RegistrationForm = () => {
  // A. State for form data
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const [errors, setErrors] = useState({});

  // B. Handle Changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const validate = () => {
    let tempErrors = {};
    if (formData.username.length <= 3) tempErrors.username = "Username must be > 3 chars";
    if (formData.password.length <= 6) tempErrors.password = "Password must be > 6 chars";
    if (!formData.email.includes('@')) tempErrors.email = "Invalid Email";
    return tempErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // C. Validation Check
    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
    } else {
      setErrors({});
      // E. Success
      alert(JSON.stringify(formData));
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input name="username" placeholder="Username" onChange={handleChange} />
        {/* D. Display Errors */}
        {errors.username && <p style={{color:'red'}}>{errors.username}</p>}
      </div>
      <div>
        <input name="email" placeholder="Email" onChange={handleChange} />
        {errors.email && <p style={{color:'red'}}>{errors.email}</p>}
      </div>
      <div>
        <input type="password" name="password" placeholder="Password" onChange={handleChange} />
        {errors.password && <p style={{color:'red'}}>{errors.password}</p>}
      </div>
      <button type="submit">Register</button>
    </form>
  );
};

export default RegistrationForm;

import React, { useRef } from 'react';

const UncontrolledSubscribe = () => {
  // B. Create Ref
  const emailInputRef = useRef(null);

  // C. Handle Submit
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // D. Access value via Ref
    const emailValue = emailInputRef.current.value;
    
    if(emailValue === '') {
        alert("Please enter an email");
        return;
    }

    console.log("Subscribed with:", emailValue);
    alert(`Subscribed: ${emailValue}`);

    // E. Reset manually
    emailInputRef.current.value = '';
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginTop: '20px' }}>
      <label>Subscribe to Newsletter: </label>
      {/* A. Assign Ref */}
      <input type="email" ref={emailInputRef} placeholder="Enter email..." />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledSubscribe;

import React from 'react';
import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
import './App.css'; // Assume .active { font-weight: bold; color: red; } exists

// A. Components
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Us</h2>;
const Contact = () => <h2>Contact Us</h2>;

// C. Navbar with NavLink
const Navbar = () => {
  return (
    <nav>
      {/* D. & E. NavLink with active styling support */}
      <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>Home</NavLink>
      {' | '}
      <NavLink to="/about" className={({ isActive }) => (isActive ? 'active' : '')}>About</NavLink>
      {' | '}
      <NavLink to="/contact" className={({ isActive }) => (isActive ? 'active' : '')}>Contact</NavLink>
    </nav>
  );
};

export default function App() {
  return (
    // B. Router Setup
    <BrowserRouter>
      <Navbar />
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

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

// A. Product List Component
const ProductList = () => {
  const products = [
    { id: 101, name: 'Laptop' },
    { id: 102, name: 'Phone' },
    { id: 103, name: 'Tablet' },
  ];

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

// C. Product Detail Component using useParams
const ProductDetail = () => {
  const { id } = useParams();
  
  return (
    <div>
      <h2>Product Details</h2>
      {/* D. Display ID */}
      <p>Viewing details for Product ID: {id}</p>
      <Link to="/">Back to List</Link>
    </div>
  );
};

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductList />} />
        {/* B. Dynamic Route Configuration */}
        <Route path="/product/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // A. Import Axios

const PostList = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    // B. Trigger GET request
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        // C. Store data
        setPosts(response.data.slice(0, 5)); // Keep only first 5
        setLoading(false);
      })
      .catch(err => {
        // D. Handle Error
        setError('Failed to fetch data');
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{color:'red'}}>{error}</p>;

  return (
    <div>
      <h2>Latest Posts</h2>
      <ul>
        {/* E. Render List */}
        {posts.map(post => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;

import React, { useState } from 'react';

const CommentManager = () => {
  const [status, setStatus] = useState('');

  // A. POST Request
  const addComment = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/comments', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ body: 'This is a new comment', postId: 1 }),
      });
      
      const data = await response.json();
      setStatus(`Added Comment ID: ${data.id}`);
    } catch (error) {
      setStatus('Error adding comment');
    }
  };

  // B. DELETE Request
  const deleteComment = async (id) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/comments/${id}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        setStatus(`Deleted Comment ID: ${id}`);
      } else {
        throw new Error('Delete failed');
      }
    } catch (error) {
      setStatus('Error deleting comment');
    }
  };

  return (
    <div>
      <h3>API Action Status: {status}</h3>
      <button onClick={addComment}>Add Comment (POST)</button>
      <button onClick={() => deleteComment(1)}>Delete Comment 1 (DELETE)</button>
    </div>
  );
};

export default CommentManager;

// Note: This often runs in a standalone JS file or setup file
import { createStore } from 'redux';

// A. Initial State
const initialState = { value: 0 };

// B. Reducer
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
};

// C. Create Store
const store = createStore(counterReducer);

// D. Subscribe
const unsubscribe = store.subscribe(() => {
  console.log('Current State:', store.getState());
});

// E. Dispatch Actions
console.log("Dispatching INCREMENT...");
store.dispatch({ type: 'INCREMENT' });

console.log("Dispatching INCREMENT...");
store.dispatch({ type: 'INCREMENT' });

console.log("Dispatching DECREMENT...");
store.dispatch({ type: 'DECREMENT' });

// Clean up
unsubscribe();

import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer Setup (same as before)
const reducer = (state = { value: 0 }, action) => {
  if (action.type === 'INCREMENT') return { value: state.value + 1 };
  if (action.type === 'DECREMENT') return { value: state.value - 1 };
  return state;
};
const store = createStore(reducer);

// B. Component Reading State
const CounterDisplay = () => {
  const count = useSelector(state => state.value);
  return <h1>Count: {count}</h1>;
};

// C. Component Dispatching Actions
const CounterControls = () => {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
};

// A. & D. Provider and Render
export default function App() {
  return (
    <Provider store={store}>
      <div style={{ textAlign: 'center' }}>
        <CounterDisplay />
        <CounterControls />
      </div>
    </Provider>
  );
}

// A. Command: npm run build
/* 
   B. Explanation:
   - Bundling: Combines multiple JS/CSS files into fewer files to reduce HTTP requests.
   - Minification: Removes whitespace, comments, and renames variables to shorten names, reducing file size.
   - Transpilation: Converts modern ES6+ code to browser-compatible ES5.
*/

import React from 'react';

// C. Error Boundary Component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

// D. Usage
const BuggyComponent = () => {
  throw new Error("I crashed!"); // Simulating a crash
  return <div>Safe</div>;
};

export default function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

// A. Action Creator
const loginSuccess = (user) => ({
  type: 'LOGIN_SUCCESS',
  payload: user
});

// B. Login Component
const LoginComponent = () => {
  const [creds, setCreds] = useState({ username: '', password: '' });
  const dispatch = useDispatch();

  const handleChange = (e) => {
    setCreds({ ...creds, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      // Simulated API Call
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1', {
        method: 'GET' // Using GET to mock a successful user fetch
      });
      
      if(response.ok) {
        const user = await response.json();
        // Dispatch to Redux
        dispatch(loginSuccess(user));
        alert("Login Successful! User stored in Redux.");
      } else {
        alert("Login Failed");
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input name="username" onChange={handleChange} placeholder="Username" />
      <input name="password" type="password" onChange={handleChange} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginComponent;

// A. Default Configuration
const defaultConfig = {
  theme: 'light',
  timeout: 5000,
  retries: 3
};

// B. Setup Function
const setupApp = (userConfig) => {
  // C. Merge configurations (Spread Operator)
  // userConfig comes last to override defaults
  const finalConfig = { ...defaultConfig, ...userConfig };

  // D. Destructuring
  const { theme, timeout } = finalConfig;

  // E. Logging
  console.log(`App starting with ${theme} theme and ${timeout}ms timeout.`);
  
  // Return for verification
  return finalConfig;
};

// Testing the script
setupApp({ theme: 'dark' }); // Should keep timeout 5000
setupApp({ timeout: 10000, retries: 5 }); // Should keep theme 'light'

// --- mathUtils.js ---

// B. & C. Named Exports
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// D. Default Export
const logResult = (value) => {
  console.log("Result:", value);
};
export default logResult;


// --- app.js ---

// E. Imports (Default import can be named anything, e.g., 'logger')
import logger, { add } from './mathUtils.js';

const runCalculation = () => {
  const sum = add(10, 5);
  logger(sum); // Outputs: Result: 15
};

runCalculation();

import React, { useState } from 'react';

// B. Child 1: Input
const CelsiusInput = ({ temperature, onTemperatureChange }) => {
  return (
    <fieldset>
      <legend>Enter Celsius:</legend>
      <input
        value={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)}
        type="number"
      />
    </fieldset>
  );
};

// C. Child 2: Display
const FahrenheitDisplay = ({ celsius }) => {
  const fahrenheit = (parseFloat(celsius || 0) * 9) / 5 + 32;
  return <p>Fahrenheit: {fahrenheit}</p>;
};

// A. Parent Component
const TemperatureCalculator = () => {
  const [temp, setTemp] = useState('');

  const handleWebChange = (val) => {
    setTemp(val);
  };

  return (
    <div>
      {/* D. Passing props down */}
      <CelsiusInput temperature={temp} onTemperatureChange={handleWebChange} />
      <FahrenheitDisplay celsius={temp} />
    </div>
  );
};

export default TemperatureCalculator;

import React, { useState } from 'react';

const TodoList = () => {
  // A. Initial State
  const [todos, setTodos] = useState([
    { id: 101, text: 'Learn React' },
    { id: 102, text: 'Practice Coding' },
    { id: 103, text: 'Build App' }
  ]);

  // D. Delete Functionality
  const handleDelete = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <ul>
      {todos.map((todo) => (
        /* 
           C. Key Usage:
           Using todo.id instead of index.
           
           E. Why not index? 
           If the list is reordered or items are deleted, the index changes.
           React uses keys to identify which items have changed, added, or removed.
           Using index can lead to state bugs and performance issues in dynamic lists.
        */
        <li key={todo.id}>
          {todo.text} 
          <button onClick={() => handleDelete(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

import React from 'react';

const AdminPanel = () => <div style={{background: 'red'}}>Admin Settings</div>;

const UserDashboard = ({ isLoggedIn, username, isLoading }) => {
  // D. If/Else for early return
  if (isLoading) {
    return null; // Or <p>Loading...</p>
  }

  return (
    <div>
      {/* B. Ternary Operator */}
      {isLoggedIn ? (
        <h1>Welcome, {username}!</h1>
      ) : (
        <button>Please Login</button>
      )}

      {/* C. Logical && Short Circuit */}
      {isLoggedIn && username === 'admin' && <AdminPanel />}
    </div>
  );
};

export default UserDashboard;

import React from 'react';

const CustomEvents = () => {
  const handleRightClick = (e) => {
    // C. Prevent Default Context Menu
    e.preventDefault();
    // D. Log Coordinates
    console.log(`Right click at: X=${e.clientX}, Y=${e.clientY}`);
  };

  const handleDivClick = () => {
    console.log("Div Clicked");
  };

  const handleButtonClick = (e) => {
    // E. Stop Propagation
    e.stopPropagation();
    console.log("Button Clicked (Propagation Stopped)");
  };

  return (
    <div 
      // A. Dimensions and Background
      style={{ width: '300px', height: '300px', background: 'lightgray' }}
      // B. Event Handlers
      onContextMenu={handleRightClick}
      onClick={handleDivClick}
    >
      <p>Right click inside me. Click button below.</p>
      <button onClick={handleButtonClick}>Click Me</button>
    </div>
  );
};

export default CustomEvents;

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

const Stopwatch = () => {
  // A. State for display
  const [time, setTime] = useState(0);
  
  // B. Ref for Interval ID
  const timerRef = useRef(null);

  // C. Start Function
  const startTimer = () => {
    // E. Prevent multiple intervals
    if (timerRef.current !== null) return;

    timerRef.current = setInterval(() => {
      setTime(prev => prev + 1);
    }, 1000);
  };

  // D. Stop Function
  const stopTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  return (
    <div>
      <h1>Seconds: {time}</h1>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
};

export default Stopwatch;

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [numbers] = useState([10, 20, 30, 40]);

  // B. Expensive function logic inside useMemo
  // C. useMemo implementation
  const doubledNumbers = useMemo(() => {
    return numbers.map(num => {
      console.log("Calculating...", num);
      return num * 2;
    });
  }, [numbers]); // D. Dependency: only runs if 'numbers' changes

  return (
    <div>
      <h2>Doubled: {doubledNumbers.join(', ')}</h2>
      <p>Counter: {count}</p>
      {/* E. Re-render trigger */}
      <button onClick={() => setCount(count + 1)}>Re-render Component</button>
    </div>
  );
};

export default ExpensiveComponent;

import React, { useState } from 'react';

// A. Custom Hook
const useLocalStorage = (key, initialValue) => {
  // Lazy State Initialization
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    }
    catch (error) {
      return initialValue;
    }
  });

  // B. Setter Function
  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  // C. Return
  return [storedValue, setValue];
};

// D. Usage
const StorageDemo = () => {
  const [name, setName] = useLocalStorage('username', 'Guest');

  return (
    <div>
      <p>Stored Name: {name}</p>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
    </div>
  );
};

export default StorageDemo;

import React, { useState } from 'react';

const PreferencesForm = () => {
  // A. State
  const [formData, setFormData] = useState({
    newsletter: false,
    role: 'user'
  });

  // D. Generic Handler
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* B. Checkbox */}
      <label>
        Subscribe to Newsletter:
        <input 
          name="newsletter" 
          type="checkbox" 
          checked={formData.newsletter} 
          onChange={handleChange} 
        />
      </label>
      <br />

      {/* C. Select */}
      <label>
        Role:
        <select name="role" value={formData.role} onChange={handleChange}>
          <option value="user">User</option>
          <option value="editor">Editor</option>
          <option value="admin">Admin</option>
        </select>
      </label>
      <br />
      <button type="submit">Save</button>
    </form>
  );
};

export default PreferencesForm;

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

// Sub-components
const Profile = () => <h3>User Profile</h3>;
const Settings = () => <h3>App Settings</h3>;

// B. Dashboard with Outlet
const Dashboard = () => {
  return (
    <div style={{ display: 'flex' }}>
      <nav style={{ width: '200px', borderRight: '1px solid black' }}>
        <ul>
          {/* Relative Links */}
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <div style={{ padding: '20px' }}>
        <h1>Dashboard</h1>
        {/* C. Outlet for nested content */}
        <Outlet />
      </div>
    </div>
  );
};

// A. & D. Route Configuration
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  // B. Hook
  const navigate = useNavigate();

  const handleLogin = (e) => {
    e.preventDefault();
    // C. Simulate Logic
    const success = true;
    
    if (success) {
      console.log("Login Success, Redirecting...");
      // D. & E. Navigate with State
      navigate('/home', { state: { fromLogin: true } });
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <h2>Login Page</h2>
      <button type="submit">Log In</button>
    </form>
  );
};

export default Login;

import React, { useState } from 'react';

const PostEditor = () => {
  const [message, setMessage] = useState('');

  // A. Update Function
  const updatePost = (id, newData) => {
    // B. Fetch PUT
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: 'PUT',
      body: JSON.stringify(newData),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
    .then((response) => response.json())
    .then((json) => {
      // D. Log success
      console.log(json);
      setMessage(`Update Successful for ID ${id}`);
    });
  };

  return (
    <div>
      <h3>{message}</h3>
      {/* E. Trigger */}
      <button 
        onClick={() => updatePost(1, { id: 1, title: 'foo', body: 'bar', userId: 1 })}
      >
        Update Post 1
      </button>
    </div>
  );
};

export default PostEditor;

import { createStore, combineReducers } from 'redux';

// A. Reducers
const userReducer = (state = { name: 'Guest' }, action) => {
  switch (action.type) {
    case 'SET_USER': return { ...state, name: action.payload };
    default: return state;
  }
};

const productReducer = (state = { items: [] }, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT': return { ...state, items: [...state.items, action.payload] };
    default: return state;
  }
};

// B. Combine Reducers
const rootReducer = combineReducers({
  user: userReducer,
  products: productReducer
});

// C. Create Store
const store = createStore(rootReducer);

// D. Dispatch Actions
store.dispatch({ type: 'SET_USER', payload: 'John Doe' });
store.dispatch({ type: 'ADD_PRODUCT', payload: 'Laptop' });

// E. Verify Structure
console.log(store.getState());
// Output: { user: { name: 'John Doe' }, products: { items: ['Laptop'] } }

// A. Action Constants
const ActionTypes = {
  LOGIN_REQUEST: 'LOGIN_REQUEST',
  LOGIN_SUCCESS: 'LOGIN_SUCCESS'
};

// B. Action Creator
const requestLogin = (credentials) => {
  return {
    type: ActionTypes.LOGIN_REQUEST,
    payload: credentials
  };
};

// C. Reducer using Constants
const authReducer = (state = {}, action) => {
  switch (action.type) {
    case ActionTypes.LOGIN_REQUEST:
      return { loading: true };
    case ActionTypes.LOGIN_SUCCESS:
      return { loading: false, user: action.payload };
    default:
      return state;
  }
};

/* 
   D. Why Constants?
   1. Prevents typos (e.g., 'LOGIN_REQUST' vs 'LOGIN_REQUEST').
   2. Better IDE autocompletion.
   3. Easy to refactor/rename action types in one place.
*/

import React, { createContext, useReducer, useContext } from 'react';

// A. State & Reducer
const initialState = { count: 0 };
const reducer = (state, action) => {
  switch (action.type) {
    case 'INC': return { count: state.count + 1 };
    default: return state;
  }
};

// B. Context
const StoreContext = createContext();

// C. Provider
export const StoreProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // D. Pass value
  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      {children}
    </StoreContext.Provider>
  );
};

// E. Child Component
export const Counter = () => {
  const { state, dispatch } = useContext(StoreContext);
  return (
    <button onClick={() => dispatch({ type: 'INC' })}>
      Count: {state.count}
    </button>
  );
};

import React, { useState } from 'react';

const PasswordForm = () => {
  const [password, setPassword] = useState('');
  const [errorMsg, setErrorMsg] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleChange = (e) => {
    const val = e.target.value;
    setPassword(val);

    // B. Regex Check
    const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
    
    if (regex.test(val)) {
      setIsValid(true);
      setErrorMsg('');
    } else {
      // C. Validation Fail
      setIsValid(false);
      setErrorMsg('Password too weak (Min 8 chars, 1 letter, 1 number)');
    }
  };

  return (
    <form>
      <input type="password" value={password} onChange={handleChange} />
      {/* E. Display Error */}
      {!isValid && <p style={{ color: 'red' }}>{errorMsg}</p>}
      
      {/* D. Disable Button */}
      <button disabled={!isValid}>Set Password</button>
    </form>
  );
};

export default PasswordForm;

/* Notification.module.css (Assumed)
.box { padding: 10px; border: 1px solid black; }
.success { background-color: lightgreen; }
.error { background-color: pink; }
*/

import React from 'react';
import styles from './Notification.module.css';

const Notification = ({ type, message }) => {
  // C. & D. Dynamic Class Construction
  // Accessing styles.success or styles.error dynamically based on 'type' prop
  const assignedClass = `${styles.box} ${styles[type]}`;

  return (
    <div className={assignedClass}>
      {message}
    </div>
  );
};

// Usage Example: <Notification type="success" message="Done!" />
export default Notification;

/* 
   A. .env Explanation:
   Used to store environment-specific variables (like API keys, URLs).
   These are injected at build time. They keep secrets out of code 
   and allow different configs for Development vs Production.
*/

import React, { useEffect } from 'react';

const DataFetcher = () => {
  // B. & C. Read Env Variable with Fallback
  // Note: Create React App requires 'REACT_APP_' prefix
  const API_BASE = process.env.REACT_APP_API_URL || 'http://localhost:3000';

  useEffect(() => {
    // D. Use in Fetch
    fetch(`${API_BASE}/users`)
      .then(res => res.json())
      .then(data => console.log(data));
  }, []);

  return <div>Check Console for Data from {API_BASE}</div>;
};

export default DataFetcher;

// A. Base Class
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return "Noise";
  }
}

// B. Extended Class
class Dog extends Animal {
  constructor(name) {
    // C. Super call
    super(name);
  }

  // D. Override method
  speak() {
    return "Bark";
  }
}

// E. Instantiation
const myDog = new Dog("Rex");
console.log(myDog.name); // Rex
console.log(myDog.speak()); // Bark