1. In which directory React Components are saved?

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

b) Inside vendor/components/ d) Inside vendor/

2. What does the "webpack" command do?

a) A module bundler c) Transpiles all the Javascript down into one file
b) Runs react local development server. d) None of the above

3. How can you access the state of a component from inside of a member function?
a) this.getState() c) this.state
b) this.prototype.stateValue d) this.values

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

a) getInitialState c) renderComponent
b) render d) None of the Above

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

a) Unique in the DOM c) Unique among the siblings only
b) Do not requires to be unique d) All of the above
e)

6. Which of the following is the correct data flow sequence of flux concept?
a) Dispatcher->Action->Store->View c) Action->Dispatcher->View->Store
b) Action->Dispatcher->Store->View d) Action->Store->Dispatcher->View

7. At the highest level, React components have lifecycle events that fall into
a) Initialization c) Destruction
b) State/Property Updates d) All of these

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

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

1
React JS
 10. 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}} c) {person: "Venkat", person: 30}}
b) {name: "Venkat", age: 30} d) {person: {name: "Venkat", age: 30}}

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

12. How do you write an inline style specifying the font-size:12px and color:red; in JSX
a) style={{font-size:12,color:'red'}} c) style={fontSize:'12px',color:'red'}
b) style={{fontSize:'12px',color:'red'}} d) style={{font-size:12px,color:'red'}}

13. Which method in a React Component should you override to stop the component from updating?
a) willComponentUpdate c) componentDidUpdate
b) shouldComponentUpdate d) componentDidMount

14. Number of elements, a valid react component can return

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

15. props in react can________

a) Be changed inside the component c) Be changed in side other component
b) Not be changed in the component d) None of the above

16. 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"] c) const [, first]["cooking", "art", "history"]

b) const [] = ["cooking", "art", "history"] d) const [first] = ["cooking", "art", "history"]
e)

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

const [, , animal] = ['Horse', 'Mouse', 'Cat'];

console.log(animal);
a) Horse b) Cat

2
React JS
 c) Mouse d) None of the above

18. What is the name of the tool used to take JSX and turn it into createElement calls?
a) JSX Editor c) Browser Buddy
b) ReactDOM d) Babel

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

<Message {...props} />

a) any that have changed c) child props

b) any that have not changed d) all of them

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

21. 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 c) This is a route splitter

b) This is a route parameter d) This is a route link

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

let message = 'Hi there';

const element = <p>{message}</p>;
a) a JS function c) a JSX wrapper
b) a JS element d) a JS expression

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

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

3
React JS
 25. 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>; }

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

27. 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 c) a dynamic key
b) a JSX code string d) a set value

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

29. 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]);

4
React JS
 d) useEffect(() => { setDone(true); }, [done, setDone]);

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

5
React JS