React MCQ Test Link

https://www.w3schools.com/quiztest/quiztest.asp?
qtest=REACT

1) Which of the following is the correct name of React.js?

a. React

b. React.js

c. ReactJS

d. All of the above

Hide Answer Workspace

Answer: D is the correct option. React.js is a free, open-source front-end

JavaScript library used for building user interfaces or UI components. It is
also known as React or ReactJS.

2) Which of the following are the advantages of React.js?

a. React.js can increase the application's performance with Virtual

DOM.

b. React.js is easy to integrate with other frameworks such as Angular,

BackboneJS since it is only a view library.

c. React.js can render both on client and server side.

d. All of the above

Hide Answer Workspace

Answer: D is the correct option as all of the above statements are the
advantages of React.js.
3) Which of the following is not a disadvantage of React.js?

a. React.js has only a view layer. We have put your code for Ajax
requests, events and so on.

b. The library of React.js is pretty large.

c. The JSX in React.js makes code easy to read and write.

d. The learning curve can be steep in React.js.

Hide Answer Workspace

Answer: C is the correct answer. "The JSX in React.js makes code easy to
read and write" is an advantage of React.js.

4) Which of the following command is used to install create-react-app?

a. npm install -g create-react-app

b. npm install create-react-app

c. npm install -f create-react-app

d. install -g create-react-app

Hide Answer Workspace

Answer: A is the correct answer. The "npm install -g create-react-app"

command is used to install the create-react-app.

5) What of the following is used in React.js to increase performance?

a. Original DOM

b. Virtual DOM

c. Both A and B.
 d. None of the above.

Hide Answer Workspace

Answer: B is the correct answer. Virtual DOM is used in React.js to

increase performance.

6) A class is a type of function, but instead of using the keyword function to

initiate it, which keyword do we use?

a. Constructor

b. Class

c. Object

d. DataObject

Hide Answer Workspace

Answer: B is the correct answer. A class is a type of function, but instead

of using the keyword function to initiate it, we use the keyword class.

7) Which of the following acts as the input of a class-based component?

a. Class

b. Factory

c. Render

d. Props
Hide Answer Workspace

Answer: D "props" is the correct answer.

8) Which of the following keyword is used to create a class inheritance?

a. Create

b. Inherits

c. Extends

d. This

Hide Answer Workspace

Answer: C is the correct answer. The "Extends" keyword is used to create

a class inheritance.

9) What would be the output of the following example?

1. var Helloword=(props)=>
2. {
3. return(
4. <div>
5. Hello World 1
6. </div>
7. <div>
8. Hello World 2
9. </div>
10. );
11. }
12. ReactDOM.render(<Helloworld/>,mountNode)

a. Hello World 1

b. Hello World 2

c. Hello World 1 Hello World 2

 d. Error

Hide Answer Workspace

Answer: D is the correct option. The two adjacent elements in JSX should
be wrapped in an element so, this program will result an error.

10) What is the default port where webpack-server runs?

a. 3000

b. 8080

c. 3030

d. 6060

Hide Answer Workspace

Answer: B is the correct answer. The default port for webpack-server is

8080.

or
What is the default port for React serve?
By default, React applications created with create-react-app are configured to run
on port 3000
11) How many numbers of elements a valid react component can return?

a. 1

b. 2

c. 4

d. 5

Hide Answer Workspace

Answer: A is the correct answer. In react component, we can return only

one element.

12) What is the declarative way to render a dynamic list of components

based on values in an array?

a. Using the reduce array method

b. Using the <Each /> component

c. Using the Array.map() method

d. With a for/while loop

Hide Answer Workspace

Answer: C is the correct option. The Array.map() method is used to

render a dynamic list of components based on values in an array.
13) How many ways of defining your variables in ES6?

a. 1

b. 3

c. 4

d. 5

Hide Answer Workspace

Answer: B is the correct option. In ES6, there are three ways of

defining your variables: var, let, and const.

14) What is a state in React?

a. A permanent storage.

b. Internal storage of the component.

c. External storage of the component.

d. None of the above.

Hide Answer Workspace

Answer: B is the correct answer.

15) What are the two ways to handle data in React?

a. State & Props

b. Services & Components

c. State & Services

d. State & Component

Hide Answer Workspace

Answer: A "State & Props" is the correct answer.

16) In which of the following directory React.js components are saved?

a. Inside the js/components/

b. Inside the vendor/components/

c. Inside the external/components/

d. Inside the vendor/

Hide Answer Workspace

Answer: A is the correct option. The React.js components are saved in

"Inside the js/components/."

17) Which of the following is a must API for every React.js component?

a. SetinitialComponent

b. renderComponent

c. render

d. All of the above

Hide Answer Workspace

Answer: B is the correct option. The renderComponent is a must API for

every React.js component.

18) Which of the following option is correct in the case of the Babel?

a. Babel is a Compiler.

b. Babel is a Transpilar.
 c. None of the above.

d. Both A and B are correct.

Hide Answer Workspace

Answer: D is the correct option as both of the above statements are

correct.

Babel is a JavaScript compiler that can translate markup or

programming languages into JavaScript. With Babel, you can use
the newest features of JavaScript (ES6 - ECMAScript 2015). Babel
is available for different conversions. React uses Babel to convert
JSX into JavaScript.

19) Does React.js create a VIRTUAL DOM in the memory?

a. TRUE

b. FALSE

c. Can be true or false

d. Cannot say

Hide Answer Workspace

Answer: A is the correct option as React.js creates a VIRTUAL DOM in the

memory.

20) What is the use of "webpack" command in React.js?

 a. The "webpack" command is used to transpile all the JavaScript down
into one file.

b. It runs React local development server.

c. It is a module bundler.

d. None of the above.

Hide Answer Workspace

Answer: C is the correct answer. The "webpack" command is a module

bundler.

21) Which of the following is used to pass data to a component from outside
in React.js?

a. SetState

b. Render with arguments

c. Props

d. PropTypes

Hide Answer Workspace

Answer: C is the correct answer. Props are used to pass data to a

component from outside in React.js.

22) What does ES6 stand for?

a. ECMAScript 6

b. ECMA 6

c. ECMAJavaScript 6

d. EJavaScript 6
Hide Answer Workspace

Answer: A is the correct option. ES6 stands for ECMAScript 6. ECMAScript

was created to standardize JavaScript. ES6 is the 6th version of
ECMAScript published in 2015. It is also known as ECMAScript 2015.

23) Which of the following function is used to change the state of the React.js
component?

a. this.setState

b. this.setChangeState

c. this.State{}

d. None of the above.

Hide Answer Workspace

Answer: A is the correct option. The "this.setState" function is used to

change the state of the React.js component.

24) Which of the following method refers to the parent class in React.js?

a. inherits()

b. self()

c. super()

d. this()

Hide Answer Workspace

Answer: C is the correct answer. The super() method refers to the parent
class. If you want to call the parent's constructor method and get access
to the parent's properties and methods, you can achieve it by calling the
super() method in the constructor.
25) What will happen if you render an input element with disabled = {false}?

a. It will be rendered as disabled

b. It will not be rendered at all

c. It will be rendered as enabled

d. You cannot set it false.

Hide Answer Workspace

Answer: C is the correct answer. If you render an input element with

disabled = {false}, it will be rendered as enabled.

26) Which of the following function is called to render HTML to the web page
in React?

a. render()

b. Render()

c. ReactDOM.render()

d. renderDOM()

Hide Answer Workspace

Answer: A is the correct option. React renders HTML to the web page by
using a function called ReactDOM.render().

27) Which of the following lifecycle events React components have at the
highest level?

a. Destruction
 b. Initialization

c. State/Property Updates

d. All of the above.

Hide Answer Workspace

Answer: D is the correct option.

28) Why is the usage of setState?

a. Invoke code after the setState operation is done.

b. Replace the state completely instead of the default merge action.

c. Access the previous state before the setState operation.

d. None of the above.

Hide Answer Workspace

Answer: A is the correct option.

29) Which of the following best defines the "key" prop?

a. "Key" prop is used to look pretty, and there is no benefit

whatsoever.

b. "Key" prop is a way for React to identify a newly added item

in a list and compare it during the "diffing" algorithm.

c. It is one of the attributes in HTML.

d. It is NOT commonly used in an array.

Hide Answer Workspace

Answer: B is the correct answer. It is used to identify any new item in a

list when re-rendering. It improves performance and efficiency also.
30) Which of the following method is not a part of ReactDOM?

a. ReactDOM.destroy()

b. ReactDOM.hydrate()

c. ReactDOM.createPortal()

d. ReactDOM.findDOMNode()

Hide Answer Workspace

Answer: A is the correct answer as ReactDOM.destroy() method is not a

part of ReactDOM. ReactDOM provides the developers with an API
containing the methods such as render(), findDOMNode(),
unmountComponentAtNode(), hydrate(), and createPortal().

31) How can you set a default value for an uncontrolled form field?

a. By using the value property

b. By using the defaultValue property

c. By using the default property

d. It is assigned automatically.

Hide Answer Workspace

Answer: B is the correct option. We can set a default value for an

uncontrolled form field by using the defaultValue property.

32) We can update the state in React.js by calling to setState() method.

These calls are:

a. Synchronous in nature.

b. Asynchronous in nature.

c. Are asynchronous but can be made synchronous when required.

 d. None of the above.

Hide Answer Workspace

Answer: B is the correct answer. The call to setState() method in React.js

is asynchronous, and multiple calls can be batched for better
performance.

33) Which of the following statement is true for controlled components in

React.js?

a. The source of truth is DOM.

b. The source of truth can be anything.

c. The source of truth is a component state.

d. None of the above.

Hide Answer Workspace

Answer: C is the correct option. For controlled components in React.js,

the source of truth is a component state.

34) What changes would appear in the component as soon as the state of the
React component is changed?

a. It will do nothing; you have to call render method to render the

component again.

b. It will re-render the component.

c. It can be created again from scratch.

d. None of the above.

Hide Answer Workspace

Answer: B is the correct answer. In React.js, as soon as the state is

updated, the component re-renders itself.
35) Which of the following statement is true for uncontrolled components
in React.js?

a. The source of truth is DOM.

b. The source of truth is a component state.

c. The source of truth can be anything.

d. None of the above.

Hide Answer Workspace

Answer: A is the correct answer. For uncontrolled components in

React.js, the source of truth is component DOM.

36) In which of the following condition, the React.js Lifecycle method static
getDerivedSateFromProps(props, state) is called?

a. The component is created for the first time.

b. The state of the component is updated.

c. Both of the above.

d. None of the above.

Hide Answer Workspace

Answer: C is the correct option. In React.js, the static

getDerivedSateFromProps(props, state) is called in both cases when a
component is created and when a component is updated.
37) What is the use of the create-react-app command in the React.js
application?

a. It is used to update a React app.

b. It is used to create a new React app.

c. It is used to install dependencies.

d. None of the above.

Hide Answer Workspace

Answer: B is the correct option. The create-react-app command in the

React.js application is used to create a new React app.

38) What is true for the keys given to a list of elements in React?

a. Unique in the DOM.

b. Unique among the siblings only.

c. Do not require to be unique.

d. None of the above.

Hide Answer Workspace

Answer: B is the correct option. Keys given to the list of elements in

React should be unique among the siblings only.

39) . How many elements can a valid react component return?

a) React doesn’t return element
b) 1 Element
c) More than 1 element
d) None of the mentioned

Answer: b
Explanation: A valid react component can return only one element.

40) React is a ____.

A. Web development Framework

 B. JavaScript Library
C. jQuery
D. Web Server

Answer: B) JavaScript Library

Explanation:

React is a JavaScript library.

41) JSX stands for _____.

A. JSON
B. JSON XML
C. JavaScript XML
D. JavaScript and AngularJS

Answer: C) JavaScript XML

Explanation:

JSX stands for JavaScript XML.

----------------------------------------------------------------------------------------------------------

42) JSX allows us to write _____.

A. jQuery in React
B. Angular Code in React
C. MySQL in React
D. HTML in React

Answer: D) HTML in React

Explanation:

JSX allows us to write HTML in React.

-------------------------------------------------------------------------------------------------------------

43) . What is the correct syntax to write expression in JSX?

 A. [ expression ]
B. { expression }
C. {{ expression }}
D. _expression

Answer: B) { expression }

Explanation:

With JSX, an expression can be written using the

syntax, { expression }.