M1: React Fundamentals

Learn JSX, components, and props by building the homepage with property listing cards.

Welcome to your first React module! This is where your journey truly begins. 🚀

In this module, you'll learn the building blocks of every React application: components, JSX, and props. By the end, you'll have a working homepage displaying property listings.

Overview

React applications are built from components - reusable pieces of UI. Think of components like LEGO blocks: small, independent pieces that snap together to create something bigger.

In this module, you'll build:

A HomePage component (the main page)
A PropertyList component (container for all listings)
A PropertyCard component (individual property display)

What You'll Build

By the end of this module, your app will display a grid of property listings, each showing:

Property image
Property title
Location
Price per night
Rating

It won't be interactive yet (that's Module 2!), but it will look like a real booking website.

Key Concepts

JSX - JavaScript XML

JSX lets you write HTML-like code in JavaScript:

const element = <h1>Hello, React!</h1>;

It looks like HTML, but it's actually JavaScript. React transforms it into regular JavaScript function calls.

Components

Components are JavaScript functions that return JSX:

function Welcome() {
   return <h1>Welcome to StayScape!</h1>;
}

Every piece of UI in React is a component!

Props

Props (short for "properties") let you pass data to components:

function Greeting({ name }) {
   return <h1>Hello, {name}!</h1>;
}

// Usage:
<Greeting name='Sarah' />;
// Renders: <h1>Hello, Sarah!</h1>

Learning Objectives

In this module, you will:

Understand JSX Syntax Learn the rules and capabilities of JSX, including expressions, attributes, and styling

Create React Components Build functional components that return JSX elements

Use Props Pass data from parent components to child components

Compose Components Combine small components to build complex UIs

Structure Your Project Organize files and folders following React best practices

Build Real UI Create a homepage with property listing cards

Module Roadmap

Here's what we'll build step by step:

Lesson	What You'll Create	New Concepts
1	Clean up Vite starter	Project structure
2	HomePage component	Components, JSX basics
3	Property data array	JavaScript in JSX
4	PropertyCard component	Props, destructuring
5	PropertyList component	Mapping arrays, keys
6	Styling with Tailwind	className, responsive design
7	Composition & review	Component architecture