Episode 2 — React Frontend Architecture NextJS / 2.1 — Introduction to React

2.1 — Exercise Questions: Introduction to React

Practice makes permanent. Work through these questions after studying each sub-topic.

How to Use This Material

  1. Attempt every question before looking at the sub-topic files for answers.
  2. Write code by hand first (on paper or a blank editor) — then verify by running it.
  3. Predict the output before running any code snippets.
  4. Explain your reasoning out loud — if you can't explain it, you don't fully understand it.
  5. Mark questions you struggled with and revisit them after 48 hours.

2.1.a — Why React Exists (Q1–Q8)

Q1. Name three specific problems that developers faced when building large-scale UIs with vanilla JavaScript and direct DOM manipulation.

Q2. What was the "Facebook notification bug" that motivated React's creation? Why couldn't existing approaches solve it reliably?

Q3. Explain the formula UI = f(state) in your own words. What does each part represent?

Q4. List three principles of React's core philosophy and give a one-sentence explanation for each.

Q5. What is "unidirectional data flow" and why is it easier to debug than two-way data binding?

Q6. Name two scenarios where React would NOT be the best choice for a web project. Explain why.

Q7. Trace React's evolution through these milestones: class components → hooks → server components. What problem did each transition solve?

Q8. Compare React with one other UI library/framework (Vue, Angular, or Svelte). List two advantages and two disadvantages of React relative to your chosen comparison.

2.1.b — Declarative vs Imperative UI (Q9–Q16)

Q9. Write a short imperative JavaScript snippet (5-10 lines) that creates a <ul> with three <li> items and appends it to the body. Then write the declarative React equivalent.

Q10. Predict the output: You have a vanilla JS function that does document.getElementById('count').textContent = count after incrementing count. If count starts at 0 and the function is called 3 times rapidly, what value will display? Now explain how React's declarative model handles the same scenario differently.

Q11. Give an example of declarative code that is NOT React — from SQL, CSS, or HTML.

Q12. A developer writes this React code:

function Counter() {
  let count = 0;
  function handleClick() {
    count++;
    document.getElementById('display').textContent = count;
  }
  return <p id="display" onClick={handleClick}>{count}</p>;
}

Identify the imperative mistake and rewrite it declaratively.

Q13. List five reasons why declarative UI is generally preferred over imperative UI for complex applications.

Q14. Name three situations where you might still need imperative code in a React application.

Q15. Explain how React's Virtual DOM enables the declarative programming model. What would happen if React directly manipulated the real DOM on every state change?

Q16. Compare the debugging experience: a bug in an imperative jQuery event handler chain vs. a bug in a declarative React component. Which is easier to trace and why?

2.1.c — Single Page Applications (Q17–Q23)

Q17. Define "Single Page Application" in one sentence. What is the single page?

Q18. Draw a diagram (or describe in words) showing the request/response flow of a traditional multi-page application vs. a SPA. Where does the HTML come from in each case?

Q19. List three advantages and three disadvantages of SPAs compared to traditional server-rendered applications.

Q20. Explain what "client-side routing" means. How does the URL change in a SPA if no new page is loaded from the server?

Q21. What is the "blank page problem" (or "white flash") in SPAs? What is its impact on user experience and SEO?

Q22. Name two techniques or technologies that address SPA SEO challenges.

Q23. A product manager asks: "Should our company blog be a SPA or a traditional multi-page site?" What would you recommend and why?

2.1.d — Real DOM vs Virtual DOM (Q24–Q31)

Q24. What is the DOM? Explain it to someone who has never heard of it.

Q25. Why is directly manipulating the real DOM slow? Name the specific browser processes that get triggered.

Q26. Explain the Virtual DOM in three steps: what it is, how it works, and why it's faster than direct DOM manipulation.

Q27. What is "reconciliation" in React? Describe the diffing algorithm at a high level.

Q28. Predict what happens: A React component renders a list of 1000 items. One item's text changes. Does React re-render all 1000 DOM nodes or just 1? Explain the mechanism.

Q29. What is "batching" in React's rendering? Give an example where batching improves performance.

Q30. Some developers claim "the Virtual DOM is not actually faster than optimized direct DOM manipulation." Is this true? Explain the nuance.

Q31. Compare React's Virtual DOM approach with Svelte's compile-time approach. What are the trade-offs?

2.1.e — Setting Up React with Vite (Q32–Q38)

Q32. What is Vite and why is it preferred over Create React App (CRA) in 2025+?

Q33. Write the exact terminal command to create a new React project with Vite using JavaScript (not TypeScript).

Q34. After running npm create vite@latest, list the 3 commands you need to run to start the development server.

Q35. What is the purpose of the vite.config.js file? Name two settings you might customize.

Q36. What is Hot Module Replacement (HMR) and how does it improve the development experience compared to a full page reload?

Q37. Explain the difference between dependencies and devDependencies in package.json. Which category does Vite belong to?

Q38. You run npm run dev and get an error "Port 5173 is already in use." Name two ways to resolve this.

2.1.f — Project Structure Breakdown (Q39–Q44)

Q39. For a default Vite React project, explain the purpose of each:

  • index.html
  • src/main.jsx
  • src/App.jsx
  • public/
  • node_modules/
  • package.json

Q40. Why is index.html at the root of a Vite project (not in public/)? How does this differ from CRA?

Q41. What does ReactDOM.createRoot(document.getElementById('root')).render(<App />) do? Break down each part.

Q42. Explain the purpose of the public/ folder. When would you put a file in public/ vs src/assets/?

Q43. A team member adds a 50MB video file to the src/ folder. Why is this a bad idea? Where should it go instead?

Q44. Create a recommended folder structure for a medium-sized React project (10-20 components, 5 pages, shared utilities). Draw it as a tree.

2.1.g — JSX Syntax Rules (Q45–Q52)

Q45. What is JSX? Is it HTML? Is it JavaScript? Explain what it actually is.

Q46. Why must JSX expressions have a single parent element? What happens if you return two sibling elements without a wrapper?

Q47. Name three ways to wrap multiple JSX elements into a single parent. Which is preferred and why?

Q48. Fix this broken JSX:

function Profile() {
  return (
    <div class="profile">
      <label for="name">Name:</label>
      <input id="name" tabindex="1" />
      <p style="color: red; font-size: 14px">Error</p>
    </div>
  );
}

Q49. Explain the difference between className and class in React. Why does React use className?

Q50. Write a JSX expression that conditionally renders a <p> tag only if a variable isLoggedIn is true. Show two different approaches.

Q51. How do you embed a JavaScript expression inside JSX? Give three examples: a variable, a function call, and a ternary expression.

Q52. What does JSX compile to? Write the React.createElement equivalent of <h1 className="title">Hello</h1>.

2.1.h — Component-Based Architecture (Q53–Q60)

Q53. Define "component-based architecture" in your own words. Why is it the dominant pattern in modern UI development?

Q54. Draw a component tree for a simple blog application with: a header (logo + nav), a main area with a list of blog posts (each post has a title, author, date, and excerpt), and a footer.

Q55. Explain the difference between presentational and container components. Give an example of each.

Q56. You have a component that is 250 lines long. It fetches data, manages 5 state variables, handles form validation, and renders a complex form with 10 fields. Apply the "when to split" rules to break it into smaller components. List the components you'd create.

Q57. What is the "prop drilling problem"? Describe a scenario where it occurs and name two solutions.

Q58. Explain composition vs inheritance in React. Why does React favor composition? Give a code example.

Q59. What is the difference between a "type-based" and "feature-based" file organization strategy? Which would you recommend for a team of 8 developers building a large SaaS application?

Q60. Design a reusable Button component that supports:

  • 4 variants (primary, secondary, ghost, danger)
  • 3 sizes (small, medium, large)
  • Loading state
  • Disabled state
  • Left and right icons

Write the function signature with props and the basic JSX structure.

Total: 60 questions covering all 8 sub-topics of Introduction to React.