React — The UI Wizard

Real-world analogy

What is it?

React is a JavaScript library for building user interfaces with components. Components are functions that return JSX (HTML-like syntax). State lets components remember data. Props pass data between components. React's virtual DOM makes updates fast.

Real-world relevance

React powers Facebook, Instagram, Netflix, Airbnb, and thousands more apps. It's the most popular frontend library with millions of developers worldwide.

Key points

• Components = Building Blocks — Everything in React is a component. A button, a form, a whole page — all are reusable pieces. Write once, use many times!
• JSX = HTML in JavaScript — Write HTML-like syntax directly in your JavaScript/TypeScript. React translates it to JavaScript. Feels natural and powerful!
• State = Memory — Components can remember things (like 'is this menu open?') using useState hooks. State changes → component re-renders.
• Props = Communication — Pass data DOWN from parent to child with props: <Button color='blue' />. Parent controls child behavior.
• Virtual DOM = Speed — React only updates the parts of the page that changed — not the whole thing. Super efficient! Compares new vs old (diffing), updates only diffs.
• Component Lifecycle — Components are born (mount), live (update), and die (unmount). useEffect runs code when mounted or when dependencies change.
• useContext — Sharing State Globally — Pass data through the component tree without prop drilling. Create a context (like a global mailbox), provide it at the top, and any child component can read it. Perfect for themes, auth state, and language settings.
• useReducer — Complex State Logic — Like useState but for complex state. Instead of setting values directly, you dispatch actions like {type: 'ADD_ITEM', payload: item}. Works like Redux in miniature — great when state changes depend on previous state.

Code example

// A simple React component — it's just a function! 🎯
import { useState } from 'react';

function LikeButton() {
  // State = component's memory
  const [likes, setLikes] = useState(0);
  const [emoji, setEmoji] = useState('👍');

  const handleClick = () => {
    setLikes(likes + 1);
    setEmoji(likes >= 10 ? '🔥' : likes >= 5 ? '❤️' : '👍');
  };

  return (
    <button onClick={handleClick}>
      {emoji} {likes} {likes === 1 ? 'like' : 'likes'}
    </button>
  );
}

// Using components together — like LEGO! 🧱
function App() {
  return (
    <div>
      <h1>My Awesome App</h1>
      <LikeButton />
      <LikeButton />  {/* Each has its own state! */}
    </div>
  );
}

// Props — pass data to components
interface ButtonProps {
  label: string;
  color: "blue" | "red" | "green";
  onClick: () => void;
}

function Button({ label, color, onClick }: ButtonProps) {
  return (
    <button
      style={{ background: color }}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

// Using with props
<Button label="Click me!" color="blue" onClick={() => console.log('clicked')} />

// useEffect — run code on mount/update
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // This runs when component mounts OR when userId changes
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);  // dependency array — re-run if userId changes

  if (loading) return <p>Loading...</p>;
  return <div>Hello {user.name}</div>;
}

Line-by-line walkthrough

1. 1. A simple React component — it's just a function! 🎯
2. 2. Importing required dependencies
3. 3.
4. 4. Declaring a function
5. 5. State = component's memory
6. 6. Declaring a variable
7. 7. Declaring a variable
8. 8.
9. 9. Declaring a variable
10. 10.
11. 11.
12. 12. Closing block
13. 13.
14. 14. Returning a value
15. 15.
16. 16.
17. 17.
18. 18. Closing expression
19. 19. Closing block
20. 20.
21. 21. Using components together — like LEGO! 🧱
22. 22. Declaring a function
23. 23. Returning a value
24. 24.
25. 25.
26. 26.
27. 27.
28. 28.
29. 29. Closing expression
30. 30. Closing block
31. 31.
32. 32. Props — pass data to components
33. 33. Defining an interface shape
34. 34.
35. 35.
36. 36.
37. 37. Closing block
38. 38.
39. 39. Declaring a function
40. 40. Returning a value
41. 41.
42. 42.
43. 43.
44. 44.
45. 45.
46. 46.
47. 47. Closing expression
48. 48. Closing block
49. 49.
50. 50. Using with props
51. 51.
52. 52.
53. 53. useEffect — run code on mount/update
54. 54. Declaring a function
55. 55. Declaring a variable
56. 56. Declaring a variable
57. 57.
58. 58.
59. 59. This runs when component mounts OR when userId changes
60. 60.
61. 61. Method chaining on the previous expression
62. 62. Method chaining on the previous expression
63. 63.
64. 64.
65. 65.
66. 66.
67. 67.
68. 68. Conditional check
69. 69. Returning a value
70. 70. Closing block

Spot the bug

function Counter() {
  let count = 0;
  const increment = () => { count += 1; };
  return <button onClick={increment}>{count}</button>;
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• React Official Documentation (React Official)
• React in 100 Seconds (Fireship)
• Thinking in React (React Official)