React MCQ

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 31

 ReactJS is a JavaScript library originally developed by Facebook.

 it helps in building highly engaging single-page web apps.


 react JS helps in breaking down the complex into simpler components.
 NPX: It is an npm package that is expected to be done only once in a
project.
 Folder structure:
o Readme.md:  it is used to generate an HTML summary.
o .gitignore:  files that you do not want to push in GitHub.
o public/index.html: HTML file of our react app. This is the page that will
be loaded on starting the application.
o src/index.js: JS File corresponding to index.html file.
o src/app.js: The main component of any react app.  it acts as a container
for all other components.
o src/ app.css :  Hills in injection styling in react app
 JSX:  it allows to write HTML in JavaScript and place them in DOM  without
any child() or createElement() method.
 Components in react:
o they are nothing but reusable JavaScript function
o even if the component does not depend on each other,  they merge
inside a parent component to produce the final UI.
 Benefits:
o allows reusability of code
o makes it easier to find a tailor
 

1. Which of the following is used in React.js to increase performance?

A. Virtual DOM
B. Original DOM
C. Both A and B
D. None of the above
2. What is ReactJS?

A. Server-side framework
B. user interface framework
C. both a and b
D. none of the above

3. Identify the one which is used to pass data to components from outside

A. Render with arguments


B. setState
C. PropTypes
D. props

4. Who created React.js?

A. Jordan Mike
B. Jordan Walke
C. Tim Lee
D. Jordan Lee

5. In which language is React.js written?

A. Python
B. JavaScript
C. Java

6. What is Babel?

A. JavaScript compiler
B. JavaScript interpreter
C. JavaScript transpiler
D. None of the above

7. Identify the command used to create a react app.


A. npm install create-react-app
B. npm install -g create-react-app
C. install -g create-react-app
D. None of the above

8. Which of the following port is the default where webpack-dev-server runs?

A. 3000
B. 3306
C. 3030
D. 8080

9. How many elements can a valid react component return?

A. 1
B. 2
C. 3
D. 4

10. A state in React.js is also known as?

A. The internal storage of the component


B. External storage of the component
C. Permanent storage
D. All of the above

11. Which of the following method is used to access the state of a component


from inside of a member function?

A. this.prototype.stateValue
B. this,getState()
C. this.values
D. this.state

12. State whether true or false:  Props are methods into other components?
A. True
B. False

13. What are arbitrary inputs of components in react also known as?

A. Elements
B. Props
C. Keys
D. Ref

14. In MVC, what does React.js act as?

A. Model
B. Controller
C. Router
D. Middleware

15. State whether true or false: React.js covers only the view layer of the app.

A. True
B. False

16. Among The following options, choose the one which helps react for keeping
their data uni-directional?

A. DOM
B. Flux
C. JSX
D. Props

17. Using which of the following command can prevent default behaviour at in


react?
A. preventDefault()
B. avoidDefault()
C. revokeDefault()

18. Identify the smallest building block of React.JS.

A. Props
B. Elements
C. Components
D. None of the above

19. What is ReactJS mainly used for building?

A. Database
B. Connectivity
C. User interface
D. Design platform

20. Which of the following function is used to change the state of react


component?

A. this.setState()
B. this.state()
C. this.setChangeState()
D. None of the above

21. Among the following which acts as the input of class-based component?

A. Factory
B. Render
C. Class
D. props

22. Among the following which is used to create a class inheritance?

A. Inherits
B. Extends
C. Create
D. this 

23. Choose the correct data flow sequence of flux concept.

A. Action -> Dispatcher -> Store -> View


B. Action -> Dispatcher -> View -> Store
C. Action -> Store -> View -> Dispatcher
D. Dispatcher -> Action -> Store -> View

24. Total ways of defining variables in ES6 is?

A. 1
B. 2
C. 3
D. 4

25. Which of the following are two ways to handle data in react?

A. services and components


B. State and props
C. state and services
D. state and component

26. Among the corner which is a must-have for every ReactJS component?

A. renderComponent
B. SetinitialComponent
C. Render
D. All of the above

27. ES6 stands for _________

A. ECMA 6
B. ECMAJavaScript 6
C. ECMAScript 6
D. EJavaScript 6

28. Choose the method with refers to the parent class in ReactJS?

A. this()
B. super()
C. iniherits()
D. self()

29. JSX stands for __________

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

30. The function which is called to render HTML to a web page in react?

A. ReactDOM_render()
B. render()
C. render_DOM()
D. DOM_HTML()

31. Choose the functionality of setState?

A. Access the previous state before the setState operation.


B. invoke code after the setState  operation is done
C. replace this date completely instead of the default merge actionnone of the
above
D. none of the above

32. Choose the method which is not a part of ReactDOM?

A. ReactDOM.createPortal()
B. ReactDOM.hydrate()
C. ReactDOM.destroy()
D. ReactDOM.findDOMNode()

33. Choose the correct statement in the context of uncontrolled components in


ReactJS?

A. source of truth can be anything


B. source of truth is a component state
C. source of truth is DOM
D. none of the above

34. In which directory is react component saved?

A. vendor/js/components/
B. components/js
C. js/components
D. vendor/components

35. What is the functionality of a “webpack” command?

A. Runs react local development server


B. transfer files all the JavaScript down into one file
C. a module blunder
D. none of the above

36. State whether true or false: React merges the objects you provide into the
current state using setState().

A. True
B. False

37. State whether true or false: React creates virtual DOM in memory.

A. True
B. False

38. In react, the key should be?

A. Unique among his siblings only


B. unique in the DOM
C. Does not requires to be unique
D. all of the above

39. Which company developed ReactJS?

A. Apple
B. Facebook
C. Google
D. Twitter

40. Choose the component which should be overridden to stop the component


from updating?

A. componentDidUpdate
B. componentDidMount
C. willComponentUpdate
D. shouldComponentUpdate

41. Which of the following is used to access a function fetch()  from h1 element in


JSX?

A. <h1>${fetch()}</h1>
B. <h1>{fetch}</h1>
C. <h1>${fetch}</h1>
D. <h1>{fetch()}</h1>

42. When setState()  is called inside render() method, which of the following


events takes place?

A. duplicate key error


B. repetitive output happiness on the screen
C. nothing happens
D. stackoverflow error

43. What happens if you render an input element with disabled = {false}?

A. it will be rendered as enabled


B. it will be rendered as disabled
C. it will not be rendered at all
D. None of the above

44. When is useReducer used over useState in React component?

A. When we want to replace redux


B. when we want to break our production app
C. when we want to improve performance
D. none of the above

45. React is a ___________

A. JavaScript framework
B. JavaScript library
C. both  a and b
D. none of the above

46. Choose the library which is most often associated with react?

A. Sinon
B. Chai
C. Jest
D. Mocha

47. What is used to handle code-splitting?

A. React.lazy
B. React.memo
C. React.fallback

48. Why is useLayoutEffect used?

A. To complete the update


B. to optimize for all devices
C. To change the layout of the screen
D. when you need the browser to paint before the effectors
49. Which of the following terms commonly described react applications?

A. Imperative
B. Integrated
C. Declarative
D. closed

50. Why is ref used?

A. to bind the function


B. to call a function
C. to directly access the DOM node
D. to refer to another JS file

51. What is React.js?


a) Open-source JavaScript back-end library
b) JavaScript front-end library to create a database
c) Free and open-source JavaScript front-end library
d) None of the mentioned

52. Which of the following acts as the input of a class-based component?


a) Class
b) Props
c) Factory
d) None of the mentioned

53. React.js is written in which of the following language?


a) C
b) C++
c) JavaScript
d) Java

54. 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

55. In which of the following directory React Components are saved?


a) Inside js/components/
b) Inside components/js/
c) Inside vendor/js/components/
d) Inside vendor/components/

56. Which of the following command is used to Install create-react-app?


a) npm install create-react-app
b) npm install -f create-react-app
c) npm install -g create-react-app
d) install -g create-react-app

57. In which condition is the React.js Lifecycle method static


getDerivedSateFromProps(props, state) is called?
a) When the state of the component is updated
b) When a component is created for the first time
c) Both of the mentioned
d) None of the mentioned

58. Which of the following is method is not a part of ReactDOM?


a) ReactDOM.hydrate()
b) ReactDOM.destroy()
c) ReactDOM.createPortal()
d) All of the mentioned

59. Which of the following is correct about prop in react?


a) Can be changed inside another component
b) Can be changed inside the component
c) Cannot be changed in the component
d) All of the mentioned

60. Which of the following is used to pass data to a component from outside in
React?
a) props
b) render with arguments
c) setState
d) PropTypes

61.Which of the following is the correct name of React.js?


A. React
B. React.js
C. ReactJS
D. All of the above

62.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

63.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.

64.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
65.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.

66. 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

67.Which of the following acts as the input of a class-based component?


A. Class
B. Factory
C. Render
D. Props

68.Which of the following keyword is used to create a class inheritance?


A. Create
B. Inherits
C. Extends
D. This

69.What would be the output of the following example?

var Helloword=(props)=>  
{  
 return(  
 <div>  
 Hello World 1  
 </div>  
 <div>  
 Hello World 2  
 </div>  
 );  
}  ReactDOM.render(<Helloworld/>,mountNode)  
A. Hello World 1
B. Hello World 2
C. Hello World 1 Hello World 2
D. Error

70. What is the default port where webpack-server runs?

A. 3000
B. 8080
C. 3030
D. 6060.

71. How many numbers of elements a valid react component can return?

A. 1
B. 2
C. 4
D. 5

72. 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
E.

73. How many ways of defining your variables in ES6?

A. 1
B. 3
C. 4
D. 5

74. 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.

75. What are the two ways to handle data in React?

A. State & Props


B. Services & Components
C. State & Services
D. State & Component

76. 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/

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

A. SetinitialComponent
B. renderComponent
C. render
D. All of the above

78. 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.

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

A. TRUE
B. FALSE
C. Can be true or false
D. Cannot say
80. 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.

81. 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

82. What does ES6 stand for?

A. ECMAScript 6
B. ECMA 6
C. ECMAJavaScript 6
D. EJavaScript 6

83. 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.

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

A. inherits()
B. self()
C. super()
D. this()

85. 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.

86. Which of the following function is called to render HTML to the web page in
React?

A. render()
B. render[]
C. ReactDOM_render()
D. Render{}

87. 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.

88. 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.

89. 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.

90. Which of the following method is not a part of ReactDOM?

A. ReactDOM.destroy()
B. ReactDOM.hydrate()
C. ReactDOM.createPortal()
D. ReactDOM.findDOMNode()

81. 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.

82. 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.

83. 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.

84. 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.

85. 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.

86. 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.

87. 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.

88. 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.

89. Which ReactJS command is used to create a new application?

A. create-react-app
B. new-react-app
C. create-new-reactapp
D. react-app

90. What does props stand for?

A. Proper Arguments
B. Properties
C. Proper Return Values
D. All of the above

91. React is also known as _____.

A. ReactJS
B. js
C. Both A. and B.
D. None of these

92. React is a ____.

A. Web development Framework


B. JavaScript Library
C. jQuery
D. Web Server

93. JSX stands for _____.

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

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

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

95. A class component must include the _______ statement.

A. extends React.Component
B. extends React
C. extends Component
D. extends React.Component.All

96. Which ReactJS command is used to set up everything you need to run a React
Application?
A. create-react-app
B. new-react-app
C. create-new-reactapp
D. react-app

97. How to install create-react-app?

A. npx create-react-app -new my-app


B. npx create-react-app -app my-app
C. npx new-react-app my-app
D. npx create-react-app my-app

98. Which are the valid components in ReactJS?

A. Variable components
B. Function components
C. Class components
D. Both A. and B.
E. Both B. and C.

99. In ReactJS, what is State?

A. It's a temporary storage of the elements


B. It's a state of the execution of the ReactJS application
C. It's an internal storage of the components
D. All of the above

100. Can components be passed as props?

A. Yes
B. No

101. What is React.js?


a) Open-source JavaScript back-end library
b) JavaScript front-end library to create a database
c) Free and open-source JavaScript front-end library
d) None of the mentioned
102. Which of the following acts as the input of a class-based component?
a) Class
b) Props
c) Factory
d) None of the mentioned

103. React.js is written in which of the following language?


a) C
b) C++
c) JavaScript
d) Java

104. 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

105. In which of the following directory React Components are saved?


a) Inside js/components/
b) Inside components/js/
c) Inside vendor/js/components/
d) Inside vendor/components/

106. Which of the following command is used to Install create-react-app?


a) npm install create-react-app
b) npm install -f create-react-app
c) npm install -g create-react-app
d) install -g create-react-app

107. In which condition is the React.js Lifecycle method static


getDerivedSateFromProps(props, state) is called?
a) When the state of the component is updated
b) When a component is created for the first time
c) Both of the mentioned
d) None of the mentioned
108. Which of the following is method is not a part of ReactDOM?
a) ReactDOM.hydrate()
b) ReactDOM.destroy()
c) ReactDOM.createPortal()
d) All of the mentioned

109. Which of the following is correct about prop in react?


a) Can be changed inside another component
b) Can be changed inside the component
c) Cannot be changed in the component
d) All of the mentioned

110. Which of the following is used to pass data to a component from outside in
React?
a) props
b) render with arguments
c) setState
d) PropTypes

111.At the highest level, React components have lifecycle events that fall into

a)Initialization

b)State/Property Updates

c)Destruction

d)All of these

112. How do you write an inline style specifying the font-size:12px and color:red;
in JSX

a)style={{font-size:12,color:'red'}}

b)style={{fontSize:'12px',color:'red'}}

c)style={fontSize:'12px',color:'red'}

d)style={{font-size:12px,color:'red'}}
113. Which method is not part of ReactDOM?

a)ReactDOM.destroy()

b)ReactDOM.hydrate()

c)ReactDOM.createPortal()

d)ReactDOM.findDOMNode()

114. Which of the following API is a MUST for every ReactJS component?

a)getInitialState

b)render

c)renderComponent

d)None of the above

115. What is a controlled input element?

a)An input element with the controlled flag

b)An input element that is controlled by the value of another input element

c)An input element that can only accept a list of characters

d)An input element whose value is being controlled by a component’s state

116. What is the second argument for setState useful for?

a) To invoke code after the setState operation is done

b) To replace the state completely instead of the default merge action


c) To access the previous state before the setState operation

d) None of the above

117.What happens when the following render() method executes?<br /><br />
render(){<br /> let langs = ["Ruby","ES6","Scala"]<br /> return (<div><br />
{langs.map(it => <p>{it}</p>)}<br /> </div>)<br /> }<br />

a) Displays the list of languages in the array

b) Error. Cannot use direct JavaScript code in JSX

c) Displays nothing

d) Error. Should be replaced with a for..loop for correct output

118.What are the two ways that data gets handled in React?

A. state & props


B. services & components

119. Everything in react is

A. Package
B. Model
C. Method
D. Component

120. What function allows you to render React content in an HTML page?

A. React.mount()
B. ReactDOM.start()
C. ReactDOM.render()
D. React.render()
121. What is state in React?

A. A persistant storage.
B. An internal data store (object) of a component.

122. Life cycle methods of a components fall under following categories?

A. Mounting, Unmounting
B. Mounting, Updating
C. Mounting, Updating, Unmounting
D. All of above

123. One can define default values for properties, props, using which of the
following method?

A. getDefaultProps
B. getPropsValue
C. getInitialState
D. None of these

124. React.js Covers only the view layer of the app.

A. Yes
B. No

125. What is the DOM?

A. Document Object Model


B. Data Object Model
C. Data Option Model
D. Documentation Object Model
126. Variabel default React JS

A. Props
B. Statefull
C. Stateless
D. State

127. What is JSX?

A. it is a syntax extension to JavaScript.


B. JSX produces data.
C. Tool to control the data
D. none of the above

128. What function can be used to update state?

A. setState()
B. updateState()
C. upState()
D. downState()

129. Who Develop React.js?

A. Apple
B. Facebook
C. Twitter
D. Google

130. When it is recommended to pass this.setState as a function instead of an


object?

A. When the new state should completely replace the old state
B. When the new state depends on the old state
C. When the new state does not depend on the old state
D. None of the above

131. Which of the following below act as the input of a class-based component?
A. class and factory
B. render and mount
C. props
D. none of the above

132. There are two types of components in React JS

A. UseState, Stateless
B. Statefull, Stateless
C. Unstatefull Statefull
D. None of these

133. Is React.JS is paid?

A. Yes
B. No

134. Who is the father of React.js?

A. Jordan mike
B. Jordan Walke
C. Nile
D. Nike John

135. What is ReactJS?

A. Server side Framework


B. User-interface framework
C. A Library for building interaction interfaces
D. None of the above

136. React is for building _________

A. Connectivity
B. User Interface
C. Database
D. All of above

137. React.Js is a __________?

A. Framework
B. Library
C. None of these.

138. React.Js was created by ___________?

A. Google
B. Microsoft
C. Facebook
D. All of above

139. Which concept includes OOP's?

A. Functional Components
B. Class Components
C. Oriented Components
D. None of these

140. What is React.Js used for?

A. Server-Side
B. Client-Side
C. For Both
D. None of these
 141. Will useEffect affect other data?

A. True
B. False

142. What was the Output?const [data , setData] =


useState("Alex");console.log(data);

A. data
B. data Alex
C. Alex
D. none of the above

You might also like