🔹MCQs Of Class 2
File Structure and JSX Basics
✅ Section 1: React File Structure
(1–15)
1.
Which
file is the entry point of a React application?
a) App.js
b) index.js
c) main.js
d) root.js
✅ Answer: b) index.js
2.
Which
file typically contains the root React component?
a) App.css
b) index.html
c) App.js
d) component.js
✅ Answer: c) App.js
3.
Which
HTML element does React target for rendering the application?
a) <body>
b) <div id="app">
c) <div id="root">
d) <main>
✅ Answer: c) <div id="root">
4.
Which
file contains the dependencies of the React project?
a) index.js
b) App.js
c) package.json
d) config.js
✅ Answer: c) package.json
5.
Which
command creates a new React app using Vite?
a) npm create react-app
b) npx create-react-app
c) npm create vite@latest
d) create-react
✅ Answer: c) npm create vite@latest
6.
What
does index.js typically import and render?
a) package.json
b) index.html
c) App component
d) DOM component
✅ Answer: c) App component
7.
Which
directory contains the main JavaScript and component files?
a) public
b) root
c) src
d) node_modules
✅ Answer: c) src
8.
Which
file defines the root HTML structure in a React app?
a) App.js
b) index.js
c) main.js
d) index.html
✅ Answer: d) index.html
9.
Which
command installs project dependencies from package.json?
a) npm install
b) npm run
c) npm compile
d) npm execute
✅ Answer: a) npm install
10.
What
is the purpose of node_modules?
a) Stores user data
b) Contains compiled HTML
c) Stores installed packages
d) Contains CSS files
✅ Answer: c) Stores installed packages
11.
Which
file contains project configuration metadata?
a) config.js
b) project.json
c) package.json
d) settings.js
✅ Answer: c) package.json
12.
Which
file does index.js render to the DOM?
a) component.js
b) App.js
c) render.js
d) main.js
✅ Answer: b) App.js
13.
Which
directory contains the main index.html in React?
a) /html
b) /src
c) /public
d) /root
✅ Answer: c) /public
14.
Which
folder is commonly used to store reusable React components?
a) /pages
b) /components
c) /utils
d) /css
✅ Answer: b) /components
15.
What
is rendered by default in App.js when you create a new React app?
a) Blank screen
b) Welcome to React
c) A sample component
d) A Vite + React starter UI
✅ Answer: d) A Vite + React starter UI
✅ Section 2: JSX Syntax and Rules
(16–35)
16.
What
is JSX?
a) A type of CSS
b) A JavaScript preprocessor
c) A JavaScript XML syntax extension
d) A React variable
✅ Answer: c) A JavaScript XML syntax extension
17.
JSX
must return only:
a) Two or more elements
b) A string
c) One parent element
d) Only text
✅ Answer: c) One parent element
18.
What
is the correct JSX syntax for a self-closing tag?
a) <img>
b) <img/>
c) <img />
d) <img></img>
✅ Answer: c) <img />
19.
Which
keyword is used instead of class in JSX?
a) class
b) class-jsx
c) className
d) classId
✅ Answer: c) className
20.
JSX
allows you to embed expressions inside:
a) []
b) ()
c) {}
d) ""
✅ Answer: c) {}
21.
What
is the correct way to write an expression inside JSX?
a) <p>{2 + 2}</p>
b) <p>(2 + 2)</p>
c) <p>[2 + 2]</p>
d) <p>2 + 2</p>
✅ Answer: a) <p>{2 + 2}</p>
22.
Which
of the following is invalid JSX?
a) <div><h1>Hello</h1></div>
b) <div><h1>Hello</h1><p>Hi</p></div>
c) <div><h1>Hello</h1><p>Hi</p></div>
d) <div><h1>Hello</h1><p>Hi</p></div
✅ Answer: d) <div><h1>Hello</h1><p>Hi</p></div
23.
What
is the output of this JSX? const x = 5; <p>{x + 1}</p>
a) 5
b) x + 1
c) 6
d) Error
✅ Answer: c) 6
24.
Which
of the following is a valid variable declaration in JSX?
a) let 1name = "John"
b) const fullName = "Jane Doe"
c) var age: 30
d) int value = 100
✅ Answer: b) const fullName = "Jane Doe"
25.
How
do you render a string variable in JSX?
a) "<p>name</p>"
b) name = "Amit"; <p>name</p>
c) <p>{name}</p>
d) {{name}}
✅ Answer: c) <p>{name}</p>
26.
JSX
is compiled to which language?
a) HTML
b) CSS
c) JavaScript
d) XML
✅ Answer: c) JavaScript
27.
JSX
expressions must be wrapped inside:
a) ""
b) ()
c) {}
d) []
✅ Answer: c) {}
28.
What
is the correct way to apply inline CSS in JSX?
a) <p style="color: red">Text</p>
b) <p style={{color: "red"}}>Text</p>
c) <p css="color: red">Text</p>
d) <p style="color:red;">Text</p>
✅ Answer: b) <p style={{color: "red"}}>Text</p>
29.
JSX
requires all tags to be:
a) Closed
b) Self-enclosed
c) Commented
d) Optional
✅ Answer: a) Closed
30.
Which
is the correct way to comment inside JSX?
a) // comment
b) <!-- comment -->
c) {/* comment */}
d) /* comment */
✅ Answer: c) {/* comment */}
31.
JSX
code is typically written in which file?
a) .html
b) .txt
c) .js or .jsx
d) .css
✅ Answer: c) .js or .jsx
32.
Which
of the following JSX statements is valid?
a) <p>Hello</p>
b) <p>Hello
c) p>Hello</p>
d) <p>"Hello"</p>
✅ Answer: a) <p>Hello</p>
33.
In
JSX, div, span, h1 are:
a) HTML tags
b) JavaScript variables
c) React hooks
d) Node modules
✅ Answer: a) HTML tags
34.
JSX
can contain which of the following?
a) Only strings
b) HTML elements and expressions
c) Only comments
d) Only JavaScript variables
✅ Answer: b) HTML elements and expressions
35.
Which
of the following is NOT allowed in JSX?
a) Multi-line HTML
b) Multiple root tags without a wrapper
c) Expressions
d) JavaScript variables
✅ Answer: b) Multiple root tags without a wrapper
✅ Section 3: Expressions &
Components (36–50)
36.
What
is the result of {10 * 2} in JSX?
a) 10
b) 2
c) 20
d) 102
✅ Answer: c) 20
37.
You
can pass expressions to JSX using:
a) []
b) ()
c) {}
d) <>
✅ Answer: c) {}`
38.
What
is the correct way to define a functional component?
a) function App() { return <h1>Hello</h1>; }
b) component App() => <h1>Hello</h1>
c) const App: () => <h1>Hello</h1>
d) App() <h1>Hello</h1>
✅ Answer: a) function App() { return <h1>Hello</h1>; }
39.
Which
keyword is used to export a component?
a) import
b) export default
c) return
d) module
✅ Answer: b) export default
40.
What is the result of this code: const name = "Tina";
<h2>{name.length}</h2>?
a) 4
b) Tina
c) name.length
d) Error
✅ Answer: a) 4
41.
How do you render a boolean value in
JSX?
a) <p>true</p>
b) <p>{true}</p>
c) <p>(true)</p>
d) <p>true()</p>
✅ Answer: b) <p>{true}</p>
42.
Which of the following is used for
conditional rendering in JSX?
a) if-else
b) switch
c) ternary operator
d) all of the above
✅ Answer: c) ternary operator
43.
JSX allows:
a) Logic statements
b) HTML only
c) Static content
d) Expressions and dynamic data
✅ Answer: d) Expressions and dynamic data
44.
How do you write a multi-line JSX
return statement?
a) Inside curly braces only
b) Inside one parent element like <div>
c) Write separate return statements
d) Not allowed
✅ Answer: b) Inside one parent element like <div>
45.
JSX tags must be:
a) Lowercase
b) PascalCase
c) HTML or component names
d) JavaScript keywords
✅ Answer: c) HTML or component names
46.
You can define multiple components
in:
a) One file
b) Only App.js
c) Only in index.js
d) Not allowed
✅ Answer: a) One file
47.
Which of the following is NOT a rule
of JSX?
a) Use className
instead of class
b) Wrap code in a parent element
c) You can use for
instead of htmlFor
d) JSX must return one element
✅ Answer: c) You can use for
instead of htmlFor
(You should use htmlFor)
48.
JSX helps in writing UI components
in:
a) XML
b) HTML
c) JavaScript
d) Java
✅ Answer: c) JavaScript
49.
Which JSX tag is used to wrap
multiple elements without adding a real DOM node?
a) <div>
b) <Fragment>
c) <section>
d) <wrapper>
✅ Answer: b) <Fragment>
50.
Which of the following statements is
true about JSX?
a) JSX is required in React
b) JSX is compiled to JavaScript using Babel
c) JSX runs in the browser directly
d) JSX is faster than JavaScript
✅ Answer: b) JSX is compiled to JavaScript using Babel
