Components in React

By Syncfusion®, Inc. · Last updated November 6, 2026

What components are, functional components, creating and typing components with props, rendering, composition, reusable components, importing and exporting, naming rules, smart vs presentational components, and folder structure.

What Are Components?

A component is a small, reusable piece of a web page. A button, a book card and a menu can each be a component.

You build each piece once. Then you join the pieces together to make the whole page.

Real-World Example

An online bookshop shows 40 books on its home page. The team writes one BookCard component with the cover, title, price and an Add to cart button, and uses it 40 times.

When the designer moves the price above the title, the team changes BookCard once, and all 40 cards change.

A web page split into components: Header, BookCard three times, and Footer

App (the whole page)

Header

BookCard

BookCard

BookCard

Footer

One page, four kinds of components. BookCard is written once and used three times.

Functional Components

A functional component is a JavaScript function that returns TSX. React calls the function and shows what it returns.

This is the standard way to write components today. Older React code also uses class components, but new code uses functions.

function Greeting() {
  return <h2>Welcome, reader!</h2>;
}

Creating Components

To create a component, follow three steps:

1. Write a function whose name starts with a capital letter.
2. Return TSX from the function.
3. Use it like a tag: <Greeting />.

<Greeting /> is used twice, so the greeting appears twice. You can also write components as arrow functions: const Greeting = () => <h2>Welcome, reader!</h2>;

Creating Typed Components

A component can receive values from outside. These values are called props (short for properties). They work like the inputs of a function.

In TypeScript, you describe the props with a type. The type lists each prop and the kind of value it holds. TypeScript then warns you if a prop is missing or has the wrong kind of value.

Here is what each part does:

• type BookCardProps lists the props: title and author are text, price is a number.
• inStock? has a ?, so it is optional. inStock = true gives it a default value.
• { title, author, price, inStock } takes the props out of the object so you can use them by name.

Text props use quotes: title="The Alchemist". Other values use braces: price={299}, inStock={false}.

Rendering Components

Rendering a component means showing it on the page. You render a component by writing it as a tag inside TSX.

React then calls the component function and puts the returned TSX on the page. The top component, usually App, is rendered once in main.tsx:

createRoot(document.getElementById("root")!).render(<App />);

Every other component is rendered by a component above it. A component can also render nothing by returning null:

function SaleBanner({ onSale }: { onSale: boolean }) {
  if (!onSale) return null;
  return <p>Big sale today!</p>;
}

Component Composition

Composition means using one component inside another component. For example, App uses Header, BookList and Footer inside it.

When components are used inside each other, they form a component tree. App is at the top of the tree.

• The component on the outside is the parent.
• The component used inside it is the child.

So App is the parent of BookList. BookList is a child of App.

Component tree: App has children Header, BookList and Footer. BookList has three BookCard children.

App

Header

BookList

Footer

BookCard

BookCard

BookCard

The component tree of the lab below. App is the parent of Header, BookList and Footer.

Click through the tabs. App does not know how a book card looks. It only puts Header, BookList and Footer in order. Each component has one job.

Reusable Components

A reusable component is written once and used in many places, with different props each time. This saves you from copying the same code.

Press each button and watch the console. All three come from one Button component.

color?: "blue" | "green" | "red" means color can only be one of these three words. If you write color="pink", TypeScript warns you.

Exporting Components

To use a component in another file, you must export it first. There are two kinds of export.

Default Export

A file can have one default export. It is usually the main component of the file.

// Header.tsx
export default function Header() {
  return <h1>Book Corner</h1>;
}

Named Export

A file can have many named exports. Each one is exported by its name.

// Badges.tsx
export function NewBadge() {
  return <span>New</span>;
}

export function SaleBadge() {
  return <span>Sale</span>;
}

Importing Components

To use an exported component, import it at the top of the file. How you import depends on how it was exported.

• Default export — no curly braces: import Header from "./Header";
• Named export — curly braces, and the exact name: import { NewBadge, SaleBadge } from "./Badges";

The path "./Header" means "the file Header.tsx in this same folder". You do not write the .tsx ending.

Component Naming Conventions

Follow these naming rules so your code is easy to read:

• Start with a capital letter — BookCard, not bookCard. React treats lower-case tags as HTML tags.
• Use PascalCase — Join words and capitalise each one: ShoppingCart, UserProfile.
• Name the file after the component — BookCard lives in BookCard.tsx.
• Use a clear noun — BookList says what it shows. Thing or Comp1 does not.
• Name props types after the component — BookCardProps for BookCard.

Smart vs Presentational Components

You can split components into two kinds, based on the work they do.

• A smart component has the data. It chooses which data to show. It is also called a container component.
• A presentational component does not have its own data. It gets the data through props and shows it on the screen.

In the example below, BookShelf is the smart component. It has a list of books and picks only the books that are in stock. BookTable is the presentational component. It shows those books in a table.

Data flows from the smart component BookShelf to the presentational component BookTable through props

BookShelf Smart: has the data, picks books in stock

BookTable Presentational: only shows what it gets

props

Data moves one way: from the smart component down to the presentational one, through props.

The table shows only two books. "Wings of Fire" is out of stock, so BookShelf did not send it.

BookTable does not check the stock. It shows any list of books you give it. So you can use BookTable again for other lists.

books.map(...) creates one table row for each book. You will learn lists in a later lesson.

You do not have to split every component this way. In a small app, one component can do both jobs.

Component Folder Structure

When an app has many components, keep them in a components folder inside src. Put each component in its own file.

src/
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── Button.tsx
│   └── books/
│       ├── BookCard.tsx
│       ├── BookList.tsx
│       └── BookCard.css
├── pages/
│   ├── HomePage.tsx
│   └── CartPage.tsx
├── App.tsx
└── main.tsx

• components/ — Small, reusable pieces such as buttons and cards.
• components/books/ — Components that belong together can share a sub-folder.
• pages/ — One component for each screen of the app.
• A component's CSS file sits next to it, with the same name.

Import paths follow the folders. From App.tsx, write import Header from "./components/Header";.

Common mistakes

Check Yourself

Exercises

What to Remember

• A component is a function that returns TSX. Its name starts with a capital letter.
• Describe props with a type, and build pages by putting small components together.
• Export a component to use it in another file: default export without braces, named export with braces.

Next: Props