Reusable components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reusable component in React?

A reusable component is a piece of UI code that can be used multiple times in different parts of an app, helping to avoid repetition and keep code clean.

beginner

How do props help in making React components reusable?

Props let you pass different data to the same component, so it can show different content or behave differently each time it is used.

intermediate

Why should reusable components be small and focused?

Small, focused components are easier to understand, test, and reuse in many places without extra work or confusion.

beginner

What is the difference between a reusable component and a one-time component?

A reusable component is designed to be used many times with different data, while a one-time component is built for a single specific use.

beginner

Give an example of a simple reusable React component.

Example: A Button component that takes props like 'label' and 'onClick' so it can be used anywhere with different text and actions.

What makes a React component reusable?

A It accepts props to customize its content or behavior

B It uses state internally only

C It is written as a class component

D It is only used once in the app

Reusable components accept props so they can show different content or behave differently each time.

Which of these is a benefit of reusable components?

A Writing more code for each use

B Making the app slower

C Avoiding repetition and making code easier to maintain

D Limiting the app to one style

Reusable components help avoid repeating code and make maintenance easier.

How do you pass data to a reusable React component?

A Using HTML tags

B Using props

C Using CSS

D Using global variables

Props are the way to pass data into React components.

What should a reusable component focus on?

A Being very complex

B Doing many unrelated tasks

C Having no props

D Being small and focused on one job

Small, focused components are easier to reuse and maintain.

Which of these is NOT a good practice for reusable components?

A Hardcoding content inside the component

B Keeping components small

C Using props for customization

D Using the component multiple times

Hardcoding content reduces reusability because the component can't adapt to different data.

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

Think about how using the same piece of UI code in many places helps save time.

Describe how you would create a simple reusable button component in React.

Focus on how props let you change the button text and action.