React Self Assessment
Tags: javascript, react, career, beginners
Published: 2022-04-05 21:24:57


## 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 :trophy:.


###### 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 :goat:

### 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 application’s 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

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

## Links :link:
[CRA](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)

[React Components](https://reactjs.org/docs/react-component.html)

[Inheritance](https://www.w3schools.com/js/js_class_inheritance.asp)

## Social 
[Twitter](https://twitter.com/GregoriosPetro1)
[Linkedin](https://www.linkedin.com/in/greg-petropoulos/)
[Portfolio](https://gregpetropoulos.dev/)
[Github](https://github.com/GregPetropoulos)

Thank you for your time. 

Best, 

:heart:
## Happy Coding