Full Stack Web Development Front-End Development with React Syllabus

Front-End Development with React syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Front-End Development with React in Full Stack Web Development, not a summary of it.

1. 1

   React Foundations

   3 topics

   • Introduction to React
     • Component-based architecture
     • Virtual DOM and reconciliation
     • Setting up with Vite or Create React App
   • JSX
     • JSX syntax and expressions
     • Conditional rendering
     • Rendering lists and keys
   • Components and Props
     • Functional components
     • Passing and validating props
     • Component composition
2. 2

   State and Hooks

   4 topics

   • Managing State
     • useState hook
     • State updates and immutability
     • Lifting state up
   • Side Effects
     • useEffect hook
     • Dependency arrays and cleanup
     • Data fetching in effects
   • Additional Hooks
     • useContext for global state
     • useRef and useReducer
     • useMemo and useCallback
   • Custom Hooks
     • Extracting reusable logic
     • Rules of hooks
3. 3

   Events, Forms and Routing

   3 topics

   • Handling Events in React
     • Synthetic events
     • Passing arguments to handlers
   • Controlled Forms
     • Controlled vs uncontrolled inputs
     • Form validation patterns
   • Client-side Routing
     • React Router setup
     • Routes, links and parameters
     • Nested and protected routes
4. 4

   State Management and Tooling

   4 topics

   • Global State Management
     • Context API patterns
     • Redux Toolkit basics
     • Zustand overview
   • Component Styling
     • CSS Modules
     • Styled-components
     • Tailwind with React
   • Performance and Best Practices
     • Code splitting and lazy loading
     • Memoization with React.memo
     • Error boundaries
   • Build Tools and Testing
     • Vite configuration and bundling
     • Testing with React Testing Library and Jest

Front-End Development with React flashcards for Full Stack Web Development

19 of 51 cards from the Front-End Development with React deck — real questions with worked answers.

1. What is React?

   An open-source JavaScript library (created by Facebook/Meta) for building user interfaces, especially single-page applications, using reusable components and a declarative approach.

2. What problem does React's Virtual DOM solve?

   It is an in-memory representation of the real DOM. React diffs the new Virtual DOM against the previous one (reconciliation) and updates only the changed parts of the real DOM, improving performance.

3. What is the difference between imperative and declarative programming, and which does React use?

   Imperative describes step-by-step how to change the UI; declarative describes what the UI should look like for a given state. React is declarative—you describe the desired output and React handles the DOM updates.

4. What is JSX?

   A syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript. It is compiled (e.g., by Babel) into React.createElement() calls.

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

   Wrap the expression in curly braces, e.g. {variable} or {2 + 2}. Only expressions are allowed, not statements like if or for.

6. Why must JSX elements return a single root element, and how can you avoid an extra DOM node?

   JSX expressions must have one parent element. To avoid adding an extra wrapper to the DOM, use a Fragment: <>...</> or <React.Fragment>...</React.Fragment>.

7. In JSX, what attribute names replace HTML's 'class' and 'for'?

   className replaces class, and htmlFor replaces for, because 'class' and 'for' are reserved words in JavaScript.

8. What is a React component?

   A reusable, independent piece of UI defined as a JavaScript function (or class) that returns JSX. Component names must start with a capital letter.

9. What are props in React?

   Props (properties) are read-only inputs passed from a parent component to a child component to configure or pass data. They make components reusable.

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

    A component must never modify its own props; data flows one way (parent to child). To change displayed data based on interaction, use state instead. This keeps components pure and predictable.

11. What is the special 'children' prop?

    props.children contains whatever JSX is nested between a component's opening and closing tags, allowing components to wrap and render arbitrary content.

12. What is the difference between props and state?

    Props are passed in from a parent and are read-only to the receiving component; state is private, managed within the component, and can change over time, triggering re-renders.

13. What does the useState hook return?

    An array with two elements: the current state value and a setter function to update it, e.g. const [count, setCount] = useState(0). The argument is the initial state.

14. Why should you update state using the functional updater form, e.g. setCount(prev => prev + 1)?

    Because state updates may be batched/asynchronous. Using the previous-state callback guarantees you update based on the latest value rather than a stale snapshot.

15. When updating object or array state, why must you create a new copy rather than mutating it?

    React compares state by reference to decide whether to re-render. Mutating in place keeps the same reference, so React may not re-render. Spread into a new object/array, e.g. setUser({...user, name: 'X'}).

16. What is a side effect in React, and which hook handles it?

    A side effect is work that reaches outside rendering—data fetching, subscriptions, timers, or manual DOM manipulation. The useEffect hook handles side effects.

17. What does the dependency array of useEffect control?

    It controls when the effect runs: [] runs once after the first render; [a, b] runs after the first render and whenever a or b changes; omitting the array runs the effect after every render.

18. What is the purpose of the cleanup function returned by useEffect?

    It runs before the effect re-runs and when the component unmounts, used to clean up subscriptions, timers, or listeners to prevent memory leaks.

19. What is the useRef hook used for?

    It returns a mutable ref object whose .current property persists across renders without causing re-renders. Common uses: accessing DOM nodes or storing mutable values.

See more Front-End Development with React flashcards →

Planning Front-End Development with React for Full Stack Web Development

Front-End Development with React (Full Stack Web Development) FAQ