Your First Component

Everything in React is a component. A component is a JavaScript function that returns JSX — a description of what to render. That is the complete definition. There is nothing else.

Writing a function component

Open src/App.jsx and replace everything in it with this:

function App() {
  return (
    <div>
      <h1>ZeroBudget</h1>
      <p>Give every dollar a job.</p>
    </div>
  );
}

export default App;

Save it. The browser updates immediately. You just wrote a React component.

A few things to notice:

• The function name starts with a capital letter (App, not app). React uses this to distinguish your components from built-in HTML elements. Capital letter = component. Lowercase = HTML element.
• The function returns what looks like HTML but is actually JSX. Vite transforms it before it reaches the browser.
• The JSX is wrapped in a single <div>. A component can only return one root element.

Returning multiple elements

If you do not want an extra <div> in the DOM, use a fragment — an empty tag that groups elements without adding a node:

function App() {
  return (
    <>
      <h1>ZeroBudget</h1>
      <p>Give every dollar a job.</p>
    </>
  );
}

<> and </> are shorthand for <React.Fragment>. Use them whenever you need to return multiple elements but do not want a wrapper div.

Creating a second component

Components can render other components. Create a new file src/components/Header.jsx:

function Header() {
  return (
    <header>
      <h1>ZeroBudget</h1>
      <p>Give every dollar a job.</p>
    </header>
  );
}

export default Header;

Then use it in App.jsx:

import Header from './components/Header';

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

export default App;

<Header /> is how you render a component. React calls your Header function and inserts its return value here. This is composition — building complex UIs by combining small, focused components.

The component tree

Every React app is a tree of components. App is the root. It renders Header, which renders header, h1, and p. Those built-in elements render as real DOM nodes. Your custom components are just organizational layers — they do not appear in the DOM themselves.

App
└── Header
    ├── header
    │   ├── h1
    │   └── p

Exercise

1. In your Vite project, replace src/App.jsx with a clean component that renders an <h1> with your app name.
2. Create src/components/Header.jsx with a Header component that renders a <header> with a title and a tagline.
3. Import Header into App and render it with <Header />.
4. Confirm the output in the browser matches what you expect.

Recap

• A React component is a JavaScript function that returns JSX.
• Component names must start with a capital letter.
• A component can only return one root element — use fragments (<>) to avoid extra DOM nodes.
• Components compose by rendering other components with JSX tags like <Header />.
• The result is a tree: your custom components at the top, built-in elements at the leaves.