React JSX Basics Practice Questions with Solutions

Introduction

JSX is one of the most important concepts to understand when learning React.js. It allows developers to write HTML-like syntax directly inside JavaScript code. JSX makes React components easier to read and helps describe what the user interface should look like. In this chapter, you will practice writing basic JSX, using elements, nesting elements, displaying text, adding JavaScript expressions, and understanding common JSX rules. React JSX Basics practice questions with solutions help to understand the concepts.

1. What is JSX in React.js?

JSX stands for JavaScript XML.

It is a syntax extension for JavaScript that allows you to write HTML-like code inside JavaScript.

Example:

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

export default App;

Here:

<h1>Hello React</h1>

is JSX.

JSX makes the UI structure easier to understand.

Answer: JSX is a JavaScript syntax extension used to describe the user interface in React.

2. Why is JSX used in React?

JSX makes it easier to write and understand the structure of a React user interface.

Without JSX, you would need to create React elements using JavaScript functions.

With JSX:

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

The UI structure looks similar to HTML, making it easier to read.

Answer: JSX provides a convenient and readable way to describe React UI.

3. Is JSX the same as HTML?

No. JSX looks similar to HTML, but it is not exactly the same.

For example, HTML uses:

<label for="name">Name</label>

In JSX, you normally use:

<label htmlFor="name">Name</label>

Similarly, JSX uses JavaScript naming conventions for many attributes.

For example:

<div className="container">
  Hello
</div>

instead of:

<div class="container">
  Hello
</div>

Answer: JSX looks like HTML but follows JavaScript and React-specific rules.

4. How do you write a simple JSX element?

A JSX element can be written using an opening tag, content, and a closing tag.

Example:

<h1>Hello World</h1>

You can also create other elements:

<p>Welcome to React</p>
<button>Click Me</button>

These elements can be returned from a React component:

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

Answer: JSX elements use HTML-like syntax inside JavaScript.

5. How do you write multiple JSX elements?

Multiple JSX elements can be grouped inside a parent element.

Example:

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <p>Welcome to my website.</p>
      <button>Learn More</button>
    </div>
  );
}

export default App;

Here, the <div> is the parent element and the other elements are its children.

div
├── h1
├── p
└── button

Answer: Multiple JSX elements can be grouped inside one parent element.

6. What is the JSX rule about returning a single parent element?

A React component’s returned JSX needs to have one enclosing root.

For example, this is valid:

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

But writing two separate elements directly like this is not valid:

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

You can also use a React Fragment:

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

The Fragment groups the elements without adding an extra HTML element to the DOM.

Answer: Returned JSX should have one root, which can be a normal element or a Fragment.

7. How do you add JavaScript inside JSX?

JavaScript expressions can be written inside JSX using curly braces {}.

Example:

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

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

export default App;

The output will be:

Hello, Rohit

You can also use expressions:

function App() {
  const a = 10;
  const b = 20;

  return <p>Total: {a + b}</p>;
}

Output:

Total: 30

Answer: Use {} to include JavaScript expressions inside JSX.

8. How do you write a self-closing JSX element?

Some elements do not need separate closing tags.

In JSX, they can be written as self-closing elements.

Example:

<img src="/logo.png" alt="Logo" />

Another example:

<input type="text" />

Notice the / before >.

This is different from HTML, where some elements may traditionally be written without an explicit closing slash.

Answer: A self-closing JSX element ends with />.

9. Find and correct the errors in this JSX code

Consider this code:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <img src="/logo.png">
      <input type="text">
      <p>Hello</p>
    </div>
  );
}

There are problems with the <img> and <input> elements.

In JSX, they should be self-closing:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <img src="/logo.png" alt="Logo" />
      <input type="text" />
      <p>Hello</p>
    </div>
  );
}

The corrected code follows JSX syntax correctly.

Answer: JSX requires elements such as img and input to be properly self-closed.

10. Create a React component using basic JSX rules

Create a component that displays a student’s information.

function Student() {
  const name = "Aman";
  const course = "React.js";

  return (
    <div>
      <h1>Student Details</h1>
      <h2>{name}</h2>
      <p>Course: {course}</p>
      <button>View Profile</button>
    </div>
  );
}

export default Student;

Here we are using several JSX concepts:

• Parent element: <div>
• Heading elements: <h1> and <h2>
• JavaScript expressions: {name} and {course}
• Paragraph: <p>
• Button: <button>
• Properly nested JSX

The output will look like:

Student Details

Aman
Course: React.js

[View Profile]

Answer: JSX allows HTML-like elements and JavaScript expressions to be combined inside a React component.

Key Takeaways

• JSX stands for JavaScript XML.
• JSX is a syntax extension for JavaScript used with React.
• JSX looks similar to HTML but follows React and JavaScript rules.
• JSX elements can be written directly inside React components.
• Multiple JSX elements need a single enclosing root.
• React Fragments can group elements without adding an extra DOM element.
• JavaScript expressions can be written inside JSX using {}.
• JSX uses className instead of the HTML class attribute.
• Some JSX elements need to be self-closed using />.
• JSX makes React UI code easier to read and organize.

FAQs

1. What does JSX stand for?

JSX stands for JavaScript XML.

2. Is JSX mandatory in React?

No. React can be used without JSX, but JSX is widely used because it makes UI code easier to write and understand.

3. Can I write JavaScript inside JSX?

Yes. JavaScript expressions can be placed inside curly braces {}.

Example:

<h1>{name}</h1>

4. Why does JSX require a single parent element?

React components return one JSX tree. Multiple elements can therefore be wrapped in a parent element or a Fragment.

5. What is the difference between HTML and JSX?

JSX looks similar to HTML but uses JavaScript-based syntax and React-specific rules. For example, JSX normally uses className instead of class.

6. What is a React Fragment?

A Fragment allows multiple JSX elements to be grouped without adding an extra HTML element to the DOM.

Example:

<>
  <h1>Hello</h1>
  <p>Welcome</p>
</>

7. Why do some JSX elements end with />?

Elements such as img and input are written as self-closing JSX elements:

<img src="/logo.png" alt="Logo" />
<input type="text" />

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

Rishabh Kumar