Your First Component

Several report pages need the same school notice. A component lets us name that interface and reuse it wherever the notice belongs, while keeping its implementation in one place.

A function component is a JavaScript function that returns a React interface description, usually written with JSX. Name components with an uppercase initial so React can distinguish them from built-in HTML elements such as p and section.

Explain
Define and export a component that returns a student report.
Trace
Distinguish a component name from a lowercase browser element.
Apply
Reuse a component while keeping each part’s responsibility clear.

First Component: follow the relationship

Define Notice
The function returns a library heading and reminder.
Use it twice
App includes two Notice elements in its description.
Two instances
React displays two library notices from the same reusable definition.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

Define a component at the top level of the file, then use its name as a JSX tag. App includes Notice twice. Each appearance occupies its own position in the interface even though both use the same function definition.

Choose a component name with meaning

Notice explains a recognizable part of the page. A name such as Box2 tells a reader little about its role. Native elements still matter inside components: a heading describes a section, a paragraph describes prose and a button describes an action. Reuse does not require abandoning those semantics.

A file may contain more than one component while the example stays small. When separating files later, match the import spelling to the export: a default export uses an unbraced import name, while a named export uses braces. Keep filenames and import paths consistent, including capitalization.

Read the complete React example

Notice returns a section with a heading and a paragraph. App returns a main element containing two notices. The default export tells the template which component to import; other local components need no export when they stay in the same file.

React · JavaScript with JSX

import React from 'react';
function Notice() {
  return <section><h2>Library notice</h2><p>Return books on Friday.</p></section>;
}
export default function App() {
  return <main><Notice /><Notice /></main>;
}

Expected screen and behavior

Initial screen: Library notice Return books on Friday. Library notice Return books on Friday.

Connect the source to the screen

React · main example

import React from 'react';
function Notice() {
  return <section><h2>Library notice</h2><p>Return books on Friday.</p></section>;
}
export default function App() {
  return <main><Notice /><Notice /></main>;
}

React handles calling Notice when it encounters the component element. Write <Notice /> rather than calling Notice() yourself. Letting React manage component calls preserves its ability to associate state, rendering and identity with positions in the tree.

Avoid the common mistakes

Do not define Notice inside App as a shortcut. Creating a fresh component definition on every parent render can cause state below it to reset. A component can return multiple sibling elements inside a fragment, but its returned JSX still needs one enclosing expression.

Practice before reading the solution

React · starting example

import React from 'react';
function Notice() {
  return <section><h2>Library notice</h2><p>Return books on Friday.</p></section>;
}
export default function App() {
  return <main><Notice /><Notice /></main>;
}

Create an AttendanceTip component and include it below a page heading.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The practice gives the tip a single responsibility and keeps the page heading in App. This is a useful division because the tip can later appear on another attendance page without carrying that page’s heading along.

React · JavaScript with JSX

import React from 'react';
function AttendanceTip() {
  return <p>Check each student before saving attendance.</p>;
}
export default function App() {
  return <main><h1>Attendance</h1><AttendanceTip /></main>;
}

Expected screen and behavior

Initial screen: Attendance Check each student before saving attendance.

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

A function component is a JavaScript function that returns a React interface description, usually written with JSX. Name components with an uppercase initial so React can distinguish them from built-in HTML elements such as p and section.

Continue with JSX: Describing the Interface. Revisit Setting Up React when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Your First Component.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: JSX: Describing the Interface →

Your First Component