Front-end Web Development Frameworks and Libraries Syllabus

Frameworks and Libraries syllabus — full chapter and topic list

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

1. 1

   React

   3 topics

   • JSX
   • Components
   • State and Props
2. 2

   Vue

   3 topics

   • Vue Instance
   • Components
   • Directives
3. 3

   Angular

   3 topics

   • Modules
   • Components
   • Services

Frameworks and Libraries flashcards for Front-end Web Development

20 of 51 cards from the Frameworks and Libraries deck — real questions with worked answers.

1. What does JSX stand for, and what is it?

   JSX stands for JavaScript XML. It is a syntax extension for JavaScript that lets you write HTML-like markup directly inside JavaScript, used primarily with React to describe UI.

2. Is JSX required to use React?

   No. JSX is optional syntactic sugar. JSX compiles down to React.createElement() calls, which you could write by hand, but JSX is the standard, more readable approach.

3. What does a JSX element compile to under the hood?

   A call to React.createElement(type, props, ...children), which returns a plain JavaScript object (a React element) describing what to render.

4. Why must JSX expressions return a single root element?

   Because JSX compiles to a single React.createElement call, a component must return one parent node. Multiple siblings must be wrapped in a parent element or a Fragment (<>...</>).

5. How do you embed a JavaScript expression inside JSX?

   Wrap it in curly braces, e.g. <h1>{user.name}</h1> or {2 + 2}. Only expressions are allowed, not statements like if or for.

6. In JSX, why is the HTML 'class' attribute written as 'className'?

   Because 'class' is a reserved word in JavaScript. JSX uses className instead, and camelCase for most attributes (e.g. htmlFor, tabIndex).

7. How are inline styles written in JSX?

   As a JavaScript object with camelCased properties passed to the style attribute, e.g. style={{ backgroundColor: 'blue', fontSize: 14 }} (note the double braces).

8. How do you write comments inside JSX?

   Use curly braces with a JavaScript block comment: {/* this is a comment */}.

9. Why must every element in a JSX list have a unique 'key' prop?

   Keys give React a stable identity for each list item so it can efficiently match, reorder, and update elements during reconciliation. Keys should be stable and unique among siblings, ideally not array indexes.

10. How do you conditionally render an element in JSX using the logical AND operator?

    Use {condition && <Element/>}. If condition is truthy the element renders; if falsy, nothing renders. The ternary {cond ? <A/> : <B/>} handles else cases.

11. What is a React component?

    A reusable, self-contained piece of UI defined as a JavaScript function (or class) that returns React elements (JSX) describing what should appear on screen.

12. What is the naming rule that distinguishes a React component from an HTML element in JSX?

    Component names must start with a capital letter (e.g. <MyButton/>). Lowercase names (e.g. <button/>) are treated as built-in HTML DOM tags.

13. What are the two ways to define a component in React?

    Function components (a JavaScript function returning JSX, now the standard) and class components (an ES6 class extending React.Component with a render() method).

14. What is the difference between a presentational (dumb) and a container (smart) component?

    Presentational components focus on how things look, receiving data via props and being mostly stateless. Container components focus on how things work, managing state and logic and passing data down to presentational components.

15. What does it mean to 'compose' components?

    Composition is building complex UIs by nesting and combining smaller components, passing data and elements (via props, including children) rather than using inheritance.

16. What is the special 'children' prop in React?

    props.children holds whatever JSX is nested between a component's opening and closing tags, letting a component wrap and render arbitrary content passed to it.

17. What are props in React?

    Props (properties) are read-only inputs passed from a parent component to a child component as attributes, used to configure and customize the child.

18. Why are props considered immutable / read-only?

    A component must never modify its own props. React enforces a one-way data flow: data flows down from parent to child, and the parent owns and controls the prop values.

19. What is state in React?

    State is data that is private to and managed within a component, which can change over time (e.g. via user interaction). When state changes, the component re-renders.

20. What is the key difference between state and props?

    Props are passed in from a parent and are read-only (owned externally); state is internal, mutable, and managed by the component itself. Both trigger re-renders when changed.

See more Frameworks and Libraries flashcards →

Planning Frameworks and Libraries for Front-end Web Development

Frameworks and Libraries (Front-end Web Development) FAQ