The First Function Component

App.jsx currently contains one JavaScript function.

export default function App() {
  return <h1>My first React screen</h1>;
}

It is a React component because React uses it as an element type during rendering. The function receives inputs from React and returns a value React can render.

The function is still JavaScript. React does not introduce another function syntax. React calls the function and interprets its returned description of UI.

Read the Declaration as JavaScript

Remove the export for a moment and the declaration remains a normal named function.

function App() {
  return <h1>My first React screen</h1>;
}

function begins a function declaration. App creates a binding for that function. Parentheses hold parameters. The braces contain its body. return produces a value for the caller.

The returned syntax is JSX. JSX becomes a React element value that React receives from the component call.

React renders an App element
  -> React calls App
  -> App returns React content
  -> React continues through that content

This distinction is visible with a log.

function App() {
  console.log("App rendered");
  return <h1>My first React screen</h1>;
}

The log runs when React calls App, not when the JavaScript parser reads the declaration.

Render the Component with JSX

The root entry contains an App element.

root.render(<App />);

<App /> describes an element whose type refers to the App function. React sees that component type and calls it during rendering.

Do not call the component yourself inside JSX.

root.render(App());

This can appear to produce the same heading while the function is simple, but it removes the component call from React's control. Hooks, component identity, development checks, and component-stack reporting rely on React performing component calls.

Render components as elements.

root.render(<App />);

Ordinary helper functions remain ordinary calls.

function formatTitle(title) {
  return title.toUpperCase();
}

A component can call that helper because the helper is not asking React for component identity or Hooks.

function App() {
  const title = formatTitle("ReactBook");
  return <h1>{title}</h1>;
}

Capitalization Selects the Element Type

Compare two JSX names.

<App />
<main />

App begins with an uppercase letter. JSX treats it as a JavaScript binding. That binding points to the component function.

main begins with a lowercase letter. JSX treats it as a host element name. In this web project, React DOM creates or updates a browser main element.

This component fails to render as intended because its local name begins with lowercase.

function app() {
  return <h1>ReactBook</h1>;
}

root.render(<app />);

JSX treats app as a host tag string rather than the local function. React does not call the declared function through that element.

Rename it.

function App() {
  return <h1>ReactBook</h1>;
}

Local component bindings must begin with an uppercase letter. A lowercase JSX name is treated as a browser element name such as div or button.

Definition, Element, and Instance

Three related values need distinct names.

The component definition is the function.

function LessonCard() {
  return <article>JSX Produces Elements</article>;
}

The component element is the value described by JSX.

<LessonCard />

A rendered component instance is React's preserved occurrence of that component type at a position in the tree. Two elements of the same type can create two independent instances.

function App() {
  return (
    <main>
      <LessonCard />
      <LessonCard />
    </main>
  );
}

The source contains one LessonCard function definition, two element occurrences in the returned tree, and two rendered component instances.

This difference becomes visible after state arrives. Each instance can retain its own local state even though both use the same function code.

The browser DOM contains the two article elements returned by the instances. It does not contain a DOM element named LessonCard.

Components Can Use Other Components

Create a component for the chapter heading.

function ChapterHeading() {
  return <h1>The First React Screen</h1>;
}

Use it inside App.

function App() {
  return (
    <main>
      <ChapterHeading />
      <p>Six lessons</p>
    </main>
  );
}

React calls App first because the root contains <App />. The returned tree contains <ChapterHeading />, so React calls ChapterHeading while continuing through the tree.

App
  ChapterHeading
    h1
  p

The structure expresses which component created the nested element. It does not imply that the browser creates an App node around a ChapterHeading node.

Give a Component One Named UI Responsibility

Component extraction is a design choice, not a requirement for every element.

This function has a useful name and renders the chapter title.

function ChapterHeading() {
  return <h1>The First React Screen</h1>;
}

This extraction adds a name without adding meaning.

function Paragraph() {
  return <p>Six lessons</p>;
}

A component becomes useful when it represents a named interface part, repeats with different inputs, handles interaction, or keeps a parent focused on its section-level structure.

Do not split the first screen into one component per HTML tag. The browser element already gives each tag a name.

Component Names Should Explain the UI

Names appear in imports, error component stacks, React DevTools, and source searches.

function LessonProgress() {
  return <p>0 of 6 lessons complete</p>;
}

LessonProgress identifies the interface region. Names such as Thing, Stuff, and Component1 do not help a reader place a stack frame.

Use PascalCase for component bindings. Each word begins with an uppercase letter.

App
ChapterHeading
LessonProgress
ContinueButton

The name does not need to repeat the parent. AppChapterHeadingComponent adds words without adding useful specificity.

Rendering Must Be Pure

Given the same props, state, and context, a component render should calculate the same React output. It should not change values or systems outside that calculation.

This component changes a module variable while rendering.

let renderCount = 0;

function App() {
  renderCount += 1;
  return <p>Render {renderCount}</p>;
}

The output depends on how many times React happened to call the function. Development Strict Mode can call the function again to expose this kind of work. Concurrent rendering can also prepare work without committing it.

Calculate from inputs instead.

function LessonProgress({ completed }) {
  return <p>{completed} lessons complete</p>;
}

The returned text follows the supplied prop instead of a mutation performed during render.

Pure rendering still permits local calculations.

function ChapterHeading() {
  const title = "The First React Screen";
  const label = title.toUpperCase();
  return <h1>{label}</h1>;
}

The variables are created for this function call and do not change external data.

Keep Component Definitions at Module Level

Declare components outside other component bodies.

function ChapterHeading() {
  return <h1>The First React Screen</h1>;
}

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

This version creates a new ChapterHeading function every time App renders.

function App() {
  function ChapterHeading() {
    return <h1>The First React Screen</h1>;
  }

  return <ChapterHeading />;
}

React sees a new component type on the next parent render. Anything associated with the previous type cannot be preserved as the same component instance.

Module-level declarations also make a component available to other code in the file without recreating its function object during rendering.

Export the Application Component

main.jsx imports App, so App.jsx exports it.

export default function App() {
  return <h1>My first React screen</h1>;
}

The export default syntax makes this function the file's default export. The importing file chooses its local name.

import App from "./App.jsx";

Retain the generated default export so the root entry can import the component.

Build the First Component Tree

Update App.jsx with two module-level components.

function ChapterHeading() {
  return <h1>The First React Screen</h1>;
}

function LessonProgress() {
  return <p>0 of 6 lessons complete</p>;
}

Use both in App.

export default function App() {
  return (
    <main>
      <ChapterHeading />
      <LessonProgress />
    </main>
  );
}

Save the file and inspect the page. The browser contains one main, one h1, and one p. React DevTools contains App, ChapterHeading, and LessonProgress.

This example isolates how React continues from one returned component element into another component function.

Lesson Check

Distinguish the component definition, element, call, and rendered instance.

function App is the component definition
<App /> is a component element
React calls App during rendering
the returned lowercase elements become DOM output through React DOM
two <App /> occurrences can create two component instances

Source Notes

• React documentation, Your First Component
• React documentation, Keeping Components Pure
• React documentation, React calls Components and Hooks
• React documentation, Preserving and Resetting State