React  

Let's Start with React Components

Let's start by building a simple app layout.

The structure is,

  • Header at the top
  • Left Sidebar for navigation
  • Right Sidebar for extra info
  • Content in the middle
  • The footer at the bottom

Content area

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

  • What components are?
  • What .tsx files are?
  • How to write, export, and reuse components?
  • Best practices and naming conventions

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

  • The function name starts with a capital letter
  • It returns JSX
  • It is stored in a .tsx file
  • It's exported, so you can use it elsewhere

Why .tsx?

  • .ts = TypeScript (typed JavaScript)
  • .tsx = TypeScript + JSX (React syntax)

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;
  • SidebarProps defines the type of props that this component expects.
  • The position prop is accessed using object destructuring: { position }
  • You pass this prop when you use it like <Sidebar position="left" />

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?

  • When each component serves a separate purpose
  • When components need to be reused in different files
  • When files become too large or hard to scan

But there can be exceptions

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

  • Only one of them is exported (usually the main one), and the others are small helpers.
  • The secondary components are not reused anywhere else.

In the following example,

  • CardTitle and CardBody are private helpers.
  • The card is the only exported component.
// 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

  • What a component is and where it lives
  • How .tsx works and why it’s used
  • How to create and type components
  • How to export and reuse them
  • Best practices for file structure and naming

Membership not found