PLAY READ BLOG

Assess your experience with ReactJS

I estimate it would take you 39 steps in 14 minutes to Assess your experience with ReactJS.
Given a component like this:

class Hello extends React.Component {
render() {
return <div>{this.props.myProp}</div>;

Which code snippet below declares "newValue" as the default prop value for this.props.myProp?
  • this.setState({myProp: "newValue"});
  • Hello.myProp = "newValue";
  • this.myProp = "newValue";
  • Hello.defaultProps = {myProp: 'newValue' };
  • Hello.props.default = {myProp: 'newValue'};
What is the correct syntax to use this component with the ReactDOM.render() method?

function Greeting(props) {
return <h1>Greetings New User</h1>;
}
1. ReactDOM.render(<Greeting ></Greeting>, document.getElementById('root'));

2. ReactDOM.render(document.getElementById('root'), <greeting ></greeting>);

3. ReactDOM.render(document.getElementById('root'), <Greeting ></Greeting>);

4. ReactDOM.render(<greeting ></greeting>, document.getElementById('root'));
  • 1.
  • 2.
  • 3.
  • 4.
What's the right letter case to define a component for "audio player"?
1. audioPlayer

2. audioplayer

3. audio_player

4. AudioPlayer
  • 1.
  • 2.
  • 3.
  • 4.
What is the purpose of declaring a default prop?
1. It specifies the value to use for a given prop if one is not specified.

2. It specifies the DOM element a component should utilize.

3. It specifies the component's initial state.

4. It specifies the value the prop should be set to when render is triggered.

5. It specifies the value to utilize if this.state overwritten.
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
What is the primary difference between class-based components and stateless functional components
1. Class-based components offer superior performance

2. Only stateless functional components support declaring child functions

3. Stateless functional components do not support local state

4. Only class-based components support JSX
  • 1.
  • 2.
  • 3.
  • 4.
You are coding up a test for a component, and you have the results of a shallow render on a variable result, what field can be used to check that the component has rendered an element with 3 children elements?
1. result.childrenCount === 3

2. result.children === 3

3. result.props.children.length === 3

4. result.count === 3
  • 1.
  • 2.
  • 3.
  • 4.
The following object is stored in state:

{
first: 'Bob',
last: 'Smith'
}

Then, following call is made:

this.setState({city: 'New York'});

What is the result?
1. State is { first: 'Bob', last: 'Smith', city: 'New York'}

2. Runtime error: Invalid object

3. State is { city: 'New York' }

4. Runtime error: Missing property, first

5. State is { first: 'Bob', last: 'Smith' }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
What does a stateful component's render method actually return?
  • A React element
  • A string
  • JSX
💡FUN FACT 💡React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012
Which of the following calls is used to render a React web application?
  • Object.create()
  • ReactDOM.render()
  • ReactDOM.renderWebApp()
  • React.createApp()
  • ReactDOM.createApp()
Which one of the following JavaScript functions can be used to execute an event handler function bound to the context of a React component?
  • clone
  • ref
  • instance
  • bind
You are working on a component with an input element. While testing, you found that nothing happens when you try and set a value for the input element, it just stays blank.
Have a look at the following code:
What needs to be done to allow the input value to be updated by a user?
1. Call setState in the handleChange event handler to update the email state variable

2. In the handleChange function, remove all state to ensure that the render function gets executed again

3. Use another library like jQuery for low level DOM manipulation

4. In the render function, add a name parameter to the input element, otherwise the browser will ignore
  • 1.
  • 2.
  • 3.
  • 4.
How do you instruct the Perf addon to begin measuring?
  • Perf.start()
  • new Perf()
  • Perf.begin()
How do you import component A that lives one level up from where you are?
  • './A';
  • 'A';
  • '../A';
When instructed, what does the User Timeline show for React?
1. All the DOM operations

2. The wasted DOM operations

3. The sequence of mounting, updating, and unmounting of components
  • 1.
  • 2.
  • 3.
Which is better: pure components or function components?
1. A pure component is always a better choice.

2. This depends on the type of data and the complexity of what is rendered.

3. A function component is always a better choice.
  • 1.
  • 2.
  • 3.
You want to add an event handler to a div in order to get notified when the user clicks on it. What is the correct attribute to use on your element?
1. onClick

2. on-click

3. rct-click

4. onclick
  • 1.
  • 2.
  • 3.
  • 4.
Choose the best strategy to improve on the responsibilities of a component.
1. A component should not render more than 5 children.

2. A component should not have more than 5 props.

3. A component should not be aware of anything that it does not use to render its UI.
  • 1.
  • 2.
  • 3.
What function changes local component state?
1. editState

2. applyState

3. updateState

4. changeState

5. setState
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
97% of all 187 users completed this intention.
Get Started   

Or consider 72 other intentions.