Synetic College Logo
Unit 2 of 3 · BCA Sem 4

Unit 2: React.js frontend development

Web Programming-II notes · PTU syllabus (UGDSE303)

3 min read4 topics10 exam questions
On this page
  1. Unit summary
  2. SPAs, JSX and the virtual DOM
  3. Components, props and state
  4. Events, conditional rendering, lists and forms
  5. React Router, hooks and fetching data
  6. Key terms
  7. Quick revision
  8. Important questions

Unit summary

React is a JavaScript library for building fast, interactive user interfaces as single-page applications. This unit covers SPAs, JSX and the virtual DOM, components, props and state, events and conditional rendering, lists and keys, React Router, forms, hooks, and fetching data from APIs.

After this unit you can

  • Explain single-page applications, JSX and the virtual DOM
  • Build functional components with props and state
  • Handle events, conditional rendering, lists and forms
  • Use React Router, useState, useEffect and fetch API data

PTU syllabus topics

  • Introduction to SPAs and React.js
  • JSX and the virtual DOM
  • functional vs class components
  • props and state
  • event handling and conditional rendering
  • lists and keys
  • React Router
  • forms and controlled components
  • useState/useEffect hooks
  • fetching API data
Key termsReact essentials
Component
A reusable piece of UI
Props
Data passed into a component
State
Data a component owns and can change
useState
Hook to add state
useEffect
Hook to run side effects such as API calls
1

Topic 1

SPAs, JSX and the virtual DOM

A single-page application (SPA) loads one HTML page and updates content dynamically without full reloads, giving an app-like experience.

  • JSX lets you write HTML-like markup inside JavaScript: const el = <h1>Hello {name}</h1>;
  • The virtual DOM is a lightweight copy of the real DOM. React updates the virtual DOM, compares it with the previous version (diffing) and changes only what is needed in the real DOM — making updates fast.
2

Topic 2

Components, props and state

ComparisonProps vs state
Props
State

Owned by

The parent component

The component itself

Mutable?

Read-only in the child

Changes with setState / useState

Purpose

Pass data down

Track data that changes over time

jsxfunction Greeting({ name }) {                  // props
  return <p>Welcome, {name}!</p>;
}
function Counter() {
  const [count, setCount] = useState(0);       // state
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Functional components with hooks are now preferred over class components (which used this.state and lifecycle methods).

3

Topic 3

Events, conditional rendering, lists and forms

jsx{isLoggedIn ? <Dashboard /> : <Login />}                  // conditional rendering
<ul>{tasks.map(t => <li key={t.id}>{t.title}</li>)}</ul>   // lists need unique keys

A controlled component keeps form input values in state:

jsxconst [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />
4

Topic 4

React Router, hooks and fetching data

React Router maps URLs to components for multi-page navigation: <Route path="/about" element={<About />} /> and <Link to="/about">.

jsxfunction Movies() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {                              // runs after render
    fetch("/api/movies").then(r => r.json()).then(setMovies);
  }, []);                                        // [] = run once on mount
  return movies.map(m => <h3 key={m.id}>{m.title}</h3>);
}

Exam tip

The dependency array of useEffect decides when it re-runs: [] once, [x] whenever x changes, none on every render.

Key terms

SPA
A single-page application updated without full reloads
JSX
HTML-like syntax inside JavaScript
Virtual DOM
An in-memory copy of the DOM used to minimise updates
Props
Read-only data passed from parent to child
Hook
A function like useState or useEffect that adds features to components

Quick revision

  • Virtual DOM + diffing = fast updates.
  • Props down, state inside; use keys in lists.
  • Controlled inputs: value + onChange.
  • useEffect with [] runs once; React Router for pages.

Important exam questions

Practice questions written to the PTU exam pattern for this unit's syllabus: short answers (Section A style) and long answers (Sections B and C style).

Short-answer questions

  1. Q1.What is a single-page application?
  2. Q2.What is JSX?
  3. Q3.Differentiate between props and state.
  4. Q4.Why are keys needed in lists?
  5. Q5.What is a controlled component?
  6. Q6.What does useEffect do?

Long-answer questions

  1. Q1.Explain the virtual DOM and how React updates the UI.
  2. Q2.Explain components, props and state with examples.
  3. Q3.Build a React component that fetches data from an API and displays it as a list.
  4. Q4.Explain React Router and form handling in React.

Stuck on this unit?

Message SBS on WhatsApp for help with Web Programming-II, or to ask about studying BCA at Synetic.

WhatsApp us