codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 15: Code Review and Understanding

User Story: As a developer, I want to understand every part of my code so that I can explain it and build on it.

What You’ll Do

Review your complete code and make sure you understand each concept.

Key Concepts to Understand

React Hooks - useState

const [value, setValue] = useState(initialValue)

• What it does: Creates a state variable that persists between renders
• Why we need it: Regular variables reset on every render
• How to update: Always use the setter function (setValue)

Event Handling

<div onClick={handleClick}>Click me</div>

• onClick: Attaches event listener for clicks
• event parameter: Contains information about the click event
• event.stopPropagation(): Prevents click from bubbling to parent

Dynamic Styling

const style = { width: "100px", backgroundColor: "red" }
<div style={style}>Styled</div>

• Inline styles: JavaScript objects with CSS properties
• camelCase: CSS properties use camelCase (backgroundColor not background-color)
• Units: Values need units as strings (“100px”)

Conditional Rendering

{condition && <Component />}           // Render OR nothing
{condition ? <CompA /> : <CompB />}    // Render A OR B

Random Numbers

Math.floor(Math.random() * (max - min) + min)

• Math.random(): Returns decimal 0-1
• Multiply by range: Scale to desired range
• Add minimum: Shift to starting point
• Math.floor(): Round down to integer

✅ Check

Can you answer these questions?

1. Why do we use useState instead of regular variables?

Answer

Regular variables reset on every render. State persists and triggers re-renders.

</details>

1. Why do we need event.stopPropagation() in clickTarget?

Answer

To prevent the click from bubbling up to the parent and triggering missTarget.

</details>

1. How does the ternary operator work in JSX?

Answer

It evaluates a condition and renders one component if true, another if false.

</details>

1. Why are styles in camelCase instead of kebab-case?

Answer

Because they're JavaScript object properties, not CSS. JavaScript uses camelCase.

</details>

1. How does randomNumber(0, 400) work?

Answer

It generates a random integer from 0 to 399 (inclusive).

</details>

---