Skip to content
WANCODE
BM

Your First React Component

14 minIntermediateReact

In this lesson

  • Write a function component that returns JSX
  • Explain why component names must start with a capital letter
  • Compose components by rendering one inside another
  • Use export default and import to move a component into its own file

The big idea

A component is a capitalised function that returns JSX. Write it once, render it like a tag, and put components inside other components to build bigger UIs.

In the last lesson you split a page into components. Now let's look closely at the rules that make a function a React component. There are only a few.

Greeting.jsx
export default function Greeting() {
  const hour = new Date().getHours();
  const word = hour < 12 ? "Selamat pagi" : "Hello";

  return (
    <section className="greeting">
      <h2>{word}!</h2>
      <p>Welcome to WANCode.</p>
    </section>
  );
}
  1. It's a normal JavaScript function. You can declare variables and run logic before the return.
  2. It returns JSX — one element (which can contain many children). Return null if it should show nothing.
  3. Its name starts with a capital letter: Greeting, not greeting.
  4. It's exported so other files can use it. export default marks the file's main export.

Why the capital letter matters

JSX uses the first letter to decide what a tag means. Lowercase tags like <div> or <profilecard> are treated as HTML elements. Capitalised tags like <ProfileCard /> mean "call my component function". Get it wrong and React quietly creates an unknown HTML element and prints a warning in the console.

Treated as an HTML tag

JSX
function profileCard() { … }

<profileCard />
// React: "<profileCard /> is using
// incorrect casing…"

Calls your component

JSX
function ProfileCard() { … }

<ProfileCard />
// React calls ProfileCard()
// and renders what it returns

Components inside components

Components can render other components — that's composition, and it's how every React app grows. Define each component at the top level of a file (not inside another component), then use it wherever you need it.

JSX
function Avatar() {
  return <img className="avatar" src="https://i.pravatar.cc/80" alt="Aina" />;
}

function ProfileCard() {
  return (
    <article className="card">
      <Avatar />
      <h2>Aina Rahman</h2>
    </article>
  );
}

One component per file

As apps grow, each main component usually lives in its own file. export default makes it the file's main export; import brings it in somewhere else. In a real project (for example one made with Vite), a small main.jsx file imports App and mounts it — WANCode does that step for you.

main.jsx
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);

For reference only: what mounts App in a typical React project.

Default vs named exports

export default function ProfileCard is imported without braces: import ProfileCard from "./ProfileCard.jsx". A named export (export function ProfileCard) needs braces: import { ProfileCard } from "./ProfileCard.jsx". Mixing them up gives you undefined instead of a component.

The preview shows the heading but no profile card. Open the Console tab: React is warning you about something.

Fix the component so the card renders. Keep the function and the tag that uses it in sync.

Checks

  • The profile card is on the page
  • It's rendered by a ProfileCard component
  • No casing warning in the console

Check understanding

Q1

You define function navBar() { … } and write <navBar />. What happens?

Q2

Which of these is a valid React component?

Q3

Card.jsx has export default function Card() {…}. How do you import it?

What you learned

  • A component is a function with a capitalised name that returns JSX (or null).
  • Lowercase tags are HTML; capitalised tags call your component.
  • Components render other components — that's composition.
  • export default + import X from "./X.jsx" lets each component live in its own file.
Preview

Console output from your code appears here.

Step 1 of 3