The UI Lego Blocks (Components & Props)

Requirement

Understand that a React application is just a collection of reusable custom HTML tags called "Components". You also need to learn how to pass data into these components using "Props" (short for properties) so that a single component can display different information.

Assignments (Start First)

1. Simple beginner UI task: Create a functional component called WelcomeBadge. It should return a simple <div> containing an <h1> that says "Welcome, User!" and a <p> tag with a short greeting. Render it on the screen.
2. Slightly improved version: Modify your WelcomeBadge to accept a name prop and a role prop. Update the component so it dynamically says "Welcome, [name]!" and displays their role. Render three different WelcomeBadge components on the screen, passing different names and roles to each.
3. Practical real-world component: Build a ProductCard component. It should accept props for imageUrl, title, price, and description. Use standard CSS to style it like a real e-commerce card. Render a grid of four different products.
4. "The Escalation": Create a NotificationBanner component. Pass it three props: message, type (which can be "success", "warning", or "error"), and isDismissible (a boolean). Use the type prop to change the background color of the banner. If isDismissible is true, render a small "X" button on the right side.

Lessons (Optional)

• Components: In React, components are just JavaScript functions that return JSX.
• JSX: It allows us to write HTML directly inside JavaScript. Wrap JavaScript variables in curly braces {likeThis}.
• Props: Props are arguments passed to your component functions. They are read-only.
• Rendering: You combine components by placing them inside one another, e.g., <ProductCard title="Shoes" />.

The Summary and Quizzes

1. Concept explanation: Components let you split the UI into independent, reusable pieces. Props let you pass data into those pieces to make them dynamic.
2. Why it works in React: React uses these components to build a "Virtual DOM". When props change, React intelligently figures out exactly which parts of the screen need to be updated.
3. Challenge question: If you have a UserProfile component that receives a user object as a prop, and you want to display the user's email inside an <h2> tag, what is the exact JSX syntax you would write inside the component?