L2: Creating the HomePage Component

Let's create your first React component from scratch! The HomePage will be the main landing page of our booking application.

What is a Component?

A React component is a JavaScript function that returns JSX. That's it! Every component follows this pattern:

function ComponentName() {
   return <div>{/* JSX goes here */}</div>;
}

export default ComponentName;

Step 1: Create the HomePage File

In the src/pages folder, create a new file called HomePage.jsx:

Using VS Code:

1. Right-click on the pages folder
2. Select "New File"
3. Name it HomePage.jsx

Step 2: Write the HomePage Component

Add this code to HomePage.jsx:

function HomePage() {
   return (
      <div className='home-page'>
         <header className='hero'>
            <h1>Find Your Perfect Stay</h1>
            <p>Discover amazing places to stay around the world</p>
         </header>

         <section className='listings'>
            <h2>Featured Properties</h2>
            <p>Property listings will go here...</p>
         </section>
      </div>
   );
}

export default HomePage;

Let's break down what each part does:

Component Function

function HomePage() {
   // ...
}

• Function name uses PascalCase (first letter capitalized)
• Must return JSX
• Can contain logic before the return statement

JSX Return

return <div className='home-page'>{/* JSX content */}</div>;

• Wrapped in parentheses for multi-line JSX
• Must have one root element (the outer <div>)
• Uses className instead of class

Export Statement

export default HomePage;

• Makes the component available to other files
• Use default when exporting a single component per file

Step 3: Import HomePage into App

Now let's use the HomePage component in App.jsx:

import HomePage from "./pages/HomePage"; // ← NEW: Import the component

function App() {
   return (
      <div className='app'>
         <HomePage /> {/* ← NEW: Use the component */}
      </div>
   );
}

export default App;

Key points:

• Import path is relative (./pages/HomePage)
• No need for .jsx extension
• Component used as JSX tag: <HomePage />
• Self-closing tag since HomePage has no children

Understanding Component Composition

We just composed two components together:

App is the root component that renders HomePage. Later, HomePage will render more child components like PropertyList and PropertyCard.

Why Separate Components?

JSX Rules Recap

// ❌ Wrong: Multiple root elements
return (
  <h1>Title</h1>
  <p>Text</p>
);

// ✅ Correct: Wrapped in single parent
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

// ❌ Wrong
<img src="photo.jpg">
<input type="text">

// ✅ Correct
<img src="photo.jpg" />
<input type="text" />

// ❌ Wrong
<div class="container">

// ✅ Correct
<div className="container">

const name = "StayScape";
return <h1>{name}</h1>;
// Renders: <h1>StayScape</h1>

Check Your Browser

Save all files and look at your browser. You should now see:

• "Find Your Perfect Stay" as the main heading
• "Discover amazing places..." subtitle
• "Featured Properties" section heading
• "Property listings will go here..." placeholder

Common Mistakes to Avoid

What You Learned

• ✅ Creating a React component (function returning JSX)
• ✅ Organizing files (pages vs components folders)
• ✅ Importing and exporting components
• ✅ Component composition (App contains HomePage)
• ✅ JSX syntax rules
• ✅ Using className for styling

Practice Challenge

Try this before moving on:

1. Add a new paragraph to the hero section
2. Change the heading text
3. Add a <footer> section at the bottom of HomePage

Next Up

Great job! You've created your first custom component. Next, we'll add real property data to display on the home page.