React JS Online Quiz, React JS MCQ Quiz & Online Test

1 .

Everything in React is a _____________

A)

Module

B)

Component

C)

Package

D)

Class

Correct Answer : Option (B) : Component

2 .

In which directory React Components are saved?

A)

Inside js/components/

B)

Inside vendor/components/

C)

Inside vendor/components/

D)

Inside vendor/

Correct Answer : Option (A) : Inside js/components/

3 .

What is Babel?

A)

A transpiler.

B)

An interpreter

C)

A Compiler

D)

Both Compiler and Transpilar

Correct Answer : Option (D) : Both Compiler and Transpilar

4 .

How many elements does a react component return?

A)

1 Element

B)

2 Elements

C)

Multiple Elements

D)

None of the above

Correct Answer : Option (C) : Multiple Elements

5 .

What does the "webpack" command do?

A)

A module bundler

B)

Runs react local development server.

C)

Transpiles all the Javascript down into one file

D)

None of the above

Correct Answer : Option (A) : A module bundler

6 .

What is ReactJS?

A)

Server-side Framework

B)

User-interface framework

C)

A Library for building interaction interfaces

D)

None of the Above

Correct Answer : Option (C) : A Library for building interaction interfaces

7 .

What are the limitations of ReactJS?

A)

React is only for view layer of the app so we still need the help of other technologies to get a complete tooling set for development

B)

React is using inline templating and JSX. This can seem awkward to some developers

C)

The library of react is too large

D)

All of these

Correct Answer : Option (D) : All of these

8 .

How can you access the state of a component from inside of a member function?

A)

this.getState()

B)

this.prototype.stateValue

C)

this.state

D)

this.values

Correct Answer : Option (D) : this.values

9 .

Props are __________ into other components

A)

Injected

B)

Methods

C)

Both A and B

D)

All of these

Correct Answer : Option (B) : Methods

10 .

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

A)

getInitialState

B)

render

C)

renderComponent

D)

None of the Above

Correct Answer : Option (C) : renderComponent

11 .

What port is the default where the webpack-dev-server will run?

A)

3000

B)

3306

C)

8080

D)

None of the above

Correct Answer : Option (C) : 8080

12 .

In React what is used to pass data to a component from outside?

A)

setState

B)

props

C)

PropTypes

D)

render with arguments

Correct Answer : Option (B) : props

Explanation : Props are used to pass data to a component from outside

13 .

What is a react.js in MVC?

A)

Model

B)

Controller

C)

Router

D)

Middleware

Correct Answer : Option (B) : Controller

14 .

ReactJS uses _____ to increase performance

A)

Virtual DOM

B)

Original DOM

C)

Both 1 & 2

D)

None of the above

Correct Answer : Option (A) : Virtual DOM

15 .

Keys are given to a list of elements in react. These keys should be -

A)

Unique in the DOM

B)

Do not requires to be unique

C)

Unique among the siblings only

D)

All of the above

Correct Answer : Option (C) : Unique among the siblings only

16 .

Which of the following is the correct data flow sequence of flux concept?

A)

Dispatcher->Action->Store->View

B)

Action->Dispatcher->Store->View

C)

Action->Dispatcher->View->Store

D)

Action->Store->Dispatcher->View

Correct Answer : Option (B) : Action->Dispatcher->Store->View

17 .

What is the name of React.js Developer ?

A)

Tim Lee

B)

Jordan Lee

C)

Jordan mike

D)

Jordan Walke

Correct Answer : Option (D) : Jordan Walke

18 .

Who Develop React.js?

A)

Google

B)

Apple

C)

Facebook

D)

Twitter

Correct Answer : Option (C) : Facebook

19 .

.............. helps react for keeping their data unidirectional

A)

JSX

B)

Flux

C)

Dom

D)

Props

Correct Answer : Option (B) : Flux

20 .

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

A)

Initialization

B)

State/Property Updates

C)

Destruction

D)

All of these

Correct Answer : Option (D) : All of these

21 .

If you want to import just the Component from the React library, what syntax do you use?

A)

import React.Component from 'react'

B)

import [ Component ] from 'react'

C)

import Component from 'react'

D)

import { Component } from 'react'

Correct Answer : Option (D) : import { Component } from 'react'

22 .

If a function component should always render the same way given the same props, what is a simple performance optimization available for it?

A)

Wrap it in the React.memo higher-order component.

B)

Implement the useReducer Hook.

C)

Implement the shouldComponentUpdate lifecycle method.

D)

Implement the useMemo Hook.

Correct Answer : Option (A) : Wrap it in the React.memo higher-order component.

23 .

How do you fix the syntax error that results from running this code?

const person =(firstName, lastName) =>
       {
            first: firstName,
            last: lastName
        }
console.log(person("jhon", "Wolson"))

A)

Wrap the object in parentheses.

B)

Call the function from another file.

C)

Replace the with an array

D)

Add a return statement before the first curly brace.

Correct Answer : Option (A) : Wrap the object in parentheses.

24 .

If you see the following import in a file, what is being used for state management in the component?

import React, {useState} from 'react';

A)

stateful components

B)

class components

C)

math

D)

React Hooks

Correct Answer : Option (D) : React Hooks

25 .

Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?

const name = 'Venkat';
const age = 30;
const person = { name, age };
console.log(person);

A)

{{name: "Venkat", age: 30}}

B)

{name: "Venkat", age: 30}

C)

{person: "Venkat", person: 30}}

D)

{person: {name: "Venkat", age: 30}}

Correct Answer : Option (B) : {name: "Venkat", age: 30}

26 .

How do you access a function fetch() from a h1 element in JSX?

A)

<h1>{fetch()}</h1>

B)

<h1>${fetch()}</h1>

C)

<h1>{fetch}</h1>

D)

<h1>${fetch}</h1>

Correct Answer : Option (A) : <h1>{fetch()}</h1>

27 .

What happens when the following render() method executes?

render(){
   let langs = ["Ruby","ES6","Scala"]
     return (<div>
       {langs.map(it => <p>{it}</p>)}
     </div>)
 }

A)

Error. Cannot use direct JavaScript code in JSX

B)

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

C)

Displays the list of languages in the array

D)

Displays nothing

Correct Answer : Option (C) : Displays the list of languages in the array

28 .

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'}}

Correct Answer : Option (B) : style={{fontSize:'12px',color:'red'}}

29 .

Which method in a React Component should you override to stop the component from updating?

A)

willComponentUpdate

B)

shouldComponentUpdate

C)

componentDidUpdate

D)

componentDidMount

Correct Answer : Option (B) : shouldComponentUpdate

30 .

What happens when you call setState() inside render() method?

A)

Repetitive output appears on the screen

B)

Nothing happens. Life goes on!

C)

Duplicate key error

D)

Stack overflow error

Correct Answer : Option (D) : Stack overflow error

Explanation : Call to setState() invokes render(). Calling it inside render is suicidal. It gets into an infinite loop

31 .

React is a ______

A)

Javascript library

B)

Javascript framework

C)

Both of above

D)

None of the above

Correct Answer : Option (A) : Javascript library

Explanation : ReactJS is a javascript library for building user interfaces. its not a framework

32 .

ReactJS covers _____

A)

User Interface layer in an application

B)

Data layer in an application

C)

Both A and B

D)

None of the above

Correct Answer : Option (A) : User Interface layer in an application

Explanation : ReactJS is a javascript library for building user interfaces. it covers only user interface layer of an application

33 .

Number of elements, a valid react component can return

A)

1

B)

2

C)

3

D)

4

Correct Answer : Option (A) : 1

34 .

props in react can________

A)

Be changed inside the component

B)

Not be changed in the component

C)

Be changed in side other component

D)

None of the above

Correct Answer : Option (B) : Not be changed in the component

35 .

What is the testing library most often associated with React?

A)

Mocha

B)

Sinon

C)

Chai

D)

Jest

Correct Answer : Option (D) : Jest

36 .

What is state in react?

A)

Internal storage of the component

B)

A prement storage

C)

Both A and B

D)

None of the above

Correct Answer : Option (A) : Internal storage of the component

37 .

What will happen if you render an input element with disabled = {false}

A)

It will be rendered as disabled

B)

It will be rendered as enabled

C)

It will not be rendered at all

D)

None of the above

Correct Answer : Option (B) : It will be rendered as enabled

38 .

To get the first item from the array ("cooking") using array destructuring, how do you adjust this line?

const topics = ['cooking', 'art', 'history'];

A)

const first = ["cooking", "art", "history"]

B)

const [] = ["cooking", "art", "history"]

C)

const [, first]["cooking", "art", "history"]

D)

const [first] = ["cooking", "art", "history"]

Correct Answer : Option (D) : const [first] = ["cooking", "art", "history"]

39 .

How do you handle passing through the component tree without having to pass props down manually at every level?

A)

React Send

B)

React Pinpoint

C)

React Router

D)

React Context

Correct Answer : Option (D) : React Context

40 .

What should the console read when the following code is run?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);â€‹

A)

Horse

B)

Cat

C)

Mouse

D)

None of the above

Correct Answer : Option (B) : Cat

41 .

What is the name of the tool used to take JSX and turn it into createElement calls?

A)

JSX Editor

B)

ReactDOM

C)

Browser Buddy

D)

Babel

Correct Answer : Option (D) : Babel

42 .

React Lifecycle method static getDerivedSateFromProps(props , state) is called when ____

A)

Component is created for the first time

B)

Component is created for the first time

C)

Both of above

D)

None of the above

Correct Answer : Option (C) : Both of above

43 .

Keys are given to a list of elements in react. These keys should be

A)

Unique in the DOM

B)

Unique among the siblings only

C)

Do not requires to be unique

D)

None of the above

Correct Answer : Option (B) : Unique among the siblings only

44 .

For uncontrolled components in react

A)

Source of truth is DOM

B)

Source of truth is component state

C)

Source of truth can be anything

D)

None of the above

Correct Answer : Option (A) : Source of truth is DOM

45 .

Why might you use useReducer over useState in a React component?

A)

when you want to replace Redux

B)

when you want to replace Redux

C)

when you want to break your production app

D)

when you want to improve performance

Correct Answer : Option (B) : when you want to replace Redux

46 .

Which props from the props object is available to the component with the following syntax?

<Message {...props} />

A)

any that have changed

B)

any that have not changed

C)

child props

D)

all of them

Correct Answer : Option (D) : all of them

47 .

Consider the following code from React Router. What do you call :id in the path prop?

<Route path="/:id" />

A)

This is a route modal

B)

This is a route parameter

C)

This is a route splitter

D)

This is a route link

Correct Answer : Option (B) : This is a route parameter

48 .

What does this React element look like given the following function?

React.createElement('h1', null, "What's happening?");â€‹

A)

<h1 props={null}>What's happening?</h1>

B)

<h1>What's happening?</h1>

C)

<h1 id="component">What's happening?</h1>

D)

<h1 id="element">What's happening?</h1>

Correct Answer : Option (A) :

<h1>What's happening?</h1>

49 .

What property do you need to add to the Suspense component in order to display a spinner or loading state?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

A)

lazy

B)

loading

C)

fallback

D)

spinner

Correct Answer : Option (C) : fallback

50 .

Which of the following is a correct definition of state in react?

a) A persistent storage

b) An internal data store (object) of component

A)

a

B)

b

C)

Both A and B

D)

None of the above

Correct Answer : Option (B) : b

51 .

What are two ways data gets handled in react?

A)

state & props

B)

services & components

C)

state & services

D)

state & component

Correct Answer : Option (A) : state & props

52 .

What do you call the message wrapped in curly braces below?

let message = 'Hi there';
const element = <p>{message}</p>;

A)

a JS function

B)

a JS element

C)

a JSX wrapper

D)

a JS expression

Correct Answer : Option (D) : a JS expression

53 .

What can you use to handle code splitting?

A)

React.split

B)

React.lazy

C)

React.memo

D)

React.fallback

Correct Answer : Option (B) : React.lazy

54 .

When do you use useLayoutEffect?

A)

to optimize for all devices

B)

to complete the update

C)

to change the layout of the screen

D)

when you need the browser to paint before the effect runs

Correct Answer : Option (D) : when you need the browser to paint before the effect runs

55 .

You have written the following code but nothing is rendering. How do you fix this problem?

const Heading = () => {
  <h1>Hello!</h1>;
};

A)

Add a render function

B)

Surround the h1 in a div.

C)

Move the h1 to another component.

D)

Change the curly braces to parentheses or add a return statement before the h1 tag.

Correct Answer : Option (D) : Change the curly braces to parentheses or add a return statement before the h1 tag.

56 .

Which of these terms commonly describe React applications?

A)

declarative

B)

imperative

C)

integrated

D)

closed

Correct Answer : Option (A) : declarative

57 .

What is the children prop?

A)

a property that lets you pass components as data to other components

B)

a property that lets you pass data to child elements

C)

a property that lets you set an array as a property

D)

a property that adds child components to state

Correct Answer : Option (A) : a property that lets you pass components as data to other components

58 .

Why is it important to avoid copying the values of props into a component's state where possible?

A)

because you should never mutate state

B)

because you want to allow data to flow back up to the parent

C)

because getDerivedStateFromProps() is an unsafe method to use

D)

because you want to allow a component to update in response to changes in the props

Correct Answer : Option (D) : because you want to allow a component to update in response to changes in the props

59 .

When might you use React.PureComponent?

A)

when you do not want your component to have state

B)

when you have sibling components that need to be compared

C)

when you want a default implementation of shouldComponentUpdate()

D)

when you do not want your component to have props

Correct Answer : Option (C) : when you want a default implementation of shouldComponentUpdate()

60 .

How do you destructure the properties that are sent to the Dish component?

function Dish(props) {
  return (
    <h1>
      {props.name} {props.cookingTime}
    </h1>
  );
}

A)

function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }

B)

function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }

C)

function Dish(props) { return <h1>{name} {cookingTime}</h1>; }

D)

function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }

Correct Answer : Option (B) : function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }

61 .

What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)?

A. <button onClick="{this.handleClick}>Click Me</button>"
B. <button onClick="{event => this.handleClick(event)}}>Click Me</button>"

A)

Button A will not have access to the event object on click of the button.

B)

Button B will not fire the handler this.handleClick successfully.

C)

Button A will not fire the handler this.handleClick successfully.

D)

There is no difference

Correct Answer : Option (B) : Button B will not fire the handler this.handleClick successfully.

62 .

What do you call a React component that catches JavaScript errors anywhere in the child component tree?

A)

error bosses

B)

error catchers

C)

error helpers

D)

error boundaries

Correct Answer : Option (D) : error boundaries

63 .

In which lifecycle method do you make requests for data in a class component?

A)

constructor

B)

componentDidMount

C)

componentWillReceiveProps

D)

componentWillMount

Correct Answer : Option (B) : componentDidMount

64 .

All React components must act like __ with respect to their props.

A)

monads

B)

pure functions

C)

recursive functions

D)

higher-order functions

Correct Answer : Option (B) : pure functions

65 .

Why might you use a ref?

A)

to directly access the DOM node

B)

to refer to another JS file

C)

to bind the function

D)

to call a function

Correct Answer : Option (A) : to directly access the DOM node

66 .

What is [e.target.id] called in the following code snippet?

handleChange(e) {
	this.setState({[e.target.id]: e.target.value })
}

A)

a computer property name

B)

a JSX code string

C)

a dynamic key

D)

a set value

Correct Answer : Option (C) : a dynamic key

67 .

What is the name of this component?

class Clock extends React.Component {
   render() {
    return <h1>Look at the time: {time}</h1>;
   }
  }

A)

Clock

B)

Component

C)

React.Component

D)

It does not have a name prop.

Correct Answer : Option (A) : Clock

68 .

What package contains the render() function that renders a React element tree to the DOM?

A)

React

B)

DOM

C)

ReactDOM

D)

Render

Correct Answer : Option (C) : ReactDOM

69 .

What is sent to an Array.map() function?

A)

a callback function that is called once for each element in the array

B)

the name of another array to iterate over

C)

the number of times you want to call the function

D)

a string describing what the function should do

Correct Answer : Option (A) : a callback function that is called once for each element in the array

70 .

Why is it a good idea to pass a function to setState instead of an object?

A)

It is more functional than an object

B)

It automatically updates a component

C)

It makes sure that the object is not mutated

D)

setState is asynchronous and might result in out of sync values.

Correct Answer : Option (D) : setState is asynchronous and might result in out of sync values.

71 .

How do you set a default value for an uncontrolled form field?

A)

Use the value property

B)

Use the defaultValue property

C)

Use the default property

D)

It assigns one automatically

Correct Answer : Option (B) : Use the defaultValue property

72 .

How do you invoke setDone only when component mounts, using hooks?

function MyComponent(props) {
  const [done, setDone] = useState(false);

  return <h1>Done: {done}</h1>;
}

A)

useEffect(() => { setDone(true); });â€‹

B)

useEffect(() => { setDone(true); }, []);

C)

useEffect(() => { setDone(true); }, [setDone]);

D)

useEffect(() => { setDone(true); }, [done, setDone]);

Correct Answer : Option (C) :

useEffect(() => { setDone(true); }, [setDone]);

73 .

What value of button will allow you to pass the name of the person to be hugged?

class Huggable extends React.Component{
	hug(id){
		console.log("hugging " + id);
	}

	render() {
		let name = "kitteh";
		let button = // Missing Code
		return button;
	}
}

A)

<button onClick={(name) => this.hug(name)>Hug Button</button>

B)

<button onClick={this.hug(e, name)}>Hug Button</button>

C)

<button onClick={(e) => hug(e,name)}>Hug Button</button>

D)

<button onClick={(e) => this.hug(name, e)}>Hug Button</button>

Correct Answer : Option (A) :

<button onClick={(name) => this.hug(name)>Hug Button</button>

74 .

Which Hook could be used to update the document's title?

A)

useEffect(function updateTitle() { document.title = name + ' ' + lastname; });

B)

useEffect(() => { title = name + ' ' + lastname; });

C)

useEffect(function updateTitle() { name + ' ' + lastname; });

D)

useEffect(function updateTitle() { title = name + ' ' + lastname; });

Correct Answer : Option (A) :

useEffect(function updateTitle() { document.title = name + ' ' + lastname; });

75 .

What do you need to change about this code to get it to run?

class clock extends React.Component {
  render() {
    return <h1>Look at the time: {this.props.time}</h1>;
  }
}

A)

Remove this

B)

Capitalize clock

C)

Remove the render method

D)

Add quotes around the return value

Correct Answer : Option (B) : Capitalize clock