🟢 Basics – React + Next.js Foundation · Lesson 04

React Basics: JSX & Components

What is a component?

A component is a reusable piece of UI — a header, a course card, a button. In React, a component is simply a JavaScript function that returns JSX. You write it once and use it as a tag as many times as you like.

JSX – app/page.jsx

// A component is just a function that returns JSX
function Welcome() {
  return <h1>Namaste, student!</h1>
}

export default function Page() {
  return (
    <main>
      <Welcome />
      <Welcome />
    </main>
  )
}

Namaste, student! Namaste, student!

What is JSX?

JSX lets you write HTML-like markup inside JavaScript. During the build it is converted into normal JavaScript calls that create elements.

How JSX becomes real HTML

JSX rules (very important)

JSX – the 6 rules in one example

export default function Page() {
  return (
    <>                                    {/* 1. one parent (Fragment) */}
      <h1 className="title">Courses</h1>  {/* 2. className, not class */}
      <label htmlFor="q">Search</label>   {/* 3. htmlFor, not for */}
      <input id="q" />                    {/* 4. close every tag */}
      <img src="/logo.png" alt="Logo" />
      <p style={{ color: 'green', fontSize: 18 }}>Open now</p> {/* 5. style is an object */}
      <button onClick={() => alert('Hi')}>Click</button>      {/* 6. camelCase events */}
    </>
  )
}

Return one parent element — wrap siblings in <>...</> (a Fragment) or a <div>.
Use className instead of class.
Use htmlFor instead of for on labels.
Close every tag: <img />, <br />, <input />.
style takes a JavaScript object with camelCase keys: {{ fontSize: 18 }}.
Events are camelCase and take a function: onClick, onChange.

💡 In Next.js, onClick and other events only work in Client Components ('use client'). You will learn this in the Server vs Client lesson — for now just note it.

JavaScript inside JSX with { }

Curly braces { } open a "JavaScript window" inside JSX. Put any expression there: variables, maths, function calls, the ternary operator.

JSX

export default function Page() {
  const name = 'Aman'
  const marks = [78, 92, 85]
  const total = marks.reduce((a, b) => a + b, 0)

  return (
    <div>
      <p>Student: {name.toUpperCase()}</p>
      <p>Total: {total} / 300</p>
      <p>Percentage: {((total / 300) * 100).toFixed(1)}%</p>
      <p>Result: {total >= 99 ? 'Pass ✅' : 'Fail ❌'}</p>
    </div>
  )
}

Student: AMAN Total: 255 / 300 Percentage: 85.0% Result: Pass ✅

You cannot put statements such as if or for directly inside { }. Use the ternary ? : or && instead, and .map() for loops (covered in the Lists lesson).

Make and reuse components in separate files

JSX – components/Header.jsx, components/Footer.jsx, app/page.jsx

// components/Header.jsx
export default function Header() {
  return (
    <header style={{ padding: 16, background: '#4f46e5', color: '#fff' }}>
      <strong>EduSite</strong>
    </header>
  )
}

// components/Footer.jsx
export default function Footer() {
  return <footer style={{ padding: 16 }}>© 2026 EduSite</footer>
}

// app/page.jsx
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default function HomePage() {
  return (
    <>
      <Header />
      <main style={{ padding: 16 }}>
        <h1>Learn coding the easy way</h1>
      </main>
      <Footer />
    </>
  )
}

Component tree

Pages are built by putting components inside components. React sees your page as a tree:

The EduSite home page as a component tree

Default vs named export

Default export (export default function Header) — one main thing per file; import with any name: import Header from ....
Named export — several things per file; import with the exact name in braces.

JSX

// components/Buttons.jsx
export function PrimaryButton({ children }) { return <button className="btn">{children}</button> }
export function LinkButton({ children })    { return <button className="btn light">{children}</button> }

// usage — named exports use curly braces
import { PrimaryButton, LinkButton } from '@/components/Buttons'

💡 Next.js special files (page.jsx, layout.jsx) must use a default export.

Common mistakes

function header() lowercase name → nothing appears. Use Header.
Returning two elements side by side without a parent → "Adjacent JSX elements must be wrapped".
Writing style="color:red" → must be style={{ color: 'red' }}.
Forgetting export default in page.jsx → Next.js says the page has no default export.

Summary

A component is a function that returns JSX; names start with a capital letter.
JSX rules: one parent, className, close tags, style object, camelCase events.
{ } runs JavaScript expressions inside JSX.
Keep reusable components in components/ and import them with @/.

✅ Practice

Create components/CourseBadge.jsx that shows a green pill with the text "New". Use it three times on the home page.

Frequently Asked Questions

Why must component names start with a capital letter?

React treats lowercase tags like

as HTML elements and capitalised tags like

as your components. A lowercase component name would be rendered as an unknown HTML tag.

Why className instead of class?

JSX is JavaScript, and class is a reserved word in JavaScript. React uses className, and it becomes class in the final HTML.

What is a Fragment (<>...)?

A component must return one parent element. A Fragment groups several elements without adding an extra

to the page.

Is JSX the same as HTML?

It looks similar but it is JavaScript syntax. It is converted to React function calls during the build, so some rules differ: className, htmlFor, self-closing tags and camelCase attributes.

← Next.js Tutorial

React Basics: JSX & Components

What is a component?

What is JSX?

JSX rules (very important)

JavaScript inside JSX with { }

Make and reuse components in separate files

Component tree

Default vs named export

Common mistakes

Summary

Frequently Asked Questions

How was this lesson?

Reviews from readers

Learn with video lessons in easy Hindi