React Self Assessment

17 Question to Audit Your React Dev Skills

I always look for room to improve my react dev skills. The react assessment may build your confidence or discover a weakness either way a Win-Win .

disclaimer: Although understanding legacy code is great skill. The test questions may not be up to date with the latest version of React.

Lets begin

Question 1

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

a) <h1>{fetch()}</h1>
b) <h1>${fetch()}</h1>
c) <h1>{fetch}</h1>
d) <h1>${fetch}</h1>

Correct answer = a) <h1>{fetch()}</h1>

Question 2

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 = b) shouldComponentUpdate

Question 3

What's used to pass data to a component from outside?

a) setState
b) render with arguments
c) PropTypes
d) props

Correct answer = d) props

Question 4

Which method in a React Component is called after the component is rendered for the first time?

a) componentDidUpdate
b) componentDidMount
c) componentMounted
d) componentUpdated

Correct answer = b) componentDidMount

Question 5

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

a) SetinitialComponent
b) renderComponent
c) render
d) All of the above

Correct answer = b) renderComponent

Question 6

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

a) The "webpack" command is used to transpile
b) all the JavaScript down into one file
It runs React local development server
c) It is a module bundler
d) None of the above

Correct answer = c) It is a module bundler

Question 7

Which of the following is correct syntax for a button click event handler, foo?

a) <button onclick={this.foo()}>
b) <button onclick={this.foo}>
c) <button onClick={this.foo()}>
d) <button onClick={this.foo}>

Correct answer = d) <button onClick={this.foo}>

Question 8

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

a) Repetitive output appears on the screen
b) Stack overflow error
c) Duplicate key error
d) Nothing happens. Life goes on!

Correct answer = b) Stack overflow error

Question 9

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 = b) style={{fontSize:'12px',color:'red'}}

Question 10

Which of the following concepts is/are key to ReactJS?

a) Event delegation model
b) Component-oriented design
c) Both of the above
d) None of the above

Correct answer = c) Both of the above

Question 11

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

a) Increases the applications performance with Virtual DOM
b) JSX makes a code that is easy to read and write
c) It renders both on client and server side
Easy to integrate with other frameworks(Angular, BackboneJS) since it is only a view library
d) All of the above

Correct answer = d) All of the above

Question 12

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

Correct answer = a) npm install -g create-react-app

*Alternatively npx create-react-app if you have Node >= 14.0.0 and npm >= 5.6 on your machine.

Question 13

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.

Correct answer = b) Virtual DOM

Question 14

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

a) Create
b) Inherits
c) Extends
d) This

Correct answer = c) Extends

Question 15

True or false: Test should be written before code is written?
a) True
b) False

Correct answer = a) True

Question 16

Considering the code below, how many times would "Hello" be displayed in the console?

import { useState, useEffect } from "react";    export default function App(props) {      const [counter, setCounter] = useState(0);      useEffect(() => {        console.log("Hello");        setCounter(1);      }, [props.visible]);      return <div className="App">{counter}</div>;    }

a) 1
b) 2
c) 3
d) 4

Correct answer = a) 1

Question 17

.What happens when the following render() method executes?

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

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

Correct answer = a) Displays the list of languages in the array

1A
2B
3D
4B
5B
6C
7D
8B
9B
10C
11D
12A
13B
14C
15A
16A
17A

Links

CRA

React Components

Inheritance

Social

Twitter
Linkedin
Portfolio
Github

Thank you for your time.

Best,

Happy Coding