Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners entering React for the first time
• Beginners who already know JS/TS basics and want to build real UI
• Anyone who can write HTML/CSS but gets confused when UI needs to be dynamic

What you’ll learn

• How to think in components (not pages)
• JSX basics and how rendering really works
• Props, local state, and where each one should live

Why this topic matters

React is not just a library syntax; it is a UI architecture style. Once you understand components, props, and state clearly, building bigger interfaces becomes way more manageable.

If these fundamentals are shaky, later topics like hooks, routing, and state management will feel confusing.

Core concepts

Components

• Functions that return UI
• Reusable and composable building blocks

Think of components like LEGO blocks: small, focused pieces that can be combined into bigger UI.

Props

• Input data passed from parent to child
• Keep components predictable and reusable

Props are read-only from the child’s perspective. If you need to change data, that usually means state should live higher.

State

• Internal, changeable data inside components
• Triggers re-render when updated

Use state for UI that changes over time (toggle, counter, input value, loading flags).

Step-by-step walkthrough

Step 1 — Create your first component

Build one simple ProfileCard component with static content.

Step 2 — Pass dynamic props

Pass dynamic data with props and render multiple cards from array data.

Step 3 — Add interaction

Add one interaction using useState (like/follow count, toggle, or expand/collapse).

Target in this chapter: understand one-way data flow clearly.

Practical examples

Example 1 — Basic component

type GreetingProps = { name: string };

function Greeting({ name }: GreetingProps) {
  return <h2>Hello, {name}</h2>;
}

Expected output (when rendered with name="Nora"):

Hello, Nora

Example 2 — Local state

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Real case:

• This is the same state-update pattern used in likes, quantity controls, and many dashboard interactions.

Common mistakes and how to avoid them

• Mutating state directly -> always use setter functions (setState pattern)
• Putting too much logic in one component -> split into smaller focused components
• Confusing props and state -> props come from parent, state lives inside component
• Lifting state too late -> move shared state up when siblings need the same data

Mini Project

• Build a profile card list with:
• reusable card component,
• typed props,
• one local interaction (follow/like/toggle details).

Bonus:

• Add a parent component that tracks total followed profiles.

Quick practice

• Create two small components and compose them
• Pass typed props to child component
• Add one stateful interaction with useState
• Explain in one sentence: when should data be props vs local state?

Key takeaways

• Components are the base unit of React architecture
• Props and state are the core of React data flow
• Small, focused components are easier to scale and maintain

Next step

Continue to [10. React Hooks and Side Effects]