L7: Module 1 Review

Congratulations! You've completed Module 1. Let's review everything you've learned and see how far you've come.

What You Built

You created a property listing homepage with:

• Reusable React components
• Dynamic data rendering
• Props for component communication
• Professional styling with Tailwind CSS
• Responsive grid layout

Key Concepts Mastered

1. JSX (JavaScript + XML)

JSX lets you write HTML-like code in JavaScript:

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

Key points:

• Use className instead of class
• Use {} for JavaScript expressions
• Close all tags (even <img />)
• camelCase for attributes (onClick, not onclick)

2. Components

Components are reusable pieces of UI:

function PropertyCard({ title, price }) {
   return (
      <div>
         <h3>{title}</h3>
         <p>${price}/night</p>
      </div>
   );
}

Component rules:

• Start with capital letter
• Can be functions or classes (we use functions)
• Return JSX
• Should be focused and reusable

3. Props

Props pass data from parent to child:

// Parent passes props
<PropertyCard title='Beach House' price={200} />;

// Child receives props
function PropertyCard({ title, price }) {
   return (
      <div>
         {title}: ${price}
      </div>
   );
}

Props characteristics:

• Read-only (immutable)
• Passed from parent to child
• Can be any JavaScript value
• Use destructuring for cleaner code

4. Array.map() for Lists

Render dynamic lists with .map():

function PropertyList({ properties }) {
   return (
      <div>
         {properties.map((property) => (
            <PropertyCard
               key={property.id}
               title={property.title}
               price={property.price}
            />
         ))}
      </div>
   );
}

Map rules:

• Always provide unique key prop
• Use id or unique identifier
• Keys help React track changes
• Don't use array index as key

5. Component Composition

Build complex UIs by combining small components:

Benefits:

• Code reuse
• Easier testing
• Better organization
• Simpler maintenance

Your Component Architecture

Let's visualize what you built:

Data flow:

Before and After

Before Module 1:

• Empty React project
• Default boilerplate code
• No understanding of components

After Module 1:

• Working property listing page
• Three custom components
• Understanding of JSX, props, and composition
• Professional styling with Tailwind CSS
• Responsive layout

Common Patterns You Learned

Skills Progression

You can now:

• ✅ Create functional components with proper syntax
• ✅ Write JSX with JavaScript expressions
• ✅ Pass and receive props between components
• ✅ Destructure props for cleaner code
• ✅ Render lists dynamically with .map()
• ✅ Use keys correctly for list items
• ✅ Style components with Tailwind CSS
• ✅ Build responsive layouts with CSS Grid
• ✅ Compose components into larger UIs
• ✅ Organize project with proper file structure

Module 1 Milestones

Debugging Tips You've Learned

"Cannot read property of undefined"

• Check that props are being passed correctly
• Verify data structure matches component expectations

"Each child in a list should have a unique key prop"

• Add key={property.id} to mapped components
• Use unique identifiers, not array indexes

"className is not defined"

• Import Tailwind directives in index.css
• Restart dev server after Tailwind installation

Component not displaying

• Check that component is imported
• Verify component is exported with export default
• Ensure JSX is returned from component

React Developer Tools

What's Next?

In Module 2, you'll learn:

• State management with useState
• Event handling (clicks, inputs, forms)
• Conditional rendering (show/hide elements)
• Lifting state up (sharing state between components)
• Building search filters for your properties

You'll add interactivity to your static homepage!

Practice Before Moving On

Celebrate Your Progress! 🎉

You've learned the fundamental building blocks of React:

• Components
• JSX
• Props
• Composition
• Dynamic rendering

These concepts form the foundation for everything else in React. You're now ready to add interactivity with state and events!

Self-Assessment

Rate your understanding:

Resources for Further Learning

• React Docs: Thinking in React
• Tailwind CSS Documentation
• JavaScript Array Methods

Final Checkpoint ✅

Before moving to Module 2, ensure:

• ✅ Your homepage displays multiple property cards
• ✅ Data flows from HomePage → PropertyList → PropertyCard
• ✅ Styling looks professional with Tailwind CSS
• ✅ Layout is responsive on different screen sizes
• ✅ You understand components, props, and composition
• ✅ No console errors in browser DevTools

Ready for Module 2?

Great work completing Module 1! You've built a solid foundation. In Module 2, you'll make your application interactive with state and events.