The Odin Project React Syllabus

React syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React in The Odin Project, not a summary of it.

1. 1

   Getting Started With React

   7 topics

   • Introduction To React
   • Setting Up A React Environment
   • React Components
   • What Is JSX?
   • Passing Data Between Components
   • Rendering Techniques
   • Keys In React
2. 2

   States And Effects

   5 topics

   • Introduction To State
   • More On State
   • How To Deal With Side Effects
   • Project: CV Application
   • Project: Memory Card
3. 3

   Class Components

   2 topics

   • Class Based Components
   • Component Lifecycle Methods
4. 4

   React Testing

   2 topics

   • Introduction To React Testing
   • Mocking Callbacks And Components
5. 5

   The React Ecosystem

   5 topics

   • Type Checking With PropTypes
   • React Router
   • Fetching Data In React
   • Styling React Applications
   • Project: Shopping Cart
6. 6

   More React Concepts

   3 topics

   • Managing State With The Context API
   • Reducing State
   • Refs And Memoization

React flashcards for The Odin Project

22 of 49 cards from the React deck — real questions with worked answers.

1. What is React?

   A JavaScript library for building user interfaces out of reusable components. It uses a declarative approach: you describe what the UI should look like for a given state, and React updates the DOM to match.

2. What is a React component?

   A reusable, self-contained piece of UI. In modern React it is a JavaScript function whose name starts with a capital letter and that returns JSX describing what should appear on screen.

3. Why must React component names start with a capital letter?

   JSX uses capitalization to distinguish components from HTML elements: lowercase tags (e.g. <div>) are treated as built-in DOM elements, while capitalized tags (e.g. <MyComponent>) are treated as user-defined components.

4. What tool does The Odin Project recommend for scaffolding a new React project, and what command creates one?

   Vite. Run: npm create vite@latest my-app -- --template react, then cd into the folder, run npm install, and start the dev server with npm run dev.

5. In a Vite React project, what are the roles of index.html, main.jsx, and App.jsx?

   index.html is the single HTML page containing a root div; main.jsx grabs that root element, creates a React root with createRoot, and renders the app into it; App.jsx is the top-level application component.

6. What is JSX?

   A syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript files. It is syntactic sugar for React.createElement calls and must be transpiled (e.g. by Babel or Vite) before browsers can run it.

7. List the three core rules of JSX.

   1) Return a single root element (wrap siblings in a parent or a Fragment <>...</>). 2) Explicitly close all tags, including self-closing ones like <img />. 3) Use camelCase for most attributes (className, onClick, htmlFor) since JSX attributes become JavaScript object keys.

8. Why do you write className instead of class in JSX?

   JSX is compiled to JavaScript, where 'class' is a reserved keyword. Attribute names become keys on a props object, so React uses the DOM property name className instead.

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

   Wrap it in curly braces, e.g. <h1>{user.name}</h1>. Curly braces work as text inside tags or as attribute values; double curlies like style={{ color: 'red' }} are just an object literal inside JSX braces.

10. What is a React Fragment and why is it used?

    A wrapper (<React.Fragment> or the shorthand <>...</>) that lets you group multiple sibling elements without adding an extra node to the DOM, satisfying JSX's single-root-element rule.

11. What are props in React?

    Read-only inputs passed from a parent component to a child, received as a single object argument (commonly destructured). They let parents configure children and are the primary way data flows between components.

12. What is one-way (unidirectional) data flow in React?

    Data is passed only from parent to child via props. A child cannot directly modify its parent's data; to communicate upward, the parent passes a callback function as a prop that the child invokes.

13. How does a child component send data or events back to its parent?

    The parent defines a function (often a state setter or handler) and passes it to the child as a prop; the child calls that callback, optionally with arguments, which runs the function in the parent's scope.

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

    Use default values while destructuring the props parameter, e.g. function Button({ text = 'Click me' }) { ... }. The default applies when the prop is undefined.

15. What is the 'children' prop?

    A special prop containing whatever is placed between a component's opening and closing tags, e.g. <Card><p>Hi</p></Card>. It enables composition, letting components wrap arbitrary content.

16. How do you render a list of items in JSX?

    Call the array's map method to transform each item into a JSX element, e.g. {items.map(item => <li key={item.id}>{item.name}</li>)}, giving each element a unique key prop.

17. What are the two main ways to conditionally render JSX?

    1) The ternary operator: {isDone ? <Done /> : <Pending />}. 2) The logical AND operator: {isVisible && <Modal />}. You can also use if statements outside the JSX or return null to render nothing.

18. What is a common pitfall of using && for conditional rendering with numbers?

    If the left side is 0 (e.g. {count && <List />}), React renders the 0 itself rather than nothing, because 0 is falsy but still a renderable value. Use an explicit comparison like count > 0 && ... instead.

19. What happens when a component returns null?

    React renders nothing for that component. It is a valid way to conditionally hide a component's output entirely.

20. What is the purpose of the key prop in React lists?

    Keys uniquely identify sibling elements so React's diffing algorithm can tell which items were added, removed, or reordered, allowing it to update the DOM efficiently and preserve component state correctly.

21. Why is using an array index as a key considered an anti-pattern?

    If the list is reordered, filtered, or items are inserted/removed, indexes shift so keys no longer identify the same items. React then mismatches state and DOM nodes, causing bugs and unnecessary re-renders. Indexes are acceptable only for static lists that never change.

22. What are the rules for choosing good keys?

    Keys must be unique among siblings and stable across renders — ideally IDs from your data or database. Do not generate keys during render (e.g. key={crypto.randomUUID()} inline), because a new key every render forces React to recreate the element and lose its state.

See more React flashcards →

Planning React for The Odin Project

React (The Odin Project) FAQ