What is the standard way to make a new React component available for use in other parts of a Backstage app?

Place it in the `node_modules` directory

Register it in the `catalog-info.yaml` file

Add it to the `app-config.yaml` file

Export it from its file and import it where needed

A developer is building a new settings page for an internal tool plugin. They want the page to have a consistent look and feel with the rest of Backstage. Which approach best achieves this?

Use Material-UI's Grid component directly without wrapping it in Backstage's Page component.

Use the Content, Header, and Page components from @backstage/core-components to structure the page.

Create a custom layout using plain HTML divs and inline styles to match the Backstage theme.

Copy the JSX from an existing plugin's page and modify it to fit the new settings page.

A developer needs to modify the sidebar in a Backstage app to add a new navigation link. They are unsure whether to modify the app's root component or a plugin. What is the correct location for this change?

In the Root component within packages/app/src/components/Root/Root.tsx.

In the plugin's own component that it exports for the sidebar.

In the packages/app/src/App.tsx file, adding a new route for the link.

In the app-config.yaml under the navigation section.

After making changes to a React component in a Backstage app, a developer wants to verify the changes render correctly in the browser. What is the most appropriate first step?

Run yarn dev from the root of the Backstage app and navigate to the page that contains the modified component.

Run yarn test to verify the component renders correctly in a test environment.

Run yarn lint to check for code errors before viewing the changes.

Run yarn build and then serve the static files from the dist directory.

Certified Backstage Associate (CBA)

Domain 4Objective 3

Make Changes to React Code in Backstage App CBA Practice Questions (Page 4)

Part of the Customizing Backstage domain, which accounts for 32% of the CBA exam. Linux Foundation does not publish an official question count, but from its 90-minute exam (~35–60 total, ~11–19 in this domain), expect 3–5 from this objective — we provide 23 practice questions to prepare you well beyond it. (estimate)

23questions here

5free pages

6concepts

32%of the exam

Questions 16–20

16foundation · easy
What is the standard way to make a new React component available for use in other parts of a Backstage app?
Select an answer first
17application · medium
A developer is building a new settings page for an internal tool plugin. They want the page to have a consistent look and feel with the rest of Backstage. Which approach best achieves this?
Select an answer first
18expert · medium
A developer needs to modify the sidebar in a Backstage app to add a new navigation link. They are unsure whether to modify the app's root component or a plugin. What is the correct location for this change?
Select an answer first
19application · medium
After making changes to a React component in a Backstage app, a developer wants to verify the changes render correctly in the browser. What is the most appropriate first step?
Select an answer first
20foundation · easy
Which Backstage package provides core UI components like `Table`, `Tabs`, and `Progress` that you can use in your own React components?
Select an answer first

Finished these 5 questions?

Review the revealed explanations, or continue through the curriculum.

Next 5 questions →Back to CBA

Free Basic Practice is a study aid with revealable answers — not a scored exam. Examers.io is independent and not affiliated with or endorsed by Linux Foundation. “CBA” is a trademark of its owner, used for identification only.