Your First Component

Now that the React for Beginners development server is running, you can write real React. A component is the atom of every React application: a function that returns a description of UI. This chapter builds one from scratch, composes it inside another, and lays down the naming rules that keep a codebase readable.

What a component is

Think of a component as a recipe that produces markup for the current inputs. It has a name, optionally receives inputs (props — chapter 5), and returns JSX. Because it is a function, you can call it, test it and reuse it anywhere the same piece of screen is needed.

• One function, one piece of UI — a navbar, a ticket row, a pricing card.
• Capitalised names — React treats <Greeting /> and <greeting /> differently; the capital tells JSX it is a component.
• No side effects — rendering should only describe UI; fetching or subscribing belongs in effects (chapter 12).

Your first component

Create src/components/Greeting.jsx and export the function. The export default line is what lets other files import it:

export default function Greeting() {
  return (
    <div className="card">
      <h1>Hello, React!</h1>
      <p>My first component renders this paragraph.</p>
    </div>
  );
}

Expected output: a card containing the heading Hello, React! and the paragraph below it, styled by any CSS you have applied to .card. Note the single wrapper <div>: until fragments arrive, a component returns one root element.

Using a component inside another

Components shine when nested. Import each one into the file where it is used — composition is just functions calling functions:

import Greeting from './components/Greeting.jsx';

function Toolbar() {
  return (
    <header>
      <nav>Scriptly</nav>
      <Greeting />
    </header>
  );
}

export default Toolbar;

Expected output: the page shows Scriptly navigation followed by the greeting card — two independent files working as one screen. Each component can be edited, styled and reasoned about without opening the other.

Imports, exports and files

React projects use the ES modules you may know from the modules chapter: every file is a module, and explicit imports connect them. Vite resolves relative paths (./components/Greeting.jsx) at dev time and rewrites them for production.

Keep one component per file when a component grows past a screenful of code — that is the natural point to split it.

Rendering your component

For a quick experiment, render straight from App.jsx and watch the dev server update:

import Greeting from './components/Greeting.jsx';

export default function App() {
  return (
    <main>
      <Greeting />
      <p>Everything else the page needs.</p>
    </main>
  );
}

Expected output: the greeting card followed by the paragraph. If nothing appears, the browser console usually reveals the classic causes: a lowercase tag, a missing import, or a typo in the file path.

How React sees your tree

When App renders, React builds a tree from the tags you nested: main contains Greeting (whose output is a card) and a p. That tree is what gets diffed on every update, and it is also what tools like the React Developer Extensions inspector display. Thinking in trees — rather than in files — will make conditional rendering and keys in later chapters feel obvious.

Common mistakes

• Lowercase component tags — <greeting /> tells React to look for an HTML element named greeting; use <Greeting />.
• Forgetting the import — a component defined in another file renders nothing until you import it (and Vite will flag the name as undefined).
• Returning sibling elements without a wrapper — two root elements at once throw a syntax error; wrap them in one <div> or later a fragment.
• Calling the component as a function — write <Greeting />, not {Greeting()}; the JSX form lets React manage it correctly.
• Mismatched file names — import Greeting from './greeting' fails on case-sensitive systems; keep names identical.

Practice checklist

1. Create Greeting.jsx exactly as shown and render it from App.jsx.
2. Add a second component called Footer and compose both inside a Page component.
3. Break the capitalisation on purpose (<greeting />), observe the result, then fix it.
4. Remove an import, read the browser console error, and restore it.
5. Nest a component three levels deep and draw the resulting tree on paper.

Your components render, but their markup deserves a closer look — JSX Explained is next.