Your First React Component | Learn Computer Academy

Your First Component

A component is a JavaScript function that returns JSX. That's the entire definition — everything else you'll learn in this section is what you can do with that one idea.

A Minimal Component

function Welcome() {
  return <h1>Hello, world!</h1>;
}

Capitalize component names — always

Component names must start with a capital letter — Welcome, not welcome. React uses this exact rule to tell a component apart from a regular HTML tag; <welcome /> would be treated as an (invalid) HTML element, not your component.

Using a Component

Once defined, a component is used like any other JSX tag:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

One Component Per File, Exported

Real React projects put each component in its own file, using the ES module export/import you met in the JavaScript Modules lesson:

// Welcome.jsx
export default function Welcome() {
  return <h1>Hello, world!</h1>;
}

// App.jsx
import Welcome from './Welcome';

export default function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Components Can Use Other Components

This is the whole idea in practice — small pieces combine into bigger ones:

function Header() {
  return <h1>My Site</h1>;
}

function Footer() {
  return <p>&copy; 2026</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Page content goes here.</p>
      <Footer />
    </div>
  );
}