Your First React Component

⚛️ React 18+ 🟢 Chapter 4 of 39 📂 Phase 02: Setup and First App 📅 2026 Edition

📌 Covered in this chapter: App.jsx · Function Components · Returning JSX · Importing/Exporting · main.jsx · ReactDOM.createRoot() · Root Element

With your project running, it's time to understand the two files every React app starts from: main.jsx, which mounts your app onto the page, and App.jsx, your very first real component.

1Function Components

Nearly all modern React components are simply JavaScript functions that return JSX — markup-like syntax describing what should appear on screen:

💻 Example 1: Your First Component

JSX▶ Run in Compiler

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

🔍 Line-by-Line Breakdown:

function App(): a normal JavaScript function — but by React convention, component names always start with a capital letter
return <h1>...</h1>: returns JSX describing the UI
export default App: makes this component importable from other files

2How main.jsx Mounts Your App

main.jsx is the true entry point — it takes your App component and renders it into an actual DOM element on the page:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

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

document.getElementById("root") refers to a single empty <div id="root"> sitting in index.html — createRoot().render() is the bridge connecting your React component tree to that real DOM node.

3Importing and Exporting Components

Every component lives in its own file and is shared using export / import:

// Button.jsx
function Button() {
  return <button>Click Me</button>;
}
export default Button;

// App.jsx
import Button from "./Button.jsx";

function App() {
  return <Button />;
}

⚠️ Forgetting export default on a Component File

Creating a component but forgetting export default ComponentName at the bottom of the file means any other file trying to import it will get undefined instead of your actual component — a very common early-beginner error that produces a confusing blank screen with no clear error message.

💻 Hands-on Interactive Practice Challenge

Create a new Greeting component in its own file that returns a heading with your name, then import and use it inside App.jsx.

React Practice Challenge ▶ Run in Compiler

// Greeting.jsx
function Greeting() {
  return <h2>Hello, I'm learning React!</h2>;
}
export default Greeting;

// App.jsx
import Greeting from "./Greeting.jsx";

function App() {
  return <Greeting />;
}

export default App;

Run This Challenge in Online JS IDE →

❓ Frequently Asked Questions (FAQ)

Q Why must component names start with a capital letter?

React uses this exact convention to distinguish components (like ) from regular HTML tags (like

) when parsing JSX. A lowercase-named function used as a tag would be treated as an unknown HTML element instead.

Q What is the
in index.html for?

It's the single empty container element in your plain HTML file that React takes over completely. Everything your React app renders is inserted inside this one div.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on React 18+ · Last updated August 2026

Q Why must component names start with a capital letter?

Q What is the in index.html for?

Q What is the
in index.html for?