Your First Component

Components are the fundamental building blocks of every React application. A component is a reusable piece of UI — it combines markup, styles, and behavior into a single unit that you can compose with other components to build anything from a button to an entire page.

At its core, a React component is just a JavaScript function that returns JSX. That is the whole secret. React adds a handful of rules on top of that, but the mental model never gets more complicated than "a function that describes a piece of UI."

Creating Your First Component

Let's write the simplest possible component — a greeting message:

TSX

// Greeting.tsx
export default function Greeting() {
  return <h1>Hello, world!</h1>
}

Three things happened here:

Define a function — Greeting is an ordinary JavaScript function
Return JSX — the function returns HTML-like syntax that React knows how to render
Export it — export default makes the component available for other files to import and use

The PascalCase Naming Rule

Component names must start with a capital letter. This is not a style choice — it is how React tells components apart from plain HTML tags. When React sees <greeting /> (lowercase) it treats it as an unknown HTML element. When it sees <Greeting /> (uppercase) it knows to call your function.

TSX

// ✗ WRONG — lowercase is treated as an HTML tag, not a component
function greeting() {
  return <h1>Hello</h1>
}

// ✓ CORRECT — PascalCase signals "this is a component"
function Greeting() {
  return <h1>Hello</h1>
}

// ✓ Multi-word names also use PascalCase
function UserProfileCard() {
  return <div>Profile</div>
}

Warning

If your component renders nothing or you see a warning about an unknown HTML element, the first thing to check is the component name. lowercase = HTML tag; PascalCase = React component.

Using a Component in JSX

Once a component is defined and exported, you use it in JSX exactly like an HTML tag — just write its name between angle brackets:

TSX

// App.tsx
import Greeting from './Greeting'

export default function App() {
  return (
    <div>
      <Greeting />      {/* use it once */}
      <Greeting />      {/* use it again — each is independent */}
      <Greeting />      {/* and again */}
    </div>
  )
}

Notice that <Greeting /> uses the self-closing form (/>) because it has no children. You can also write <Greeting></Greeting> — they are identical.

A Complete Step-by-Step Example

Let's build a small UI from scratch to see how components fit together. We want a page that greets a user by name:

TSX

// Step 1: Create a component that accepts a name
// Greeting.tsx
interface GreetingProps {
  name: string
}

export default function Greeting({ name }: GreetingProps) {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  )
}

TSX

// Step 2: Use the component in App
// App.tsx
import Greeting from './Greeting'

export default function App() {
  return (
    <main>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </main>
  )
}

The name property passed to <Greeting> is called a prop. Props are how a parent component passes data down to a child component. The two <Greeting> elements above are completely independent — they render their own JSX based on the name prop each received.

Components Can Render Other Components

One of the most powerful things about React is that components compose naturally. A component can render any number of other components, which in turn render other components, building up a tree of UI:

TSX

function Avatar() {
  return <img src="/avatar.png" alt="User avatar" />
}

function UserInfo() {
  return (
    <div>
      <Avatar />
      <span>Jane Doe</span>
    </div>
  )
}

function ProfileCard() {
  return (
    <section className="card">
      <UserInfo />
      <p>Full-stack developer</p>
    </section>
  )
}

// ProfileCard renders UserInfo which renders Avatar.
// Each lives in its own file and is tested independently.

Note

Nesting components inside the return value is fine. Nesting component definitions inside other component definitions is not — always define components at the top level of a module, never inside another component function. Defining a component inside another creates a new function reference on every render, which breaks React's reconciliation.

Components Can Contain Logic

The function body above the return statement is just JavaScript — you can put any logic there: compute values, format dates, filter arrays, or prepare the data that JSX will display:

TSX

function WelcomeBanner({ joinedAt }: { joinedAt: Date }) {
  const isNewUser = Date.now() - joinedAt.getTime() < 7 * 24 * 60 * 60 * 1000
  const greeting = isNewUser ? 'Welcome aboard!' : 'Welcome back!'
  const formattedDate = joinedAt.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })

  return (
    <div>
      <h2>{greeting}</h2>
      <p>Member since {formattedDate}</p>
    </div>
  )
}

Tip

Keep the logic in the function body lightweight and side-effect-free. Computations are fine; network requests, subscriptions, and timers belong in `useEffect`. A component's body runs synchronously on every render — anything expensive will slow down your UI.

What a Component Is Not

A component is not a class (though class components exist — they are a legacy pattern covered separately)
A component is not a template string — JSX is compiled to JavaScript function calls, not HTML strings
A component is not a singleton — every <MyComponent /> in JSX creates an independent instance with its own state
A component's return value is not actual DOM — it is a lightweight JavaScript description (virtual DOM) that React uses to update the real DOM efficiently

Summary

A component is a JavaScript function that returns JSX
Component names must be PascalCase
Use a component like an HTML tag: <MyComponent />
Components accept data through props
Components can render other components, building a tree
Keep the function body pure — no side effects during render