📚 Web Development Final Exam - Complete Preparation

Q1-Q5 Pattern | Practical Exam Questions | 50 MCQs | Urdu Summaries

📖 Topics

Q1 - React Basics & Fundamentals

25 Marks

1. What is React?

React is a JavaScript library created by Facebook for building user interfaces. It helps you build fast, interactive websites by automatically updating only the parts that changed.

🌍 Real World Example:

Instagram uses React. When you like a post, only the like count updates, not the entire page. This makes it super fast!

// React is a library for building UIs import React from 'react'; // It helps us create interactive websites
🇵🇰 اردو میں سمجھیں:

React ایک JavaScript library ہے جو Facebook نے بنائی ہے۔ یہ ہمیں تیز اور interactive websites بنانے میں مدد کرتی ہے۔ جب کوئی چیز بدلتی ہے تو صرف وہی حصہ update ہوتا ہے، پورا صفحہ نہیں۔

2. JSX - Write HTML in JavaScript

JSX looks like HTML but it's actually JavaScript. React converts it to JavaScript automatically.

// JSX Example - Looks like HTML but is JavaScript const element = <h1>Hello World</h1>; // This is JSX // React converts it to this: const element = React.createElement('h1', null, 'Hello World'); // JavaScript version
🇵🇰 اردو میں سمجھیں:

JSX ایک ایسی چیز ہے جو HTML جیسی لگتی ہے لیکن یہ JavaScript ہے۔ React اسے خود بخود JavaScript میں بدل دیتا ہے۔

3. Components - Building Blocks

Components are like LEGO blocks. You create small pieces and combine them to build bigger things.

// Creating a reusable Button Component function Button() { // Component is a function return <button>Click Me</button>; // Return JSX } // End of component // Using the component multiple times function App() { // Main component return ( // Return multiple components <> // Fragment - wrapper without div <Button /> // Use Button component <Button /> // Reuse Button component </> // End Fragment ); // End return } // End App component
🇵🇰 اردو میں سمجھیں:

Components ایسے ہیں جیسے LEGO کے ٹکڑے۔ ہم چھوٹے ٹکڑے بناتے ہیں اور انہیں ملا کر بڑی چیزیں بناتے ہیں۔

✏️ Practice Exercise:

Create a component called "Greeting" that displays "Welcome to React!"

Q2 - React Theory & Concepts

20 Marks (CPS)

1. Props - Passing Data

Props are like function parameters. You pass data from parent to child component.

// Parent component passing props function App() { // Parent return <Welcome name="Ali" />; // Pass name prop } // Child component receiving props function Welcome(props) { // Receive props return <h1>Hello {props.name}</h1>; // Use prop }
🇵🇰 اردو میں سمجھیں:

Props ایسے ہیں جیسے function کے parameters۔ ہم parent سے child کو ڈیٹا بھیجتے ہیں۔

2. Props Destructuring

Instead of using props.name, we can directly extract the values.

// Without destructuring function Welcome(props) { return <h1>{props.name}</h1>; } // With destructuring (Better!) function Welcome({ name, age }) { // Extract directly return <h1>{name} is {age}</h1>; }
✏️ Practice Exercise:

Create a User component that receives firstName, lastName, and email as props and displays them.

Q3 - React Hooks & Fetching APIs

20 Marks (4 Parts)

Part 1: useState Hook - Managing State

useState lets you add state to functional components. It returns [value, function to update value].

// Counter example using useState import { useState } from 'react'; // Import useState function Counter() { // Component const [count, setCount] = useState(0); // Create state, initial value 0 return ( // Return JSX <> <p>Count: {count}</p> // Display count <button onClick={() => setCount(count + 1)}>Increase</button> // Update count </> ); }
🇵🇰 اردو میں سمجھیں:

useState ایک Hook ہے جو state بناتا ہے۔ یہ دو چیزیں دیتا ہے - value اور اسے update کرنے کا function۔

Part 2: useEffect Hook - Side Effects

useEffect runs code after component renders. Perfect for fetching data.

// Fetch data when component loads import { useEffect, useState } from 'react'; function UserList() { const [users, setUsers] = useState([]); // Store users useEffect(() => { // Run after render console.log('Component loaded'); // This runs once }, []); // Empty array = run once return <div>User List</div>; }

Part 3: Fetching Data from APIs

Use fetch() inside useEffect to get data from servers.

// Fetch products from API function ProductList() { const [products, setProducts] = useState([]); // Store products const [loading, setLoading] = useState(true); // Loading state useEffect(() => { // When component loads fetch('https://api.example.com/products') // Fetch from API .then(res => res.json()) // Convert to JSON .then(data => { // Got data setProducts(data); // Save products setLoading(false); // Stop loading }); }, []); // Run once on load if (loading) return <p>Loading...</p>; // Show loading return <div>{products.length} products</div>; }
✏️ Practice Exercise:

Create a component that fetches a list of posts from an API and displays them.

Q4 - Advanced React Concepts

20 Marks (6 Parts)

Part 1: React Forms - Controlled Components

Forms in React are controlled by state. Every input change updates state.

// Login form example function LoginForm() { const [email, setEmail] = useState(''); // Email state const [password, setPassword] = useState(''); // Password state const handleSubmit = (e) => { // Form submit handler e.preventDefault(); // Prevent page reload console.log(email, password); // Log form data }; return ( <form onSubmit={handleSubmit}> // Form element <input type="email" value={email} // Controlled by state onChange={(e) => setEmail(e.target.value)} // Update state /> <button type="submit">Login</button> // Submit button </form> ); }

Part 2: Event Handling

React uses camelCase for events: onClick, onChange, onSubmit, etc.

// Different event handlers function EventDemo() { const handleClick = () => console.log('Clicked!'); // Click handler const handleChange = (e) => console.log(e.target.value); // Change handler const handleFocus = () => console.log('Focused!'); // Focus handler return ( <> <button onClick={handleClick}>Click Me</button> // Click event <input onChange={handleChange} /> // Change event <input onFocus={handleFocus} /> // Focus event </> ); }

Part 3: useContext - Global State

useContext lets you share data without passing props through every component.

// Create context const UserContext = React.createContext(); // Create context // Use context in component function UserProfile() { const user = useContext(UserContext); // Get user from context return <h1>{user.name}</h1>; // Use user }
✏️ Practice Exercise:

Create a form with multiple input fields and display the form data in another component using useState.

Q5 - ES6 & Advanced Topics

15 Marks (6 Parts)

Part 1: ES6 Array Methods

map(), filter(), and reduce() are essential for React development.

// map() - Transform each item const numbers = [1, 2, 3]; // Array of numbers const doubled = numbers.map(n => n * 2); // [2, 4, 6] // filter() - Keep only matching items const evens = numbers.filter(n => n % 2 === 0); // [2] // reduce() - Combine into one value const sum = numbers.reduce((total, n) => total + n, 0); // 6
🇵🇰 اردو میں سمجھیں:

map() ہر چیز کو بدل دیتا ہے، filter() صرف مناسب چیزیں رکھتا ہے، اور reduce() سب کو ایک میں ملا دیتا ہے۔

Part 2: Conditional Rendering

Show or hide content based on conditions.

// Using if statement function Welcome({ isLoggedIn }) { if (isLoggedIn) { // If logged in return <h1>Welcome Back!</h1>; } return <h1>Please Login</h1>; // If not logged in } // Using ternary operator (shorter) <h1>{isLoggedIn ? 'Welcome' : 'Login'}</h1> // Using && operator <>{isLoggedIn && <h1>Welcome!</h1>}</>

Part 3: Lists and Keys

When rendering lists, always use a unique key prop.

// Rendering a list of users function UserList({ users }) { return ( <ul> {users.map(user => ( // Loop through users <li key={user.id}>{user.name}</li> // key must be unique ))} </ul> ); }
🇵🇰 اردو میں سمجھیں:

جب ہم list بناتے ہیں تو ہر item کو ایک unique key دینا ضروری ہے۔ یہ React کو بتاتا ہے کون سی چیز کون سی ہے۔

✏️ Practice Exercise:

Create a list of products with map() and filter them based on price using filter().

💡 Practical Exam Questions

These are the type of questions your teacher might ask. Practice these thoroughly!

Question 1: Product Fetching Component (Most Important!)

Question: Create a React component that simulates fetching a list of products {id, title, price} using setTimeout inside useEffect. Manage product data, loading state, and error state using multiple useState hooks. Implement a search filter that updates the displayed list in real-time based on user input. Render the filtered products list using .map with a stable unique key and display appropriate conditional messages (Loading..., No products found, Error).

import { useState, useEffect } from 'react'; // Import hooks function ProductFetcher() { // Main component const [products, setProducts] = useState([]); // Store products const [loading, setLoading] = useState(true); // Loading state const [error, setError] = useState(null); // Error state const [search, setSearch] = useState(''); // Search input useEffect(() => { // Run when component loads const fetchData = async () => { // Async function try { // Try to fetch // Simulate API delay with setTimeout await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds // Mock product data const mockProducts = [ { id: 1, title: 'Laptop', price: 50000 }, { id: 2, title: 'Phone', price: 30000 }, { id: 3, title: 'Tablet', price: 20000 }, ]; setProducts(mockProducts); // Save products setLoading(false); // Stop loading } catch (err) { // If error setError('Failed to fetch products'); // Set error setLoading(false); // Stop loading } }; fetchData(); // Call fetch function }, []); // Run once on mount // Filter products based on search const filteredProducts = products.filter(p => p.title.toLowerCase().includes(search.toLowerCase()) ); // Show loading message if (loading) return <p>Loading...</p>; // Show error message if (error) return <p>{error}</p>; // Main JSX return ( <> // Search input <input type="text" placeholder="Search products..." value={search} onChange={(e) => setSearch(e.target.value)} // Update search /> // Show message if no products found {filteredProducts.length === 0 && <p>No products found</p>} // Display products list <ul> {filteredProducts.map(product => ( <li key={product.id}> // Unique key {product.title} - Rs. {product.price} </li> ))} </ul> </> ); } export default ProductFetcher;
🇵🇰 اردو میں سمجھیں:

یہ component products fetch کرتا ہے، loading اور error states manage کرتا ہے، search filter کرتا ہے، اور .map سے products دکھاتا ہے۔ یہ سب کچھ ایک ساتھ کرنا ضروری ہے۔

✏️ Practice This:

Try to write this component from scratch without looking at the code. This is exactly what your teacher might ask!

50 Multiple Choice Questions

Test your knowledge! Select the correct answer for each question.

Q1: What is React?
Q2: What does JSX stand for?
Q3: What is a component?
Q4: What is Virtual DOM?
Q5: What are props?
Q6: What is useState?
Q7: What is useEffect?
Q8: When does useEffect run?
Q9: What is Vite?
Q10: What language is React written in?
Q11: What is the correct event handler for click?
Q12: What is props destructuring?
Q13: What does .map() do?
Q14: What does .filter() do?
Q15: What does .reduce() do?
Q16: What is useContext used for?
Q17: What is React Router used for?
Q18: What is useNavigate used for?
Q19: What is CSS Modules?
Q20: What is Tailwind CSS?
Q21: What is Bootstrap?
Q22: What is a controlled component?
Q23: What is an uncontrolled component?
Q24: What is conditional rendering?
Q25: What is a key prop?
Q26: What is the purpose of useState?
Q27: How do you update state in React?
Q28: What is the dependency array in useEffect?
Q29: What does an empty dependency array mean?
Q30: How do you fetch data in React?
Q31: What is the Fetch API?
Q32: How do you handle errors in fetch?
Q33: What is a form in React?
Q34: What is onChange event?
Q35: What is onSubmit event?
Q36: What is e.preventDefault()?
Q37: What is a nested route?
Q38: What is useNavigate hook?
Q39: How do you use useNavigate?
Q40: What is ES6?
Q41: What is arrow function?
Q42: What is template literal?
Q43: What is destructuring?
Q44: What is spread operator?
Q45: What is const?
Q46: What is let?
Q47: What is the difference between var and let?
Q48: What is a promise?
Q49: What is async/await?
Q50: What is the most important thing to remember about React?

⭐ Important Topics

1. Hooks - MOST IMPORTANT!

Hooks are the most important feature in modern React. You MUST master these:

  • useState: Manage component state
  • useEffect: Handle side effects and data fetching
  • useContext: Share data globally
  • useNavigate: Navigate between pages
🇵🇰 اردو میں سمجھیں:

Hooks React کا سب سے اہم حصہ ہیں۔ یہ functional components میں state اور دوسری features استعمال کرنے دیتے ہیں۔ ہر exam میں hooks کے سوالات آتے ہیں۔

2. ES6 Features - VERY IMPORTANT!

ES6 features are used everywhere in React:

  • Arrow Functions: () => {}
  • Destructuring: const { name } = obj
  • Spread Operator: ...array
  • Template Literals: `Hello ${name}`
  • Array Methods: map(), filter(), reduce()

3. React Fundamentals

Never forget these basics:

  • Components: Building blocks of React
  • Props: Data from parent to child
  • State: Data that can change
  • JSX: HTML-like syntax in JavaScript
  • Virtual DOM: React's optimization technique

4. Common Exam Questions

Q: What is the difference between props and state?

Props are read-only data from parent. State is data that can change inside component.

Q: Why do we use keys in lists?

Keys help React identify which items have changed, been added, or been removed.

Q: When should we use useEffect?

Use useEffect for fetching data, subscribing to events, or any side effects.

Q: What is the Virtual DOM?

A copy of the DOM in memory. React updates this first, then updates only changed parts on real DOM.

📚 Study Tips:
  • Practice writing components from scratch
  • Understand the flow of data (props)
  • Master useState and useEffect
  • Practice the practical exam questions
  • Take the 50 MCQs multiple times
  • Read the Urdu summaries for better understanding
  • Don't memorize, understand the concepts