React js Introduction Practice Questions with Solutions

Introduction

React.js is a JavaScript library used to build interactive and reusable user interfaces. It helps developers divide a web application into small components that can be created, managed, and reused easily. In this chapter, you will practice the basic concepts of React.js through 10 solved questions, starting with simple definitions and gradually moving toward basic coding and problem-solving. These questions will help beginners understand React and check their basic knowledge. React js Introduction practice questions with solutions help to understand the concepts.

1. What is React.js?

Question

What is React.js?

Solution

React.js is a JavaScript library used for building user interfaces.

It is especially popular for creating interactive web applications.

For example, a website can have different parts such as:

Navigation bar
Login form
Buttons
Product cards
User profile
Dashboard

In React, these parts can be created as separate reusable components.

Example

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

Output

Welcome to React.js

Explanation

The Welcome function is a React component. It returns a heading that React can display on the webpage.

2. Is React.js a programming language?

Question

Is React.js a programming language like JavaScript or Python?

Solution

No. React.js is not a programming language.

React.js is a JavaScript library.

JavaScript is the programming language used to write React applications.

For example:

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

The code uses JavaScript along with React and JSX.

Simple Difference

Technology	Type
JavaScript	Programming Language
React.js	JavaScript Library
HTML	Markup Language
CSS	Styling Language

Explanation

Think of JavaScript as the main programming language and React as a library that provides useful tools and patterns for building user interfaces.

3. Why is React.js used?

Question

Why do developers use React.js to build web applications?

Solution

React.js is used because it makes it easier to build interactive and reusable user interfaces.

One important feature is the component-based approach.

For example, imagine an online shopping website.

It may contain:

Header
Product Card
Search Box
Shopping Cart
Footer

Each part can be developed as a separate component.

Example

function ProductCard() {
  return (
    <div>
      <h2>Laptop</h2>
      <p>₹50,000</p>
    </div>
  );
}

The same ProductCard component can be reused for many products.

Explanation

React helps developers organize large user interfaces into smaller and reusable pieces.

4. What is a React component?

Question

Create a simple React component named Greeting that displays “Hello Student”.

Solution

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

A simple functional component can be created like this:

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

Step-by-Step

Step 1: Create a function.

function Greeting() {

Step 2: Return JSX.

return <h1>Hello Student</h1>;

Step 3: Close the function.

Complete Code

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

Output

Hello Student

Explanation

Greeting is a functional React component because it is a JavaScript function that returns JSX.

5. What is JSX?

Question

Write a React component using JSX to display the heading “Learn React.js”.

Solution

JSX is a syntax extension that allows developers to write HTML-like syntax inside JavaScript.

Example:

function App() {
  return <h1>Learn React.js</h1>;
}

Output

Learn React.js

Step-by-Step

The following part:

&lt;h1>Learn React.js&lt;/h1>

looks like HTML, but it is written inside a JavaScript function.

React uses JSX to describe what the user interface should look like.

Important Point

JSX is not exactly HTML. It is syntax that is transformed into JavaScript during the React build process.

6. How can you display a JavaScript variable in JSX?

Question

Create a React component that stores the name "Rahul" in a variable and displays:

Hello Rahul

Solution

function App() {
  const name = "Rahul";

  return <h1>Hello {name}</h1>;
}

Step-by-Step

First, create a variable:

const name = "Rahul";

Then place the variable inside JSX curly braces:

{name}

So the complete heading becomes:

<h1>Hello {name}</h1>

Output

Hello Rahul

Explanation

In JSX, curly braces {} allow us to use JavaScript expressions.

For example:

{name}

tells React to display the value stored in the name variable.

7. What are Props in React?

Question

Create a Student component that receives a student’s name through props and displays it.

Solution

Props are used to pass data from one React component to another.

Example:

function Student(props) {
  return <h2>Student Name: {props.name}</h2>;
}

function App() {
  return <Student name="Priya" />;
}

Step-by-Step

The App component passes a value:

<Student name="Priya" />

Here, name is a prop.

The Student component receives the prop:

props.name

Therefore:

<h2>Student Name: {props.name}</h2>

displays the student’s name.

Output

Student Name: Priya

Explanation

Props make components reusable.

For example:

&lt;Student name="Priya" />
&lt;Student name="Rahul" />
&lt;Student name="Aman" />

The same component can display different student names.

8. What is State in React?

Question

Create a React component that stores a number using state and displays its initial value as 0.

Solution

React provides the useState Hook for managing state in functional components.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return <h1>{count}</h1>;
}

Step-by-Step

First, import useState:

import { useState } from "react";

Next, create the state:

const [count, setCount] = useState(0);

Here:

count stores the current value.
setCount updates the value.
0 is the initial value.

Finally:

<h1>{count}</h1>

displays the value.

Output

Explanation

State is used when a component needs to remember information that can change over time.

9. How do you handle a button click in React?

Question

Create a React component with a button that prints "Button Clicked" in the browser console when the button is clicked.

Solution

React provides event handlers such as onClick for handling user actions.

function App() {
  function handleClick() {
    console.log("Button Clicked");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

Step-by-Step

First, create a function:

function handleClick() {
  console.log("Button Clicked");
}

This function contains the action that should happen when the button is clicked.

Then connect the function to the button:

<button onClick={handleClick}>Click Me</button>

Output on Webpage

[ Click Me ]

When the user clicks the button, the console displays:

Button Clicked

Important Point

Use:

onClick={handleClick}

to pass the function to the event handler.

Do not immediately execute the function with:

onClick={handleClick()}

when you want it to run only after the click.

10. Create a simple React component using a component and props

Question

Create a parent App component and a child Course component. Pass "React.js" from App to Course using props and display:

Course: React.js

Solution

First, create the child component:

function Course(props) {
  return <h2>Course: {props.name}</h2>;
}

Now create the parent component:

function App() {
  return <Course name="React.js" />;
}

Complete Code

function Course(props) {
  return <h2>Course: {props.name}</h2>;
}

function App() {
  return <Course name="React.js" />;
}

Step-by-Step

Step 1: App is the parent component.

function App() {

Step 2: App sends "React.js" through the name prop.

<Course name="React.js" />

Step 3: Course receives the prop.

props.name

Step 4: The value is displayed.

<h2>Course: {props.name}</h2>

Output

Course: React.js

What You Learned

This question combines three important React concepts:

Component → Props → JSX

Once you understand these three concepts, you have a good foundation for moving to the next React.js topics.

Key Takeaways

React.js is a JavaScript library for building user interfaces.
React is not a programming language.
React applications are commonly divided into reusable components.
A functional component is usually created using a JavaScript function.
JSX allows HTML-like syntax to be written inside JavaScript.
Curly braces {} allow JavaScript expressions to be used inside JSX.
Props are used to pass data between components.
State stores information that can change during the execution of an application.
useState is a React Hook used to manage state in functional components.
React provides event handlers such as onClick for responding to user actions.
Components and props are fundamental concepts for building reusable React interfaces.

FAQs

1. What is React.js?

React.js is a JavaScript library used to build interactive and reusable user interfaces, particularly for web applications.

2. Is React.js a programming language?

No. React.js is a JavaScript library. JavaScript is the programming language commonly used to create React applications.

3. What is a component in React?

A component is a reusable part of a React user interface. Functional components are commonly written as JavaScript functions that return JSX.

4. What is JSX in React?

JSX is a syntax extension that allows developers to write HTML-like markup inside JavaScript code. React uses JSX to describe the user interface.

5. What are props in React?

Props are data passed from one component to another, commonly from a parent component to a child component. Props help make components reusable.

6. What is state in React?

State is information managed by a component that can change during the application’s execution. React can update the interface when state changes.

7. Can a beginner learn React.js?

Yes. Beginners can learn React.js after understanding basic HTML, CSS, and JavaScript. A good starting point is JavaScript fundamentals such as variables, functions, arrays, objects, and basic ES6 syntax.

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

Rishabh Kumar

Introduction

1. What is React.js?

Question

Solution

Example

Output

Explanation

2. Is React.js a programming language?

Question

Solution

Simple Difference

Explanation

3. Why is React.js used?

Question

Solution

Example

Explanation

4. What is a React component?

Question

Solution

Step-by-Step

Complete Code

Output

Explanation

5. What is JSX?

Question

Solution

Output

Step-by-Step

Important Point

6. How can you display a JavaScript variable in JSX?

Question

Solution

Step-by-Step

Output

Explanation

7. What are Props in React?

Question

Solution

Step-by-Step

Output

Explanation

8. What is State in React?

Question

Solution

Step-by-Step

Output

Explanation

9. How do you handle a button click in React?

Question

Solution

Step-by-Step

Output on Webpage

Important Point

10. Create a simple React component using a component and props

Question

Solution

Complete Code

Step-by-Step

Output

What You Learned

Key Takeaways

FAQs

1. What is React.js?

2. Is React.js a programming language?

3. What is a component in React?

4. What is JSX in React?

5. What are props in React?

6. What is state in React?

7. Can a beginner learn React.js?

Related Posts