Components are like LEGO bricks that you combine to build a whole website. Each piece is a separate, manageable part of the user interface.

The Building Blocks

Instead of building the same button many times, you create it once and reuse it everywhere. This saves time and keeps your design consistent.

Reusable UI Parts

Props, short for properties, act like a delivery service that sends information to a component. They allow you to tell a specific part what data it should display.

Passing Information Along

Components have family-like relationships where one piece contains others. The outer 'parent' piece is responsible for giving instructions to the 'child' pieces inside it.

Parent and Child Roles

Information always travels in one direction, usually from the top down. This keeps the app organized and makes it easier to track where data is coming from.

One-Way Information Flow

Props let you change how a part looks or acts without rewriting it. For example, you can use a 'color' prop to make the same button look blue or red.

Customizing Your Components

Once a component receives props, it cannot change that information itself. It can only use the data exactly as it was handed over by the parent.

Locked Information

You can nest small parts inside bigger ones to create complex layouts. This is like putting a clock component inside a larger dashboard component.

Components Inside Components

You can set 'default' values for props in case the parent forgets to send any. This ensures your component still works correctly even if some data is missing.

Backup Default Information

Components can be used to show many items at once, like a list of products. Each item in the list uses the same component but receives unique props.

Displaying Lists Dynamically

Sometimes you want to put text or other parts inside a component, like filling a box. This is handled by a special prop that captures everything inside the component tags.

Content Within Parts

Components can use props to decide what to show on the screen. For example, a 'isLoggedIn' prop could tell a component to show either a 'Login' or 'Logout' button.

Making Visual Decisions

You can pass actions, like what happens when a button is clicked, as props. This allows a child component to tell its parent when the user interacts with it.

Handling User Actions

By separating an app into components, each piece becomes independent. If one part breaks or needs an update, you can fix it without affecting the rest of the site.

The Digital LEGO Metaphor