React components are the heart of every React application. If you’re completely new or coming from another frontend framework, this guide explains what components are, how your app starts, how components work together, and how React expects you to structure your project. This guide uses React + TypeScript + Vite for examples.

---

✔️ Prerequisites (If you plan to practice along)

Before diving in, we should already have a working React + TypeScript project created with Vite. If not, please follow this post first: Creating Our First React App with TypeScript. That post walks you through the setup and ensures our project includes files like:

index.html
src/main.tsx
src/App.tsx

These files are essential for understanding how React components work.

---

🧱 1. What Is a React Component?

A React component is a function that returns UI using JSX. Reminder: JSX is a JavaScript syntax extension that lets us write HTML-like code inside JavaScript.

Example:

export default function App() {
  return <h1>Hello from App Component</h1>;
}

React uses components like building blocks to create the entire UI.

✔ Key rules for components:

• Use PascalCase (e.g., Greeting, UserCard)
• Must return a single parent element
• Written as functions in modern React

---

🧩 2. JSX – The Language of React UI

JSX lets us write HTML-like syntax inside TypeScript:

return <h1>Hello!</h1>;

JSX is compiled into JavaScript, allowing React to update the UI efficiently using the Virtual DOM.

---

🏛 3. The Root HTML Element (index.html)

Our React UI doesn’t replace the entire page. Instead, React takes over one specific HTML element:

<div id="root"></div>

This is called the Root Element, and our entire React app is rendered inside it.

---

🚀 4. main.tsx — The Entry Point (Not a Component)

main.tsx is the startup script that loads React and attaches your app to the #root element inside index.html.

// main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

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

📌 Important:

• main.tsx is not a React component
• It never appears inside JSX
• It simply bootstraps your app by rendering <App /> into the root element

📝 Note:

This file uses ReactDOM.createRoot(), which is the latest React way of starting an application.
Older versions of React used ReactDOM.render(), but createRoot() enables the latest improvements, such as concurrent rendering and better performance.

---

🌳 5. App.tsx — The Root Component

App.tsx is a React component.

It is also known as:

• The App Component
• The Root Component

React renders this component first:

function App() {
  return (
    <div>
      <h1>My First React App 🚀</h1>
      <p>Hello, world! I just created a React app using Vite.</p>
    </div>
  );
}

export default App;

Everything else in our React app flows from this component.

---

🌲 6. How Our App Actually Starts (The Component Tree)

Understanding the flow is critical:

index.html  
   ↓
main.tsx (bootstraps React)  
   ↓
<App /> (root component)  
   ↓
Our other components  

---

📥 7. Props — Passing Data Into Components (Hands-On)

Props allow us to pass data from a parent component into a child component. They make components flexible, reusable, and customizable.

Example: Greeting Component

Create a folder called components under the src folder and create a file called Greeting.tsx with following contents.

type GreetingProps = {
  name: string;
};

function Greeting({ name }: GreetingProps) {
  return <h2>Hello {name}</h2>;
}

export { Greeting };

Note 1: Here, Greeting is a React component that accepts a prop named name and displays it.

Note 2: Here, we are creating a folder called components to better organize components but is not mandatory. We also need to use this path while importing it as we will see in the next sub section.

Note 3: Here we are using a named export at bottom. To learn about inline and bottom export, and also named and default export, refer to the post Understanding Exports and Imports in React.

✅ Using the Component from App.tsx

To pass data into the component, we import it and use it like a custom HTML tag. Update our App.tsx as follows:

import { Greeting } from "./components/Greeting";

function App() {
  return (
    <div>
      <h1>Greetings</h1>

      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Here we are using a default export at bottom. To learn about inline and bottom export, and also named and default export, refer to the post Understanding Exports and Imports in React.

✔ What’s happening here?

• App is the parent component
• <Greeting name="Alice" /> is a child component
• "Alice" is passed as the value of the name prop
• The Greeting component receives it and displays Hello Alice

---

🧍‍♂️🧍‍♀️ 8. Component Instances (Very Important!)

Every time we use a component, React creates a new instance.

Example:

<Counter />   // instance 1
<Counter />   // instance 2

✔ Key concept:

Each instance has:

• Its own state
• Its own behavior
• Its own UI
• No shared data with other instances

This is why components are reusable.

---

🔤 9. Why Capitalization (PascalCase) Matters

React decides if something is:

• A component → by checking if it starts with uppercase
• An HTML tag → lowercase

Example:

<MyButton />    // component
<div>           // HTML tag
<mybutton />    // ❌ treated as an invalid HTML tag

---

🎉 10. Final Summary

Concept	Meaning
Root Element	The <div id="root"> React renders into
main.tsx	Bootstraps the React app
App.tsx	First and main component
Component	Function returning JSX
Props	Inputs passed to components
Instances	Each usage of a component is independent
PascalCase	Required for components
React 18 API	Uses createRoot()

This complete guide ensures beginners fully understand React components in a modern React + TypeScript + Vite project.