React Components and Props: A Beginner's Guide

What Are React Components?

What is a Component?

A component is a reusable piece of UI, written as a JavaScript function that returns JSX.

Every React application is a tree of components. A course dashboard might look like this:

text

App

├── Navbar

├── WelcomeBanner

└── CourseList

├── CourseCard

├── CourseCard

└── CourseCard

App is the root. Everything else sits inside it.

Why is it Used?

Without components, a dashboard with twelve course cards means twelve copies of the same HTML block. Change the design and you edit twelve places. With a component, you write the card once and use it twelve times with different data.

Components also make the code readable. When you open App.jsx and see <Navbar />, <WelcomeBanner />, and <CourseList />, you understand the page structure in three seconds.

Rules for Components

1. The name must start with a capital letter.
2. It must return JSX (or null).
3. It should be in its own file, exported for other files to use.

Example

src/components/Navbar.jsx

jsx
function Navbar() {
return (
<nav className="navbar">
<h2>GUVI Learn</h2>
<ul>
<li>Dashboard</li>
<li>Courses</li>
<li>Profile</li>
</ul>
</nav>
);
}
export default Navbar;

src/App.jsx

jsx
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
<h1>Welcome to your dashboard</h1>
</div>
);
}
export default App;

How It Works

• Navbar.jsx defines the component and exports it.
• import Navbar from "./components/Navbar"; brings it into App.jsx. The ./ means "relative to this file". The .jsx extension can be omitted.
• <Navbar /> uses the component. It is self-closing because it has no content inside it.

Output

The page shows the navigation bar followed by the heading.