Chapter 2 — Components & JSX

🎯 Goal

Learn how to build reusable UI pieces (components) using JSX—the foundation of every Next.js app.

First, one new idea (2 minutes)

Imagine you're building a LEGO house.

Instead of building every window from scratch, you create one window and reuse it.

A component is exactly that—a reusable piece of UI.

Example:

function Button() {
  return <button>Save</button>;
}

Whenever you write:

<Button />

React displays:

<button>Save</button>

New Syntax

You'll see this syntax a lot:

<Button />

This is called using a component.

Notice:

HTML tags → lowercase (<button>, <div>)
Components → Capitalized (<Button />, <Navbar />)

That's one of the most common beginner mistakes.

MCQs

Q1

Which of these is a valid React component name?

(A) button
(B) navbar
(C) Navbar
(D) header-component

✅ Answer: (C)

Mini Explanation:
React components should start with a capital letter.

Q2

Which syntax is used to render a component?

(A) <Navbar></Navbar> only

(B) <Navbar />

(C) Navbar()

(D) {Navbar}

✅ Answer: (B)

Mini Explanation:
<Navbar /> is the standard JSX syntax. (<Navbar></Navbar> also works, but when there are no children, the self-closing form is preferred.)

Q3

Which tag is treated as an HTML element?

(A) <Button />

(B) <Navbar />

(C) <button>

(D) <Card />

✅ Answer: (C)

Mini Explanation:
Lowercase tags are HTML.
Capitalized tags are React components.

Q4

What will this display?

export default function Home() {
  return <h1>Welcome</h1>;
}

(A) Welcome

(B) Error

(C) Blank page

(D) undefined

✅ Answer: (A)

Mini Explanation:
The component returns an <h1>, so the page shows Welcome.

Q5

Which file usually contains reusable UI?

(A) public

(B) components

(C) node_modules

(D) styles

✅ Answer: (B)

Mini Explanation:
Most Next.js projects keep reusable components inside the components folder.

Q6

What happens here?

function Button() {
  return <button>Save</button>;
}

export default function Home() {
  return <Button />;
}

(A) Save button appears

(B) Error

(C) Nothing

(D) undefined

✅ Answer: (A)

Mini Explanation:
Home renders the Button component.

Q7

Find the bug.

function button() {
  return <button>Save</button>;
}

export default function Home() {
  return <button />;
}

(A) No bug

(B) Component name should start with a capital letter

(C) Button cannot return HTML

(D) Missing semicolon

✅ Answer: (B)

Mini Explanation:
It should be:

function Button() {
  return <button>Save</button>;
}

Q8

Which code is better?

Option A

export default function Home() {
  return (
    <>
      <button>Save</button>
      <button>Cancel</button>
      <button>Delete</button>
    </>
  );
}

Option B

function Button() {
  return <button>Save</button>;
}

export default function Home() {
  return <Button />;
}

(A) Option A

(B) Option B

(C) Both are always equally good

(D) Neither

✅ Answer: (B)

Mini Explanation:
Reusable components make your code easier to maintain.

Q9

Predict the output.

function Hello() {
  return <h2>Hello</h2>;
}

export default function Home() {
  return (
    <>
      <Hello />
      <Hello />
    </>
  );
}

(A) Hello

(B) Hello Hello

(C) Error

(D) Blank page

✅ Answer: (B)

Mini Explanation:
Each <Hello /> renders once.

Q10

Find the bug.

function Navbar() {
  return <h1>Logo</h1>;
}

export default function Home() {
  return <navbar />;
}

(A) No bug

(B) Should be <Navbar />

(C) Should return <div>

(D) Missing export

✅ Answer: (B)

Mini Explanation:
Lowercase names are treated as HTML tags, not components.

Q11

What will appear?

function Card() {
  return <p>React</p>;
}

export default function Home() {
  return (
    <>
      <h1>Course</h1>
      <Card />
    </>
  );
}

(A) Course

(B) React

(C) Course then React

(D) Error

✅ Answer: (C)

Mini Explanation:
Both elements are rendered in order.

Q12

Find the bug.

function Card() {
}

(A) Missing return statement

(B) Missing import

(C) Missing export

(D) No bug

✅ Answer: (A)

Mini Explanation:
Without return, nothing is rendered.

Q13

Predict the output.

function Welcome() {
  return <h2>Hi</h2>;
}

export default function Home() {
  return (
    <>
      <Welcome />
      <h1>Everyone</h1>
    </>
  );
}

(A) Hi Everyone

(B) Everyone Hi

(C) Error

(D) Only Hi

✅ Answer: (A)

Mini Explanation:
JSX renders from top to bottom.

Q14

Which is the better file structure?

(A)

app/
  page.js
  Navbar.js
  Button.js
  Card.js

(B)

app/
  page.js

components/
  Navbar.js
  Button.js
  Card.js

(C) Both are equally preferred

(D) Put everything in public

✅ Answer: (B)

Mini Explanation:
Keeping reusable components in a separate components folder keeps projects organized.

Q15

How many times is Button rendered?

function Button() {
  return <button>Buy</button>;
}

export default function Home() {
  return (
    <>
      <Button />
      <Button />
      <Button />
    </>
  );
}

(A) 1

(B) 2

(C) 3

(D) 0

✅ Answer: (C)

Mini Explanation:
Every <Button /> creates one button.

Q16

Which statement is true?

(A) Components help reuse UI.

(B) Every page should copy and paste its HTML.

(C) Components can only be used once.

(D) Components only work with buttons.

✅ Answer: (A)

Mini Explanation:
Reusability is one of the biggest advantages of React.

Q17

Predict the output.

function Title() {
  return <h1>Shop</h1>;
}

export default function Home() {
  return (
    <>
      <Title />
      <Title />
      <Title />
    </>
  );
}

(A) Shop

(B) Shop Shop

(C) Shop Shop Shop

(D) Error

✅ Answer: (C)

Mini Explanation:
The component is rendered three times.

Q18 (Hard)

Which approach is better for a website with 100 pages using the same navigation bar?

(A) Copy the navbar into all 100 pages.

(B) Create one Navbar component and reuse it.

(C) Write the navbar inside public.

(D) Create 100 different navbars.

✅ Answer: (B)

Mini Explanation:
One reusable component means one place to update. If you change the logo or add a menu item, every page gets the update automatically.

⭐ Chapter Summary (The 20% You'll Use Every Day)

Remember these four patterns:

Capitalize component names.

function Navbar() {}

Use components like HTML tags.

<Navbar />

Keep reusable UI in components/.
If you repeat UI, make it a component instead of copying and pasting.

If you remember just these four ideas, you'll understand a huge part of how React and Next.js apps are built.

🎯 Mini Coding Challenge

Create a project with this structure:

app/
  page.js

components/
  Header.js
  Footer.js

Requirements:

Header should display My Blog.
Render both components inside app/page.js.

Bonus: Add another component called Hero that displays:

Learn Next.js
Build Real Projects

🚀 Mini Real-World Project

Personal Portfolio Homepage

Build this page using only components.

Home Page
│
├── Header
├── Hero
├── Skills
├── Projects
└── Footer

Each section should be its own component stored in the components folder.

Rule: Do not copy HTML between sections. If something can become a reusable component, make it one.

Next Chapter Preview

When you reply "ok", we'll cover Props—the feature that lets components become dynamic instead of always displaying the same content. This is one of the biggest "aha!" moments in React and is used constantly in real-world Next.js projects.