Reusable UI components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reusable UI component in React?

A reusable UI component is a piece of code that defines a part of the user interface which can be used multiple times in different places, helping to keep the code simple and consistent.

beginner

Why should we use reusable components?

Using reusable components saves time, reduces errors, and makes the app easier to maintain because you write the code once and use it many times.

beginner

How do you pass data to a reusable component in React?

You pass data to a reusable component using props, which are like parameters that customize the component's content or behavior.

intermediate

What is the difference between a functional component and a reusable component?

A functional component is a type of React component defined as a function. A reusable component is any component (often functional) designed to be used multiple times with different data.

beginner

How can you make a button component reusable for different labels and actions?

Create a button component that accepts label and onClick as props. This way, you can change the text and what happens when clicked without rewriting the button.

What is the main purpose of reusable UI components in React?

A To write code once and use it many times

B To make the app slower

C To increase the file size

D To avoid using props

Reusable components help you write code once and use it many times, making development faster and easier.

How do you customize a reusable component's content?

A By changing its internal code every time

B By copying and pasting it

C By using global variables

D By passing props to it

Props allow you to customize a component's content or behavior without changing its code.

Which React feature helps you create reusable UI parts?

A Components

B Events

C State

D Hooks

Components are the building blocks in React used to create reusable UI parts.

What type of React component is recommended for creating reusable UI components?

A Class components

B Functional components

C Inline styles

D DOM elements

Functional components are simple and recommended for creating reusable UI components in modern React.

If you want a button component to do different things when clicked, what should you pass to it?

A A different CSS file

B A new component each time

C An onClick function as a prop

D A global variable

Passing an onClick function as a prop lets the button perform different actions when clicked.

Explain what reusable UI components are and why they are useful in React.

Think about how you can use the same building block many times with different details.

Describe how you would create a reusable button component that can show different text and perform different actions.

Focus on how props help customize the button.