Let's start by building a simple app layout.

The structure is,

Content area

You’ll create each part as a React component using TypeScript, and along the way, you’ll learn.

Step 1. Set Up a React + TypeScript App.

We’ll use Vite to create a fast dev setup.

npm create vite@latest my-layout-app -- --template react-ts
cd my-layout-app
npm install
code .
npm run dev

What is a React Component?

A component is a reusable block of UI, like a button, header, card, or page section.

It’s just a JavaScript or TypeScript function that returns JSX (HTML-like syntax).

Here’s a simple example.

function Button() {
  return <button>Click Me</button>;
}

export default Button;

Key Points

Why .tsx?

React components return JSX. So all your React components go into .tsx files, not .ts.

So, what happens if I save the above code with a .ts extension? I get a compile-time error saying: JSX expressions are not allowed in files with extension '.ts.

JSX

Folder and File Structure

Recommended structure in src/.

src/
└── components/
    ├── Header.tsx
    ├── Sidebar.tsx
    ├── Content.tsx
    └── Footer.tsx
App.tsx

Naming & File Norms

Rule Example
Use PascalCase for file and component names Header.tsx, MyComponent.tsx
Keep one component per file Don't combine multiple components in one file
Use the default export for simple components export default MyComponent

Step 2. Create the Components.

Now let's create the components one by one.

1. Header.tsx

function Footer() {
  return <footer>Footer</footer>;
}

export default Footer;

2. Sidebar.tsx (Reusable with Props)

type SidebarProps = {
  position: 'left' | 'right';
};

function Sidebar({ position }: SidebarProps) {
  return <aside className="sidebar">{position} sidebar</aside>;
}

export default Sidebar;

3. Content.tsx

function Content() {
  return (
    <main className="content">
      <h1>Welcome to the Content Area</h1>
      <p>This is the main section of the app.</p>
    </main>
  );
}

export default Content;

4. Footer.tsx

function Footer() {
  return <footer>Footer</footer>;
}

export default Footer;

Step 3. How to Use Components in React? Bring It All Together in App.tsx.

1. Import the Component.

import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Content from './components/Content';
import Footer from './components/Footer';

This means: Go to the components folder and bring in each component so I can use it in this file.

2. Use the Component as a Custom HTML Tag.

<Header />
<Sidebar position="left" />
<Content />
<Sidebar position="right" />
<Footer />

For reference, here is the full App.tsx.

import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Content from './components/Content';
import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <Header />

      <div style={{ display: 'flex', flex: 1 }}>
        <Sidebar position="left" />
        <Content />
        <Sidebar position="right" />
      </div>

      <Footer />
    </div>
  );
}

export default App;

Quick Recap

Concept Explanation Example
Component A function that returns JSX function Header() { return <h1>...</h1> }
Props Inputs to components Sidebar({ position: 'left' })
TypeScript Props Define props with a type type Props = { title: string }
Default Export Common export style export default Header
One Component per File Clean and scalable Header.tsx, Sidebar.tsx

Common Mistakes to Avoid

Mistake Fix
Using .ts instead of .tsx Use .tsx for components
Lowercase component name Use PascalCase like MyComponent
Forgetting export Always export your component
Using multiple components in one file One per file is the best practice

Well, what is up with the 4th mistake?

When should you not use multiple components in a single file?

But there can be exceptions

When is it okay to have multiple components in one file?

In the following example,

// Card.tsx

function CardTitle({ title }: { title: string }) {
  return <h2>{title}</h2>;
}

function CardBody({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <CardTitle title={title} />
      <CardBody>{children}</CardBody>
    </div>
  );
}

export default Card;

Lemme also summarize naming conventions in React for you.

React + TypeScript Naming Conventions Cheat Sheet

Item Naming Convention Example Notes
Component Name PascalCase UserCard Must start with uppercase
Component File PascalCase.tsx UserCard.tsx One component per file
Folder Name lowercase components/ Flat or kebab-case preferred
Props Type/Interface PascalCase + Props UserCardProps For typing props
Hook Name camelCase with use useAuth All hooks must start with use
Helper Function camelCase formatDate No JSX → use .ts file
Page Component PascalCase.tsx Dashboard.tsx Treated like normal components
App/Project Folder kebab-case my-app/ For CLI tools, repos, npm
JSX Component Use Capitalized Tag <UserCard /> Lowercase = treated as an HTML tag
Export Style default (usually) export default Header One component per file

Now you know