Your first component

A component is the basic unit of a React app: a piece of the interface that has its own markup and its own behaviour. You have already written one, App, in earlier lessons. This lesson explains exactly what makes a function a component, how to use it, and how to move it into its own file.

A component is a function that returns JSX

Here is the smallest useful component:

function Welcome() {
  return <h1>Welcome to my site</h1>;
}

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

export default App;

Welcome to my site

Welcome is a component: an ordinary JavaScript function that returns JSX. App uses it by writing <Welcome /> as if it were an HTML tag. When React reaches that tag, it calls the Welcome function and puts whatever it returns into the page. Three rules are in play:

1. The name starts with a capital letter. This is a requirement, not a style choice.
2. It returns JSX (or null, to render nothing).
3. You use it as a tag: <Welcome />, never as Welcome(). React must call the function itself, so that it can attach state and manage updates.

Why the capital letter matters

JSX treats lower-case tags as built-in HTML elements and capitalised tags as references to a function or class in scope. Try this on purpose:

function welcome() {
  return <h1>Welcome to my site</h1>;
}

function App() {
  return <welcome />;
}

export default App;

CONSOLE
error: The tag <welcome> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

The page stays empty, and the console shows a warning that <welcome /> is an unrecognised tag, because React looked for an HTML element called welcome. (The editor's Console panel shows this warning under the result.) Rename the function to Welcome and it works. Use PascalCase for components (ProductCard, NavBar).

Reusing a component

The point of components is reuse. Write once, use many times:

function Badge() {
  return <span style={{ background: "#ffd45c", padding: "2px 8px", borderRadius: 10 }}>New</span>;
}

function App() {
  return (
    <ul>
      <li>React course <Badge /></li>
      <li>PHP course</li>
      <li>jQuery course <Badge /></li>
      <li>MySQL course <Badge /></li>
    </ul>
  );
}

export default App;

React course New
PHP course
jQuery course New
MySQL course New

Each <Badge /> is a separate instance. They run the same code, but each has its own state (once you add state in a later lesson). If you change the colour in Badge, every badge on the page changes: one edit, many results. This is the practical benefit that makes components worth the effort.

Components return one thing

A component can contain a lot, but it returns a single root: one element, or a fragment <>...</>. It can also return null, false or nothing visible:

function Hidden() {
  return null;          // renders nothing
}

function App() {
  return (
    <>
      <p>Before</p>
      <Hidden />
      <p>After</p>
    </>
  );
}

export default App;

Before
After

Where components live: files and exports

In a real project, each component usually gets its own file, named after it. src/Welcome.jsx:

export default function Welcome() {
  return <h1>Welcome to my site</h1>;
}

and src/App.jsx imports it:

import Welcome from "./Welcome.jsx";

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

Two kinds of export exist, and you will see both:

This course uses default exports for the main component of a file. Pick one style and keep it throughout a project. The import path must start with ./ or ../ for your own files, and must match the file name, including capitals. (In the live editor, everything is one file, so you write all the components together and only the last one, App, is exported.)

Never define a component inside another

This is a very common mistake, and it works at first, which makes it harder to spot:

// Wrong: Inner is created again on every render of Outer
function Outer() {
  function Inner() {
    return <p>Hello</p>;
  }
  return <Inner />;
}

Every time Outer runs, it creates a brand new Inner function. React sees a different component type each time, throws away the old one with all its state, and builds it again. The result is lost input text, restarted animations and slow pages. Define components at the top level of the file, side by side:

function Inner() {
  return <p>Hello</p>;
}

function Outer() {
  return <Inner />;
}

It is fine to define small variables or helper functions inside a component; only component functions used as tags must be at the top level.

Naming and size

Name a component after what it shows, not where it is used: ProductCard, not HomePageBox1. When a component grows long, or you find yourself copying chunks of JSX, that is a sign to extract a smaller component. The next lesson shows how to split a page into components and combine them. A good first guideline: if you can name a piece of the screen, it can be a component.

Common mistakes

• Starting a component name with a lower-case letter.
• Calling a component like a function ({Welcome()}) instead of using it as a tag (<Welcome />).
• Forgetting to return anything (a function body with no return renders nothing and logs a warning).
• Defining components inside other components.
• Forgetting export default, then getting "does not provide an export named default" when importing.
• Mismatched file name case: ./welcome.jsx is not ./Welcome.jsx on a case-sensitive server, although it may work on your computer.

Exercise

1. Make a Greeting component that returns an h2 saying "Hello!" and use it three times inside App.
2. Change the Badge text to "Hot" in one place and watch all instances change.
3. Rename Welcome to welcome and read the warning in the Console. Fix it again.
4. Create a component that returns null. Why might you write one like that on purpose? (Hint: think of conditional rendering, coming in a later lesson.)