[{"id":1,"question":"If you want to import just the Component from the React library, what syntax do you use?","code":"","reference":"","choices":[{"text":"`import React.Component from 'react'`","answer":false,"code":false},{"text":"`import [ Component ","answer":false,"code":false},{"text":"`import Component from 'react'`","answer":false,"code":false},{"text":"`import { Component } from 'react'`","answer":true,"code":false}]},{"id":2,"question":"If a function component should always render the same way given the same props, what is a simple performance optimization available for it?","code":"","reference":"","choices":[{"text":"Wrap it in the `React.memo` higher-order component.","answer":true,"code":false},{"text":"Implement the `useReducer` Hook.","answer":false,"code":false},{"text":"Implement the `useMemo` Hook.","answer":false,"code":false},{"text":"Implement the `shouldComponentUpdate` lifecycle method.","answer":false,"code":false}]},{"id":3,"question":"How do you fix the syntax error that results from running this code?","code":"javascript const person =(firstName, lastName) => { first: firstName, last: lastName } console.log(person(\"Jill\", \"Wilson\"))","reference":"```","choices":[{"text":"Wrap the object in parentheses.","answer":true,"code":false},{"text":"Call the function from another file.","answer":false,"code":false},{"text":"Add a return statement before the first curly brace.","answer":false,"code":false},{"text":"Replace the object with an array.","answer":false,"code":false}]},{"id":4,"question":"If you see the following import in a file, what is being used for state management in the component?","code":"`import React, {useState} from 'react';`","reference":"`import React, {useState} from 'react';`","choices":[{"text":"React Hooks","answer":true,"code":false},{"text":"stateful components","answer":false,"code":false},{"text":"math","answer":false,"code":false},{"text":"class components","answer":false,"code":false}]},{"id":5,"question":"Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?","code":"javascript const name = 'Rachel'; const age = 31; const person = { name, age }; console.log(person);","reference":"```","choices":[{"text":"`{{name: \"Rachel\", age: 31}}`","answer":false,"code":false},{"text":"`{name: \"Rachel\", age: 31}`","answer":true,"code":false},{"text":"`{person: \"Rachel\", person: 31}}`","answer":false,"code":false},{"text":"`{person: {name: \"Rachel\", age: 31}}`","answer":false,"code":false}]},{"id":6,"question":"What is the testing library most often associated with React?","code":"","reference":"","choices":[{"text":"Mocha","answer":false,"code":false},{"text":"Chai","answer":false,"code":false},{"text":"Sinon","answer":false,"code":false},{"text":"Jest","answer":true,"code":false}]},{"id":7,"question":"To get the first item from the array (\"cooking\") using array destructuring, how do you adjust this line?","code":"javascript const topics = ['cooking', 'art', 'history'];","reference":"```","choices":[{"text":"`const first = [\"cooking\", \"art\", \"history\"]`","answer":false,"code":false},{"text":"`const [","answer":false,"code":false},{"text":"`const [, first][\"cooking\", \"art\", \"history\"]`","answer":false,"code":false},{"text":"`const [first","answer":true,"code":false}]},{"id":8,"question":"How do you handle passing through the component tree without having to pass props down manually at every level?","code":"","reference":"","choices":[{"text":"React Send","answer":false,"code":false},{"text":"React Pinpoint","answer":false,"code":false},{"text":"React Router","answer":false,"code":false},{"text":"React Context","answer":true,"code":false}]},{"id":9,"question":"What should the console read when the following code is run?","code":"javascript const [, , animal] = ['Horse', 'Mouse', 'Cat']; console.log(animal); #### 10. What is the name of the tool used to take JSX and turn it into createElement calls? #### 11. Why might you use useReducer over useState in a React component? #### 12. Which props from the props object is available to the component with the following syntax? javascript #### 13. Consider the following code from React Router. What do you call :id in the path prop? javascript #### 14. If you created a component called Dish and rendered it to the DOM, what type of element would be rendered? javascript function Dish() { return

Mac and Cheese

; } ReactDOM.render(, document.getElementById('root')); #### 15. What does this React element look like given the following function? (Alternative: Given the following code, what does this React element look like?) javascript React.createElement('h1', null, \"What's happening?\"); #### 16. What property do you need to add to the Suspense component in order to display a spinner or loading state? javascript function MyComponent() { return (

); } #### 17. What do you call the message wrapped in curly braces below? javascript const message = 'Hi there'; const element =

{message}

; #### 18. What can you use to handle code splitting? #### 19. When do you use `useLayoutEffect`? #### 20. What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)? javascript A. B. #### 21. How do you destructure the properties that are sent to the Dish component? javascript function Dish(props) { return (

{props.name} {props.cookingTime}

); } #### 22. When might you use `React.PureComponent`? #### 23. Why is it important to avoid copying the values of props into a component's state where possible? #### 24. What is the children prop? #### 25. Which attribute do you use to replace innerHTML in the browser DOM? #### 26. Which of these terms commonly describe React applications? #### 27. When using webpack, why would you need to use a loader? #### 28. A representation of a user interface that is kept in memory and is synced with the \"real\" DOM is called what? #### 29. You have written the following code but nothing is rendering. How do you fix this problem? javascript const Heading = () => {

Hello!

; };","reference":"```","choices":[{"text":"Horse","answer":false,"code":false},{"text":"Cat","answer":true,"code":false},{"text":"Mouse","answer":false,"code":false},{"text":"undefined","answer":false,"code":false},{"text":"JSX Editor","answer":false,"code":false},{"text":"ReactDOM","answer":false,"code":false},{"text":"Browser Buddy","answer":false,"code":false},{"text":"Babel","answer":true,"code":false},{"text":"when you want to replace Redux","answer":false,"code":false},{"text":"when you need to manage more complex state in an app","answer":true,"code":false},{"text":"when you want to improve performance","answer":false,"code":false},{"text":"when you want to break your production app","answer":false,"code":false},{"text":"any that have not changed","answer":false,"code":false},{"text":"all of them","answer":true,"code":false},{"text":"child props","answer":false,"code":false},{"text":"any that have changed","answer":false,"code":false},{"text":"This is a route modal","answer":false,"code":false},{"text":"This is a route parameter","answer":true,"code":false},{"text":"This is a route splitter","answer":false,"code":false},{"text":"This is a route link","answer":false,"code":false},{"text":"`div`","answer":false,"code":false},{"text":"section","answer":false,"code":false},{"text":"component","answer":false,"code":false},{"text":"`h1`","answer":true,"code":false},{"text":"`

What's happening?

`","answer":false,"code":false},{"text":"`

What's happening?

`","answer":true,"code":false},{"text":"`

What's happening?

`","answer":false,"code":false},{"text":"`

What's happening?

`","answer":false,"code":false},{"text":"lazy","answer":false,"code":false},{"text":"loading","answer":false,"code":false},{"text":"fallback","answer":true,"code":false},{"text":"spinner","answer":false,"code":false},{"text":"a JS function","answer":false,"code":false},{"text":"a JS element","answer":false,"code":false},{"text":"a JS expression","answer":true,"code":false},{"text":"a JSX wrapper","answer":false,"code":false},{"text":"`React.memo`","answer":false,"code":false},{"text":"`React.split`","answer":false,"code":false},{"text":"`React.lazy`","answer":true,"code":false},{"text":"`React.fallback`","answer":false,"code":false},{"text":"to optimize for all devices","answer":false,"code":false},{"text":"to complete the update","answer":false,"code":false},{"text":"to change the layout of the screen","answer":false,"code":false},{"text":"when you need the browser to paint before the effect runs","answer":true,"code":false},{"text":"Button A will not have access to the event object on click of the button.","answer":false,"code":false},{"text":"Button B will not fire the handler this.handleClick successfully.","answer":false,"code":false},{"text":"Button A will not fire the handler this.handleClick successfully.","answer":false,"code":false},{"text":"There is no difference.","answer":true,"code":false},{"text":"`function Dish([name, cookingTime]) { return

{name} {cookingTime}

; }`","answer":false,"code":false},{"text":"`function Dish({name, cookingTime}) { return

{name} {cookingTime}

; }`","answer":true,"code":false},{"text":"`function Dish(props) { return

{name} {cookingTime}

; }`","answer":false,"code":false},{"text":"`function Dish(...props) { return

{name} {cookingTime}

; }`","answer":false,"code":false},{"text":"when you do not want your component to have props","answer":false,"code":false},{"text":"when you have sibling components that need to be compared","answer":false,"code":false},{"text":"when you want a default implementation of `shouldComponentUpdate()`","answer":true,"code":false},{"text":"when you do not want your component to have state","answer":false,"code":false},{"text":"because you should never mutate state","answer":false,"code":false},{"text":"because `getDerivedStateFromProps()` is an unsafe method to use","answer":false,"code":false},{"text":"because you want to allow a component to update in response to changes in the props","answer":true,"code":false},{"text":"because you want to allow data to flow back up to the parent","answer":false,"code":false},{"text":"a property that adds child components to state","answer":false,"code":false},{"text":"a property that lets you pass components as data to other components","answer":true,"code":false},{"text":"a property that lets you set an array as a property","answer":false,"code":false},{"text":"a property that lets you pass data to child elements","answer":false,"code":false},{"text":"injectHTML","answer":false,"code":false},{"text":"dangerouslySetInnerHTML","answer":true,"code":false},{"text":"weirdSetInnerHTML","answer":false,"code":false},{"text":"strangeHTML","answer":false,"code":false},{"text":"declarative","answer":true,"code":false},{"text":"integrated","answer":false,"code":false},{"text":"closed","answer":false,"code":false},{"text":"imperative","answer":false,"code":false},{"text":"to put together physical file folders","answer":false,"code":false},{"text":"to preprocess files","answer":true,"code":false},{"text":"to load external data","answer":false,"code":false},{"text":"to load the website into everyone's phone","answer":false,"code":false},{"text":"virtual DOM","answer":true,"code":false},{"text":"DOM","answer":false,"code":false},{"text":"virtual elements","answer":false,"code":false},{"text":"shadow DOM","answer":false,"code":false},{"text":"Add a render function.","answer":false,"code":false},{"text":"Change the curly braces to parentheses or add a return statement before the `h1` tag.","answer":true,"code":false},{"text":"Move the `h1` to another component.","answer":false,"code":false},{"text":"Surround the `h1` in a `div`.","answer":false,"code":false}]},{"id":10,"code":"","reference":"","choices":[{"text":"const","answer":true,"code":false},{"text":"let","answer":false,"code":false},{"text":"constant","answer":false,"code":false},{"text":"var","answer":false,"code":false}]},{"id":11,"code":"","reference":"","choices":[{"text":"error bosses","answer":false,"code":false},{"text":"error catchers","answer":false,"code":false},{"text":"error helpers","answer":false,"code":false},{"text":"error boundaries","answer":true,"code":false}]},{"id":12,"code":"","reference":"","choices":[{"text":"constructor","answer":false,"code":false},{"text":"componentDidMount","answer":true,"code":false},{"text":"componentWillReceiveProps","answer":false,"code":false},{"text":"componentWillMount","answer":false,"code":false}]},{"id":13,"code":"","reference":"","choices":[{"text":"by putting them in the same file","answer":false,"code":false},{"text":"by nesting components","answer":true,"code":false},{"text":"with webpack","answer":false,"code":false},{"text":"with code splitting","answer":false,"code":false}]},{"id":14,"code":"","reference":"","choices":[{"text":"monads","answer":false,"code":false},{"text":"pure functions","answer":true,"code":false},{"text":"recursive functions","answer":false,"code":false},{"text":"higher-order functions","answer":false,"code":false}]},{"id":15,"code":"","reference":"","choices":[{"text":"to directly access the DOM node","answer":true,"code":false},{"text":"to refer to another JS file","answer":false,"code":false},{"text":"to call a function","answer":false,"code":false},{"text":"to bind the function","answer":false,"code":false}]},{"id":16,"code":"javascript handleChange(e) { this.setState({ [e.target.id]: e.target.value }) }","reference":"```","choices":[{"text":"a computed property name","answer":false,"code":false},{"text":"a set value","answer":false,"code":false},{"text":"a dynamic key","answer":true,"code":false},{"text":"a JSX code string","answer":false,"code":false}]},{"id":17,"code":"javascript class Clock extends React.Component { render() { return

Look at the time: {time}

; } }","reference":"```","choices":[{"text":"Clock","answer":true,"code":false},{"text":"It does not have a name prop.","answer":false,"code":false},{"text":"React.Component","answer":false,"code":false},{"text":"Component","answer":false,"code":false}]},{"id":18,"code":"","reference":"","choices":[{"text":"a callback function that is called once for each element in the array","answer":true,"code":false},{"text":"the name of another array to iterate over","answer":false,"code":false},{"text":"the number of times you want to call the function","answer":false,"code":false},{"text":"a string describing what the function should do","answer":false,"code":false}]},{"id":19,"code":"","reference":"","choices":[{"text":"It provides better encapsulation.","answer":false,"code":false},{"text":"It makes sure that the object is not mutated.","answer":false,"code":false},{"text":"It automatically updates a component.","answer":false,"code":false},{"text":"`setState` is asynchronous and might result in out of sync values.","answer":true,"code":false}]},{"id":20,"code":"","reference":"","choices":[{"text":"`React`","answer":false,"code":false},{"text":"`ReactDOM`","answer":true,"code":false},{"text":"`Render`","answer":false,"code":false},{"text":"`DOM`","answer":false,"code":false}]},{"id":21,"code":"","reference":"","choices":[{"text":"Use the `value` property.","answer":false,"code":false},{"text":"Use the `defaultValue` property.","answer":true,"code":false},{"text":"Use the `default` property.","answer":false,"code":false},{"text":"It assigns one automatically.","answer":false,"code":false}]},{"id":22,"code":"js class clock extends React.Component { render() { return

Look at the time: {this.props.time}

; } } **Explanation:** In JSX, lower-case tag names are considered to be HTML tags. Read [this article](https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components)","reference":"Read [this article](https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components)","choices":[{"text":"Add quotes around the return value","answer":false,"code":false},{"text":"Remove `this`","answer":false,"code":false},{"text":"Remove the render method","answer":false,"code":false},{"text":"Capitalize `clock`","answer":true,"code":false}]},{"id":23,"code":"","reference":"","choices":[{"text":"`useEffect(function updateTitle() { document.title = name + ' ' + lastname; });`","answer":true,"code":false},{"text":"`useEffect(() => { title = name + ' ' + lastname; });`","answer":false,"code":false},{"text":"`useEffect(function updateTitle() { name + ' ' + lastname; });`","answer":false,"code":false},{"text":"`useEffect(function updateTitle() { title = name + ' ' + lastname; });`","answer":false,"code":false}]},{"id":24,"code":"","reference":"","choices":[{"text":"`React.fallback`","answer":false,"code":false},{"text":"`React.split`","answer":false,"code":false},{"text":"`React.lazy`","answer":true,"code":false},{"text":"`React.memo`","answer":false,"code":false}]},{"id":25,"code":"javascript function MyComponent(props) { const [done, setDone] = useState(false); return

Done: {done}

; }","reference":"```","choices":[{"text":"`useEffect(() => { setDone(true); });`","answer":false,"code":false},{"text":"`useEffect(() => { setDone(true); }, []);`","answer":true,"code":false},{"text":"`useEffect(() => { setDone(true); }, [setDone]);`","answer":false,"code":false},{"text":"`useEffect(() => { setDone(true); }, [done, setDone]);`","answer":false,"code":false}]},{"id":26,"code":"javascript class Huggable extends React.Component { hug(id) { console.log(\"hugging \" + id); } render() { let name = \"kitteh\"; let button = // Missing Code return button; } }","reference":"```","choices":[{"text":"``","answer":false,"code":false},{"text":"``","answer":false,"code":false},{"text":"``","answer":false,"code":false},{"text":"``","answer":true,"code":false}]},{"id":27,"code":"javascript ","reference":"```","choices":[{"text":"``","answer":false,"code":false},{"text":"``","answer":false,"code":false},{"text":"``","answer":true,"code":false},{"text":"``","answer":false,"code":false}]},{"id":28,"code":"","reference":"","choices":[{"text":"A function component is the same as a class component.","answer":false,"code":false},{"text":"A function component accepts a single props object and returns a React element.","answer":true,"code":false},{"text":"A function component is the only way to create a component.","answer":false,"code":false},{"text":"A function component is required to create a React component.","answer":false,"code":false}]},{"id":29,"code":"","reference":"","choices":[{"text":"FetchJS","answer":false,"code":false},{"text":"ReactDOM","answer":false,"code":false},{"text":"No library. `fetch()` is supported by most browsers.","answer":true,"code":false},{"text":"React","answer":false,"code":false}]},{"id":30,"code":"javascript useEffect(() => { setName('John'); }, [name]);","reference":"```","choices":[{"text":"It will cause an error immediately.","answer":false,"code":false},{"text":"It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.","answer":false,"code":false},{"text":"It will update the value of name once and not run again until name is changed from the outside.","answer":true,"code":false},{"text":"It will cause an infinite loop.","answer":false,"code":false}]},{"id":31,"code":"","reference":"","choices":[{"text":"if the component calls `this.setState(...)`","answer":false,"code":false},{"text":"the value of one of the component's props changes","answer":false,"code":false},{"text":"if the component calls `this.forceUpdate()`","answer":false,"code":false},{"text":"one of the component's siblings rerenders","answer":true,"code":false}]},{"id":32,"code":"javascript class Button extends React.Component{ constructor(props) { super(props); // Missing line } handleClick() {...} }","reference":"```","choices":[{"text":"`this.handleClick.bind(this);`","answer":false,"code":false},{"text":"`props.bind(handleClick);`","answer":false,"code":false},{"text":"`this.handleClick.bind();`","answer":false,"code":false},{"text":"`this.handleClick = this.handleClick.bind(this);`","answer":true,"code":false}]},{"id":33,"code":"javascript

Our Staff

0/78

If you want to import just the Component from the React library, what syntax do you use?