React Components Practice Questions with Solutions

By /

Introduction

React components are the building blocks of a React application. Instead of creating an entire website in one large file, React allows developers to divide the user interface into small, reusable components. A component can represent a button, navbar, card, form, page, or complete section. In this chapter, you will practice creating functional components, using components inside other components, reusing components, and understanding how component-based development makes React applications easier to manage. React Components practice questions with solutions help to understand the concepts.

1. What is a React Component?

A React component is a reusable piece of user interface.

For example, a simple component can display a heading:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

export default Welcome;

Here, Welcome is a React component.

A component can contain:

  • HTML-like JSX
  • JavaScript logic
  • Variables
  • Event handling
  • Other components

Answer: A React component is a reusable part of a user interface.

2. How do you create a functional component in React?

A functional component is created using a JavaScript function.

Example:

function Greeting() {
  return <h1>Hello Student</h1>;
}

export default Greeting;

The function Greeting is the component.

It returns JSX that React displays on the screen.

Answer: Create a functional component using a JavaScript function that returns JSX.

3. How do you use one component inside another component?

A component can be used inside another component by writing its name as a JSX element.

Example:

function Header() {
  return <h1>My Website</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Welcome to my website.</p>
    </div>
  );
}

export default App;

Here, Header is used inside App:

<Header />

Answer: A component can be included inside another component using JSX syntax such as <Header />.

4. Why are React components useful?

Components make React applications easier to build and manage.

Suppose a website has:

  • Header
  • Navbar
  • Sidebar
  • Product Card
  • Footer

Instead of writing everything in one component, you can create separate components.

App
├── Header
├── Navbar
├── Sidebar
├── ProductCard
└── Footer

This provides:

  • Reusability
  • Better organization
  • Easier maintenance
  • Cleaner code
  • Easier debugging

Answer: Components divide a large user interface into smaller and manageable reusable parts.

5. Can a React component contain another component?

Yes. A React component can contain and use other components.

Example:

function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Button />
    </div>
  );
}

export default App;

Here, Button is used inside App.

This creates a component relationship:

App
 └── Button

Answer: Yes, components can be nested inside other components.

6. How do you reuse the same React component multiple times?

One of the biggest advantages of components is reusability.

For example:

function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

export default App;

The same Button component is used three times.

The browser will display three buttons.

Click Me
Click Me
Click Me

Answer: A component can be reused multiple times by placing its JSX element wherever it is needed.

7. How do you create a separate component file?

React components can be stored in separate files to keep the project organized.

Create a file named:

Button.jsx

Add:

function Button() {
  return <button>Click Me</button>;
}

export default Button;

Then import it into App.jsx:

import Button from './Button';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Button />
    </div>
  );
}

export default App;

This makes the Button component reusable throughout the application.

Answer: Create the component in a separate .jsx file, export it, and import it wherever required.

8. What is the difference between a component and normal HTML?

Normal HTML directly describes elements:

<button>Click Me</button>

React allows you to create a reusable component:

function Button() {
  return <button>Click Me</button>;
}

Then you can use:

&lt;Button />

The main difference is that a React component can contain reusable UI and JavaScript logic.

Answer: HTML elements describe individual page elements, while React components create reusable UI structures and can contain application logic.

9. Create a reusable Student component

Create a component named Student:

function Student() {
  return (
    <div>
      <h2>Rohit</h2>
      <p>Course: React.js</p>
    </div>
  );
}

export default Student;

Now use it inside App.jsx:

import Student from './Student';

function App() {
  return (
    <div>
      <h1>Student Details</h1>

      <Student />
      <Student />
    </div>
  );
}

export default App;

The Student component is reused twice.

This demonstrates one of the most important ideas in React: write once and reuse where required.

Answer: Create a separate Student component and render it multiple times inside App.

10. Build a simple React page using multiple components

Let’s create a small webpage using separate components.

Header Component

function Header() {
  return <header><h1>My Website</h1></header>;
}

export default Header;

Content Component

function Content() {
  return (
    <main>
      <h2>Welcome</h2>
      <p>Learn React.js step by step.</p>
    </main>
  );
}

export default Content;

Footer Component

function Footer() {
  return <footer><p>© 2026 My Website</p></footer>;
}

export default Footer;

App Component

import Header from './Header';
import Content from './Content';
import Footer from './Footer';

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

The component structure becomes:

App
├── Header
├── Content
└── Footer

This is a basic example of component-based architecture in React.

Answer: A React page can be divided into multiple components and combined inside the main App component.

Key Takeaways

  • React components are the building blocks of React applications.
  • A functional component is commonly created using a JavaScript function.
  • Components return JSX to describe the user interface.
  • One component can be used inside another component.
  • The same component can be reused multiple times.
  • Components can be stored in separate .jsx files.
  • Components make large applications easier to organize.
  • Reusable components reduce repeated code.
  • A React application can be structured as a tree of components.
  • Good component structure makes React applications easier to maintain.

FAQs

1. What is a component in React.js?

A component is a reusable piece of user interface that can contain JSX and JavaScript logic.

2. How do I create a React component?

You can create a functional component using a JavaScript function:

function Welcome() {
  return <h1>Hello</h1>;
}

3. Can one React component use another component?

Yes. A component can use another component by rendering it as a JSX element.

<Header />

4. Why should I create separate components?

Separate components improve code organization, reusability, readability, and maintenance.

5. Can the same React component be used multiple times?

Yes. A component can be rendered multiple times wherever the same UI is required.

6. Should every React component be in a separate file?

No. Small components can be placed in the same file. However, using separate files can make larger projects easier to organize.

7. What is the main purpose of React components?

The main purpose is to divide the user interface into smaller, reusable, and manageable pieces.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top