Frontend Web Development React & Component Frameworks Syllabus

React & Component Frameworks syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React & Component Frameworks in Frontend Web Development, not a summary of it.

1. 1

   React Fundamentals

   4 topics

   • JSX & Rendering
   • Components & Composition
   • Props & PropTypes
   • Conditional & List Rendering
2. 2

   State & Hooks

   5 topics

   • useState & State Updates
   • useEffect & Lifecycle
   • useRef & useMemo / useCallback
   • useContext & useReducer
   • Custom Hooks
3. 3

   Events, Forms & Effects

   4 topics

   • Handling Events in React
   • Controlled & Uncontrolled Inputs
   • Form Libraries (React Hook Form)
   • Data Fetching Patterns
4. 4

   Routing & Navigation

   3 topics

   • Client-Side Routing (React Router)
   • Nested Routes & Params
   • Programmatic Navigation & Guards
5. 5

   State Management

   4 topics

   • Lifting State & Prop Drilling
   • Context API Patterns
   • Redux Toolkit & Zustand
   • Server State (TanStack Query)
6. 6

   Meta-Frameworks & SSR

   4 topics

   • Next.js App Router
   • Rendering Strategies (SSR, SSG, ISR)
   • Data Fetching & Server Actions
   • Alternative Frameworks (Vue, Svelte, Astro)
7. 7

   Performance & Patterns

   4 topics

   • Memoization & Re-render Optimization
   • Code Splitting & Lazy Loading
   • Component Design Patterns
   • Error Boundaries & Suspense

React & Component Frameworks flashcards for Frontend Web Development

22 of 69 cards from the React & Component Frameworks deck — real questions with worked answers.

1. What is JSX and how is it processed before running in the browser?

   JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JS. It is not valid JS itself; a compiler (Babel/SWC) transpiles it into React.createElement(...) calls (or _jsx() with the automatic runtime), producing plain JavaScript objects (React elements).

2. In JSX, why must you use className and htmlFor instead of class and for?

   Because JSX compiles to JavaScript objects and class and for are reserved words in JS. React uses the DOM property names className and htmlFor instead.

3. How do you embed a JavaScript expression inside JSX, and what is NOT allowed there?

   Wrap the expression in curly braces, e.g. {count + 1}. Only expressions are allowed (values, function calls, ternaries), not statements like if, for, or variable declarations.

4. What is a React element versus a React component?

   A React element is a lightweight, immutable plain-object description of what to render (type, props, children). A component is a function (or class) that returns elements; React calls the component to produce elements.

5. Why must adjacent JSX elements be wrapped, and what lightweight wrapper avoids extra DOM nodes?

   A component/expression can return only one root node. Wrap siblings in a single parent, or use a Fragment (<>...</> or <React.Fragment>) to group them without adding an extra DOM element.

6. When React renders {false}, {null}, {undefined}, or {true} in JSX, what appears on screen?

   Nothing. React ignores false, null, undefined, and true and renders no output for them. Note that 0 IS rendered, which causes bugs like {count && <X/>} showing 0.

7. What is the minimal definition of a valid React function component?

   A JavaScript function whose name starts with a capital letter and that returns JSX (a React element) or null. Example: function Hello() { return <h1>Hi</h1>; }

8. What does 'composition' mean in React, and how does it replace inheritance?

   Composition means building complex UIs by nesting and combining smaller components, passing components/elements via props (including children). React recommends composition over class inheritance for reusing code between components.

9. What is the special children prop and how is it passed?

   props.children holds whatever JSX is nested between a component's opening and closing tags. It lets a component render arbitrary content passed by its parent, enabling wrapper/layout components.

10. What are props, and what key rule governs them (immutability)?

    Props are read-only inputs passed from a parent to a child component. A component must never modify its own props; props are immutable from the receiver's perspective (one-way data flow, parent to child).

11. How do you give a prop a default value in a function component?

    Use default parameter values during destructuring, e.g. function Btn({ size = 'md' }) { ... }. (The legacy Component.defaultProps still works for class components but is deprecated for function components.)

12. What is the purpose of PropTypes and how do you require a string prop named title?

    PropTypes provide runtime type-checking of props in development, warning in the console on mismatches. Example: Component.propTypes = { title: PropTypes.string.isRequired }.

13. List three common PropTypes validators and their meaning.

    PropTypes.number / .string / .bool (primitive types); PropTypes.func (a function); PropTypes.node (anything renderable) or PropTypes.arrayOf(PropTypes.number) (typed array). Append .isRequired to make any required.

14. Why is prop-drilling considered a problem, and name one alternative?

    Prop-drilling passes data through many intermediate components that don't use it, only to reach a deep child, making code verbose and fragile. Alternatives: React Context, component composition (passing elements as children), or state libraries.

15. How do you conditionally render an element using the logical AND (&&) operator, and its pitfall?

    {condition && <Element/>} renders Element only when condition is truthy. Pitfall: if condition is 0 (a falsy number), React renders 0 on screen. Convert to boolean, e.g. {count > 0 && ...}.

16. How do you render one of two elements based on a condition inline?

    Use a ternary: {isLoggedIn ? <Logout/> : <Login/>}. Ternaries are expressions, so they work directly inside JSX braces.

17. How do you render a list of items from an array in JSX?

    Use array.map() to return one element per item, e.g. {items.map(i => <li key={i.id}>{i.name}</li>)}. Each returned element needs a unique key prop.

18. What is the purpose of the key prop when rendering lists, and why not use the array index?

    Keys give elements a stable identity so React can match items between renders and update efficiently. Using the array index breaks when items are inserted, removed, or reordered, causing wrong state/DOM reuse; use a stable unique id instead.

19. What must be true about key values among sibling list elements?

    Keys must be unique among siblings (not globally) and stable across renders. They should come from the data (e.g. an id), not be randomly generated on each render.

20. What does the useState hook return, and how is it destructured?

    It returns an array of exactly two elements: the current state value and a setter function. Convention: const [value, setValue] = useState(initial).

21. Why should you use the functional updater form setCount(c => c + 1) instead of setCount(count + 1)?

    The functional form receives the latest pending state, so multiple updates in the same event batch compose correctly. setCount(count + 1) uses the value captured at render, causing lost updates when called several times in one event.

22. Is React state update synchronous or asynchronous, and what is batching?

    State updates are asynchronous and batched: React groups multiple setState calls within an event handler into a single re-render for performance. The state variable does not change until the next render.

See more React & Component Frameworks flashcards →

Planning React & Component Frameworks for Frontend Web Development

React & Component Frameworks (Frontend Web Development) FAQ