7. What is a Component?

A React Component is a reusable piece of the User Interface. Think of it as a custom JavaScript function that returns HTML (via JSX).

Navbar (Nav links)

Card (Product display)

Footer (Links & Copyright)

Button (Custom styles)

Instead of one huge file, we break the UI into these smaller, manageable parts.

8. Component Tree

App (Main) | ------------------- | | | Header Content Footer | ----------- | | Card1 Card2

App is the parent. All other components are children that get "injected" into the main App to create the final page.

Names MUST start with a Capital Letter. <Header /> is a component; <header> is just HTML.

Everything inside the return must be wrapped in a single parent element (like a <div>).

We use className="" because class is already a keyword in JavaScript.

function Welcome() {
  return (
    <h1>Hello Point Pikker</h1>
  );
}

export default Welcome;

Part	Meaning
function Welcome()	Declaring the component
return (...)	The JSX (UI) to display
export default	Allows you to use it in other files

Header.js
export default function Header() { return <h1>Header</h1>; }

App.js
import Header from "./Header";

function App() {
  return (
    <div>
      <Header />
      <p>Main Body Content</p>
    </div>
  );
}

Task 1: Personal Info (Name, Dept, College).

Task 2: Build Header, Content, Footer separately.

Task 3: Student Card (Name, Age, Course).

Task 4: Product List (Laptop, Mobile, Tablet).

Challenge: Try to create a "Simple Website" using a Navbar, Home, and Footer component combined in App.js!

React Setup → Components (Current) → JSX

↓

Coming Next: Props → State → Hooks