1.
`import React.Component from 'react'`
2.
`import [ Component
3.
`import Component from 'react'`
4.
`import { Component } from 'react'`
Q 1 / 78
1.
Wrap it in the `React.memo` higher-order component.
2.
Implement the `useReducer` Hook.
3.
Implement the `useMemo` Hook.
4.
Implement the `shouldComponentUpdate` lifecycle method.
Q 2 / 78
javascript const person =(firstName, lastName) => { first: firstName, last: lastName } console.log(person("Jill", "Wilson"))1.
Wrap the object in parentheses.
2.
Call the function from another file.
3.
Add a return statement before the first curly brace.
4.
Replace the object with an array.
Q 3 / 78
`import React, {useState} from 'react';`1.
React Hooks
2.
stateful components
3.
math
4.
class components
Q 4 / 78
javascript const name = 'Rachel'; const age = 31; const person = { name, age }; console.log(person);1.
`{{name: "Rachel", age: 31}}`
2.
`{name: "Rachel", age: 31}`
3.
`{person: "Rachel", person: 31}}`
4.
`{person: {name: "Rachel", age: 31}}`
Q 5 / 78
1.
Mocha
2.
Chai
3.
Sinon
4.
Jest
Q 6 / 78
javascript const topics = ['cooking', 'art', 'history'];1.
`const first = ["cooking", "art", "history"]`
2.
`const [
3.
`const [, first]["cooking", "art", "history"]`
4.
`const [first
Q 7 / 78
1.
React Send
2.
React Pinpoint
3.
React Router
4.
React Context
Q 8 / 78
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 <Message {...props} /> #### 13. Consider the following code from React Router. What do you call :id in the path prop? javascript <Route path="/:id" /> #### 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 <h1>Mac and Cheese</h1>; } ReactDOM.render(<Dish />, 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 ( <Suspense> <div> <Message /> </div> </Suspense> ); } #### 17. What do you call the message wrapped in curly braces below? javascript const message = 'Hi there'; const element = <p>{message}</p>; #### 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. <button onClick={this.handleClick}>Click Me</button> B. <button onClick={event => this.handleClick(event)}>Click Me</button> #### 21. How do you destructure the properties that are sent to the Dish component? javascript function Dish(props) { return ( <h1> {props.name} {props.cookingTime} </h1> ); } #### 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 = () => { <h1>Hello!</h1>; };1.
Horse
2.
Cat
3.
Mouse
4.
undefined
5.
JSX Editor
6.
ReactDOM
7.
Browser Buddy
8.
Babel
9.
when you want to replace Redux
10.
when you need to manage more complex state in an app
11.
when you want to improve performance
12.
when you want to break your production app
13.
any that have not changed
14.
all of them
15.
child props
16.
any that have changed
17.
This is a route modal
18.
This is a route parameter
19.
This is a route splitter
20.
This is a route link
21.
`div`
22.
section
23.
component
24.
`h1`
25.
`<h1 props={null}>What's happening?</h1>`
26.
`<h1>What's happening?</h1>`
27.
`<h1 id="component">What's happening?</h1>`
28.
`<h1 id="element">What's happening?</h1>`
29.
lazy
30.
loading
31.
fallback
32.
spinner
33.
a JS function
34.
a JS element
35.
a JS expression
36.
a JSX wrapper
37.
`React.memo`
38.
`React.split`
39.
`React.lazy`
40.
`React.fallback`
41.
to optimize for all devices
42.
to complete the update
43.
to change the layout of the screen
44.
when you need the browser to paint before the effect runs
45.
Button A will not have access to the event object on click of the button.
46.
Button B will not fire the handler this.handleClick successfully.
47.
Button A will not fire the handler this.handleClick successfully.
48.
There is no difference.
49.
`function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }`
50.
`function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }`
51.
`function Dish(props) { return <h1>{name} {cookingTime}</h1>; }`
52.
`function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }`
53.
when you do not want your component to have props
54.
when you have sibling components that need to be compared
55.
when you want a default implementation of `shouldComponentUpdate()`
56.
when you do not want your component to have state
57.
because you should never mutate state
58.
because `getDerivedStateFromProps()` is an unsafe method to use
59.
because you want to allow a component to update in response to changes in the props
60.
because you want to allow data to flow back up to the parent
61.
a property that adds child components to state
62.
a property that lets you pass components as data to other components
63.
a property that lets you set an array as a property
64.
a property that lets you pass data to child elements
65.
injectHTML
66.
dangerouslySetInnerHTML
67.
weirdSetInnerHTML
68.
strangeHTML
69.
declarative
70.
integrated
71.
closed
72.
imperative
73.
to put together physical file folders
74.
to preprocess files
75.
to load external data
76.
to load the website into everyone's phone
77.
virtual DOM
78.
DOM
79.
virtual elements
80.
shadow DOM
81.
Add a render function.
82.
Change the curly braces to parentheses or add a return statement before the `h1` tag.
83.
Move the `h1` to another component.
84.
Surround the `h1` in a `div`.
Q 9 / 78
1.
const
2.
let
3.
constant
4.
var
Q 10 / 78
1.
error bosses
2.
error catchers
3.
error helpers
4.
error boundaries
Q 11 / 78
1.
constructor
2.
componentDidMount
3.
componentWillReceiveProps
4.
componentWillMount
Q 12 / 78
1.
by putting them in the same file
2.
by nesting components
3.
with webpack
4.
with code splitting
Q 13 / 78
1.
monads
2.
pure functions
3.
recursive functions
4.
higher-order functions
Q 14 / 78
1.
to directly access the DOM node
2.
to refer to another JS file
3.
to call a function
4.
to bind the function
Q 15 / 78
javascript handleChange(e) { this.setState({ [e.target.id]: e.target.value }) }1.
a computed property name
2.
a set value
3.
a dynamic key
4.
a JSX code string
Q 16 / 78
javascript class Clock extends React.Component { render() { return <h1>Look at the time: {time}</h1>; } }1.
Clock
2.
It does not have a name prop.
3.
React.Component
4.
Component
Q 17 / 78
1.
a callback function that is called once for each element in the array
2.
the name of another array to iterate over
3.
the number of times you want to call the function
4.
a string describing what the function should do
Q 18 / 78
1.
It provides better encapsulation.
2.
It makes sure that the object is not mutated.
3.
It automatically updates a component.
4.
`setState` is asynchronous and might result in out of sync values.
Q 19 / 78
1.
`React`
2.
`ReactDOM`
3.
`Render`
4.
`DOM`
Q 20 / 78
1.
Use the `value` property.
2.
Use the `defaultValue` property.
3.
Use the `default` property.
4.
It assigns one automatically.
Q 21 / 78
js class clock extends React.Component { render() { return <h1>Look at the time: {this.props.time}</h1>; } } **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)1.
Add quotes around the return value
2.
Remove `this`
3.
Remove the render method
4.
Capitalize `clock`
Q 22 / 78
1.
`useEffect(function updateTitle() { document.title = name + ' ' + lastname; });`
2.
`useEffect(() => { title = name + ' ' + lastname; });`
3.
`useEffect(function updateTitle() { name + ' ' + lastname; });`
4.
`useEffect(function updateTitle() { title = name + ' ' + lastname; });`
Q 23 / 78
1.
`React.fallback`
2.
`React.split`
3.
`React.lazy`
4.
`React.memo`
Q 24 / 78
javascript function MyComponent(props) { const [done, setDone] = useState(false); return <h1>Done: {done}</h1>; }1.
`useEffect(() => { setDone(true); });`
2.
`useEffect(() => { setDone(true); }, []);`
3.
`useEffect(() => { setDone(true); }, [setDone]);`
4.
`useEffect(() => { setDone(true); }, [done, setDone]);`
Q 25 / 78
javascript class Huggable extends React.Component { hug(id) { console.log("hugging " + id); } render() { let name = "kitteh"; let button = // Missing Code return button; } }1.
`<button onClick={(name) => this.hug(name)}>Hug Button</button>`
2.
`<button onClick={this.hug(e, name)}>Hug Button</button>`
3.
`<button onClick={(e) => hug(e, name)}>Hug Button</button>`
4.
`<button onClick={(e) => this.hug(name,e)}>Hug Button</button>`
Q 26 / 78
javascript <button onClick={this.handleClick()}>Click this</button>1.
`<button onClick={this.handleClick.bind(handleClick)}>Click this</button>`
2.
`<button onClick={handleClick()}>Click this</button>`
3.
`<button onClick={this.handleClick}>Click this</button>`
4.
`<button onclick={this.handleClick}>Click this</button>`
Q 27 / 78
1.
A function component is the same as a class component.
2.
A function component accepts a single props object and returns a React element.
3.
A function component is the only way to create a component.
4.
A function component is required to create a React component.
Q 28 / 78
1.
FetchJS
2.
ReactDOM
3.
No library. `fetch()` is supported by most browsers.
4.
React
Q 29 / 78
javascript useEffect(() => { setName('John'); }, [name]);1.
It will cause an error immediately.
2.
It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.
3.
It will update the value of name once and not run again until name is changed from the outside.
4.
It will cause an infinite loop.
Q 30 / 78
1.
if the component calls `this.setState(...)`
2.
the value of one of the component's props changes
3.
if the component calls `this.forceUpdate()`
4.
one of the component's siblings rerenders
Q 31 / 78
javascript class Button extends React.Component{ constructor(props) { super(props); // Missing line } handleClick() {...} }1.
`this.handleClick.bind(this);`
2.
`props.bind(handleClick);`
3.
`this.handleClick.bind();`
4.
`this.handleClick = this.handleClick.bind(this);`
Q 32 / 78
javascript <React.Fragment> <h1>Our Staff</h1> <p>Our staff is available 9-5 to answer your questions</p> </React.Fragment> javascript <...> <h1>Our Staff</h1> <p>Our staff is available 9-5 to answer your questions</p> </...> javascript <//> <h1>Our Staff</h1> <p>Our staff is available 9-5 to answer your questions</p> <///> javascript <> <h1>Our Staff</h1> <p>Our staff is available 9-5 to answer your questions</p> </> javascript <Frag> <h1>Our Staff</h1> <p>Our staff is available 9-5 to answer your questions</p> </Frag>1.
A
2.
B
3.
C
4.
D
Q 33 / 78
javascript class Ticker extends React.component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return <h1>{}</h1>; } }1.
this.state.count
2.
count
3.
state
4.
state.count
Q 34 / 78
javascript const greeting = isLoggedIn ? <Hello /> : null;1.
never
2.
when `isLoggedIn` is true
3.
when a user logs in
4.
when the Hello function is called
Q 35 / 78
javascript ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));1.
string
2.
boolean
3.
object
4.
number
Q 36 / 78
javascript const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>;1.
`const element = <h1 style="backgroundColor: "blue""}>Hi</h1>;`
2.
`const element = <h1 style={{backgroundColor: "blue"}}>Hi</h1>;`
3.
`const element = <h1 style={blue}>Hi</h1>;`
4.
`const element = <h1 style="blue">Hi</h1>;`
Q 37 / 78
1.
`replaceState`
2.
`refreshState`
3.
`updateState`
4.
`setState`
Q 38 / 78
javascript const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;1.
black
2.
red
3.
grey
4.
white
Q 39 / 78
1.
`A function component is the same as a class component.`
2.
`A function component accepts a single props object and returns a React element.`
3.
`A function component is the only way to create a component.`
4.
`A function component is required to create a React component.`
Q 40 / 78
1.
`FetchJS`
2.
`ReactDOM`
3.
`No library. fetch() is supported by most browsers.`
4.
`React`
Q 41 / 78
javascript A. <button onClick=this.handleClick>Click Me</button> B. <button onClick={event => this.handleClick(event)}>Click Me</button>1.
`Button A will not have access to the event object on click of the button`
2.
`Button A will not fire the handler this.handleClick successfully`
3.
`There is no difference`
4.
`Button B will not fire the handler this.handleClick successfully`
Q 42 / 78
javascript useEffect(() => { setName('John'); }, [name]);1.
`It will cause an error immediately.`
2.
`It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.`
3.
`It will update the value of name once and not run again until name is changed from the outside.`
4.
`It will cause an infinite loop.`
Q 43 / 78
javascript <Route path="/:id" /> javascript <Route path="/:id"> {' '} <About /> </Route> javascript <Route path="/tid" about={Component} /> javascript <Route path="/:id" route={About} /> javascript <Route> <About path="/:id" /> </Route>1.
A
2.
B
3.
C
4.
D
Q 44 / 78
javascript const Greeting ({ name }) > <h1>Hello {name}!</h1>; javascript class Greeting extends React.Component { constructor() { return <h1>Hello {this.props.name}!</h1>; } } javascript class Greeting extends React.Component { <h1>Hello {this.props.name}!</h1>; } javascript class Greeting extends React.Component { render() { return <h1>Hello {this.props.name}!</h1>; } } javascript class Greeting extends React.Component { render({ name }) { return <h1>Hello {name}!</h1>; } }1.
A
2.
B
3.
C
4.
D
Q 45 / 78
javascript ReactDOM.render( <h1>Hi<h1>, document.getElementById('root') )1.
where the React element should be added to the DOM
2.
where to call the function
3.
where the root component is
4.
where to create a new JavaScript file
Q 46 / 78
1.
The link component allows the user to use the browser's `Back` button.
2.
There is no difference--the `Link` component is just another name for the `<a>` tag.
3.
The `<a>` tag will cause an error when used in React.
4.
The `<a>` tag triggers a full page reload, while the `Link` component does not.
Q 47 / 78
javascript React.createElement(x, y, z);1.
the element that should be created
2.
the order in which this element should be placed on the page
3.
the properties of the element
4.
data that should be displayed in the element
Q 48 / 78
javascript useEffect(() => { // do things }, []);1.
componentWillUnmount
2.
componentDidMount
3.
render
4.
componentDidUpdate
Q 49 / 78
javascript ReactDOM.render(<h1>Hi</h1>, document.getElementById('root'));1.
where the React element should be added to the DOM
2.
where to call the function
3.
where the root component is
4.
where to create a new JavaScript file
Q 50 / 78
`React.createElement(x,y,z);`1.
the element that should be created
2.
the order in which this element should be placed on the page
3.
the properties of the element
4.
data that should be displayed in the element.
Q 51 / 78
javascript class Comp extends React.Component { render() { return <h1>Look at the time: {time}</h1>; } } This question might be an updated version of Q37.1.
Comp
2.
h1
3.
React.Component
4.
Component
Q 52 / 78
javascript ReactDOM.createPortal(x, y); **Explanation:** From official docs: [Portals](https://reactjs.org/docs/portals.html)1.
the current state
2.
the element to render
3.
the App component
4.
the page
Q 53 / 78
javascript const [count, setCount] = useState(0); **Reference:** From official docs: [Hooks-State](https://reactjs.org/docs/hooks-state.html#:~:text=If%20we%20want%20to%20update%20the%20current)1.
the initial state value
2.
a variable
3.
a state object
4.
a function to update the state
Q 54 / 78
javascript const database = [user1:{},user2:{},user3:{}]; database.map((user)=><h1>user.data</h1>);1.
gives a map of all the entries in database
2.
returns a heading tag for every entry in the database containing it's data
3.
returns one heading tag for all the entries in database
4.
checks which entry in the database is suitable for heading tag
Q 55 / 78
javascript const { name: firstName } = person;1.
It is creating a new object that contains the same name property as the person object.
2.
It is assigning the value of the person object's firstName property to a constant called name.
3.
It is retrieving the value of person.name.firstName.
4.
It is assigning the value of the person object's name property to a constant called firstName.
Q 56 / 78
javascript const MyComponent = ({ names }) => ( <h1>Hello</h1> <p>Hello again</p> );1.
React components cannot be defined using functions.
2.
React does not allow components to return more than one element.
3.
The component needs to use the return keyword.
4.
String literals must be surrounded by quotes.
Q 57 / 78
javascript ReactDOM.createPortal(x, y);1.
the App component
2.
the page
3.
the current state
4.
the DOM element that exists outside of the parent component
Q 58 / 78
javascript const MyComponent = ({ children }) => ( <h1>{children.length}</h1> ); ... <MyComponent> <p>Hello</p> <p>Goodbye</p> </MyComponent>1.
It will produce an error saying "cannot read property "length" of undefined."
2.
1
3.
undefined
4.
2
Q 59 / 78
javascript const [count, setCount] = useState(0);1.
object destructuring
2.
array destructuring
3.
spread operating
4.
code pushing
Q 60 / 78
1.
src/App.js
2.
src/index.js
3.
public/manifest.json
4.
public/index.html
Q 61 / 78
javascript import React from 'react'; import { render } from 'react-dom'; const element = <h1>Hi</h1>; ReactDOM.render(element, document.getElementById('root'));1.
`render(element, document.getElementById("root"));`
2.
`ReactDOM(element, document.getElementById("root"));`
3.
`renderDOM(element, document.getElementById("root"));`
4.
`DOM(element, document.getElementById("root"));`
Q 62 / 78
javascript render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is: </div> ); }1.
`The user is loggedIn ? logged in : not logged in.`
2.
Write a function to check the login status.
3.
`The user is {isLoggedIn = "no"}.`
4.
`The user is {isLoggedIn ? "logged in." : "not logged in"}.`
Q 63 / 78
1.
Pass the name of each item as its key.
2.
Add a key prop with the same value to each item the list.
3.
Clear the console warnings.
4.
When iterating over the list items, add a unique property to each list item.
Q 64 / 78
1.
npm create-react-app collect-underpants
2.
npx start-app collect-underpants
3.
react new collect-underpants
4.
npx create-react-app collect-underpants
Q 65 / 78
javascript class StarTrekkin extends React.Component { firePhotonTorpedoes(e) { console.log('pew pew'); } render() { return; // Missing code } }1.
`<button onClick={firePhotonTorpedoes()}>Pew Pew</button>`
2.
`<button onClick={firePhotonTorpedoes}>Pew Pew</button>`
3.
`<button onClick={this.firePhotonTorpedoes()}>Pew Pew</button>`
4.
`<button onClick={this.firePhotonTorpedoes}>Pew Pew</button>`
Q 66 / 78
1.
shadow DOM
2.
fiber
3.
reconciliation
4.
setting state
Q 67 / 78
1.
Intuit
2.
3.
4.
Snapchat
Q 68 / 78
1.
react-starter
2.
create-react-app
3.
react-gen
4.
react-start
Q 69 / 78
1.
React Developer Tools
2.
React Tooling Add-on
3.
React Codewatch
4.
React Debug
Q 70 / 78
1.
React
2.
jQuery
3.
webpack
4.
ReactDOM
Q 71 / 78
1.
HTML
2.
JavaScriptX
3.
JSX
4.
React JavaScript
Q 72 / 78
1.
Check Manually.
2.
Use `prop-helper`.
3.
use `prop-types`.
4.
user `checker-types`.
Q 73 / 78
`let dish = <h1>Mac and Cheese</h1>; `1.
`let dish = <h1 id={heading}>Mac and Cheese</h1>;`
2.
`let dish = <h1 id="heading">Mac and Cheese</h1>;`
3.
`let dish = <h1 id:"heading">Mac and Cheese</h1>;`
4.
`let dish = <h1 class="heading">Mac and Cheese</h1>;`
Q 74 / 78
class Huggable extends React.Component { hug(id) { console.log("hugging " + id); } render() { let name = "kitteh"; let button = // Missing code return button; } }1.
`<button onClick={(name) => this.hug(name)}>Hug Button</button>;`
2.
`<button onClick={this.hug(e, name)}>Hug Button</button>;`
3.
`<button onClick={(e) => this.hug(name, e)}>Hug Button</button>;`
4.
`<button onClick={(e) => this.hug(name, e)}>Hug Button</button>;`
Q 75 / 78
`React Components are like functions that return HTML elements. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components.` [(Source)](https://reactjs.org/docs/components-and-props.html)1.
a generator
2.
a function or a class
3.
a service worker
4.
a tag
Q 76 / 78
1.
onBlur
2.
onPress
3.
defaultValue
4.
disabled
Q 77 / 78
` function Dish() { return ( <> <Ingredient /> <Ingredient /> </> ); } `1.
child component
2.
parent component
3.
nested component
4.
sibling component
Q 78 / 78