Library
Fullstack Javascript Test
Frontend React

The Frontend (with React.js)

Question #80

Which of the following is NOT a special attribute on component instances (which you can access through this)?

A) setState

B) prop

C) key

D) state

Question #81

Can React be used without JSX?

A) Yes

B) No

C) Only function components can be used without JSX

D) Only class components can be used without JSX

Question #82

When is the class component syntax needed?

A) Only for the top-level component

B) When we need to manage state or use lifecycle methods

C) Only for components that are children of class components

D) Only for a component that is the parent of a class component

Question #83

What is the declarative way to render a dynamic list of components based on values in an array?

A) Using the map array method

B) Using the <Each /> component

C) With a for/while loop

D) Using the reduce array method

Question #84

What can we do if components A and B are siblings and they require access to the same state element?

A) Place the state in a third component C that is a sibling to A and B

B) Place the state in either A or B

C) Restructure the application to have A and B be related differently

D) Place the state in the parent component of A and B

Question #85

What’s the right syntax to assign the function doSomething as the handler of a click event?

A)

onClick={doSomething()}

B)

onClick={() => doSomething}

C)

onClick={doSomething}

D)

onClick="doSomething()"

Question #86

What’s the reason some React applications include raw JSON data with their server-rendered HTML markup?

A) Parsing data that is included with initial markup is more efficient than parsing data from ajax requests

B) React uses the data in its markup comparing algorithm to be able to hydrate the application

C) It makes the initial request more efficient over the network

D) Redux requires an initial state object

Question #87

Given this React.js component:

const Message = (props) => {
  return <div>{props.message}</div>;
};

How can the value of props.message be changed within the React.js application?

A) Using this.setState({message: newMessage}) in the Message component

B) Using props.message = newMessage in the Message component

C) Using this.setProp({message: newMessage}) in the Message component

D) The parent component can pass a new value for message

Question #88

Given a component named User, which of the following is a valid example of declaring a value of "Max" for the firstName prop via JSX?

A) <User prop.firstName="Max" />

B) User.firstName('Max');

C) User.setFirstName('Max');

D) <User firstName="Max" />

Question #89

Which React function does each <tag></tag> in JSX compile into?

A) React.createInstance

B) React.createElement

C) React.renderElement

D) React.renderComponent

Question #90

Which life cycle method is most suitable to fetch Ajax data to be rendered in the component?

A) constructor()

B) componentDidMount()

C) shouldComponentUpdate()

D) componentDidUpdate()

Question #91

Which of the following is a valid way to define a React component that is capable of managing state?

A) Create a class with a static render() method

B) Instantiate a new object from React.Component

C) Create a class that extends React.Component and defines a render() method

D) Create a function that returns a React element and then define the component state as a property on that function

Question #92

What’s a higher order component?

A) A function that takes an existing component and returns another component which wraps the first component

B) A component with a higher number of children elements

C) A component that gets rendered before another component

D) A component with a level higher up in the DOM tree

Question #93

Which of the following is an acceptable letter case to define a React component for an "audio player"?

A) AudioPlayer

B) audioPlayer

C) audioplayer

D) audio_player

Question #94

What is a "Pure Component" in React?

A) It’s another name for function components

B) A component that will not render on updated props/state if the new values match the old ones

C) A component that cannot have private state

D) A component that will purely represent a UI element

Question #95

What kind of structure does the special style attribute in React accept?

A) An object with lowercase properties.

B) An object with camelCased properties

C) A string of valid CSS attributes

D) An object with snake_case properties

Question #96

Which of the following is the React API method to create a ref object that can be attached to React elements via the ref attribute?

A) React.ref()

B) new React.ref()

C) ReactDOM.findDOMNode()

D) React.createRef()

Question #97

What’s wrong with this code (which is part of a React’s component render function)?

<div onClick={event => this.setState({clickEvent: event})}>
</div>

A) The event parameter in React is pooled. You cannot access it in an asynchronous way

B) You can’t use the "this" keyword in a handler without binding the function first

C) The use of inline functions as event handlers is not allowed in React

D) The onClick event is only valid on clickable element like anchors

Question #98

How do you fix the possible race condition in the following code?

this.setState({ counter: this.state.counter + 1 });

A)

let counter = this.state.counter;
this.setState({ counter: counter + 1 });

B)

this.setState({counter}, $inc);

C)

this.setState(state => ({counter: state.counter + 1});

D)

this.setState({ counter: ++this.state.counter });

Question #99

Which of the following is not a valid render() method in a React class component?

A)

render() {
  return (
    <div></div><div></div>
  );
}

B)

render() {
  return (
    <>
      <div></div><div></div>
    </>
  );
}

C)

render() {
  return (
    <React.Fragment>
      <div></div><div></div>
    </React.Fragment>
  );
}

D)

render() {
  return "hello";
}

Question #100

This React lifecycle method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

A) componentWillUnmount

B) componentDidThrow

C) componentDidCatch

D) componentDidUnmount