Linked in quiz
LinkedIn Reactjs quiz
# If you want to import just the Component from the React library, what syntax do you use?
- [ ] `import React.Component from 'react'`
- [ ] `import [ Component ] from 'react'`
- [ ] `import Component from 'react'`
- [x] `import { Component } from 'react'`
# If a function component should always render the same way given the same props, what is a simple performance optimization available for it?
- [x] Wrap it in the `React.memo` higher-order component.
- [ ] Implement the `useReducer` Hook.
- [ ] Implement the `useMemo` Hook.
- [ ] Implement the `shouldComponentUpdate` lifecycle method.
# How do you fix the syntax error that results from running this code?
```javascript
const person =(firstName, lastName) =>
{
first: firstName,
last: lastName
}
console.log(person("Jill", "Wilson"))
```
- [x] Wrap the object in parentheses.
- [ ] Call the function from another file.
- [ ] Add a return statement before the first curly brace.
- [ ] Replace the object with an array.
# If you see the following import in a file, what is being used for state management in the component?
`import React, {useState} from 'react';`
- [x] React Hooks
- [ ] stateful components
- [ ] math
- [ ] class components
# Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?
```javascript
const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);
```
- [ ] `{{name: "Rachel", age: 31}}`
- [x] `{name: "Rachel", age: 31}`
- [ ] `{person: "Rachel", person: 31}}`
- [ ] `{person: {name: "Rachel", age: 31}}`
# What is the testing library most often associated with React?
- [ ] Mocha
- [ ] Chai
- [ ] Sinon
- [x] Jest
# To get the first item from the array ("cooking") using array destructuring, how do you adjust this line?
```javascript
const topics = ['cooking', 'art', 'history'];
```
- [ ] `const first = ["cooking", "art", "history"]`
- [ ] `const [] = ["cooking", "art", "history"]`
- [ ] `const [, first]["cooking", "art", "history"]`
- [x] `const [first] = ["cooking", "art", "history"]`
# How do you handle passing through the component tree without having to pass props down manually at every level?
- [ ] React Send
- [ ] React Pinpoint
- [ ] React Router
- [x] React Context
# What should the console read when the following code is run?
```javascript
const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);
```
- [ ] Horse
- [x] Cat
- [ ] Mouse
- [ ] undefined
# What is the name of the tool used to take JSX and turn it into createElement calls?
- [ ] JSX Editor
- [ ] ReactDOM
- [ ] Browser Buddy
- [x] Babel
# Why might you use useReducer over useState in a React component?
- [ ] when you want to replace Redux
- [x] when you need to manage more complex state in an app
- [ ] when you want to improve performance
- [ ] when you want to break your production app
# Which props from the props object is available to the component with the following syntax?
```javascript
);
}
```
- [ ] lazy
- [ ] loading
- [x] fallback
- [ ] spinner
# What do you call the message wrapped in curly braces below?
```javascript
const message = 'Hi there';
const element =
```
- [ ] A
```javascript
<...>
```
# If you wanted to display the count state value in the component, what do you need to add to the curly braces in the `h1`?
```javascript
class Ticker extends React.component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return
{' '}
```
- [ ] B
```javascript
```
# Which class-based component is equivalent to this function component?
```javascript
const Greeting = ({ name }) => Hi
Mac and Cheese
; } ReactDOM.render(What's happening?
` - [x] `What's happening?
` - [ ] `What's happening?
` - [ ] `What's happening?
` # What property do you need to add to the Suspense component in order to display a spinner or loading state? ```javascript function MyComponent() { return ({message}
; ``` - [ ] a JS function - [ ] a JS element - [x] a JS expression - [ ] a JSX wrapper # What can you use to handle code splitting? - [ ] `React.memo` - [ ] `React.split` - [x] `React.lazy` - [ ] `React.fallback` # When do you use `useLayoutEffect`? - [ ] to optimize for all devices - [ ] to complete the update - [ ] to change the layout of the screen - [x] when you need the browser to paint before the effect runs # What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)? ```javascript A. B. ``` - [ ] Button A will not have access to the event object on click of the button. - [ ] Button B will not fire the handler this.handleClick successfully. - [ ] Button A will not fire the handler this.handleClick successfully. - [x] There is no difference. # How do you destructure the properties that are sent to the Dish component? ```javascript function Dish(props) { return ({props.name} {props.cookingTime}
); } ``` - [ ] `function Dish([name, cookingTime]) { return{name} {cookingTime}
; }` - [x] `function Dish({name, cookingTime}) { return{name} {cookingTime}
; }` - [ ] `function Dish(props) { return{name} {cookingTime}
; }` - [ ] `function Dish(...props) { return{name} {cookingTime}
; }` # When might you use `React.PureComponent`? - [ ] when you do not want your component to have props - [ ] when you have sibling components that need to be compared - [x] when you want a default implementation of `shouldComponentUpdate()` - [ ] when you do not want your component to have state # Why is it important to avoid copying the values of props into a component's state where possible? - [ ] because you should never mutate state - [ ] because `getDerivedStateFromProps()` is an unsafe method to use - [x] because you want to allow a component to update in response to changes in the props - [ ] because you want to allow data to flow back up to the parent # What is the children prop? - [ ] a property that adds child components to state - [x] a property that lets you pass components as data to other components - [ ] a property that lets you set an array as a property - [ ] a property that lets you pass data to child elements # Which attribute do you use to replace innerHTML in the browser DOM? - [ ] injectHTML - [x] dangerouslySetInnerHTML - [ ] weirdSetInnerHTML - [ ] strangeHTML # Which of these terms commonly describe React applications? - [x] declarative - [ ] integrated - [ ] closed - [ ] imperative # When using webpack, why would you need to use a loader? - [ ] to put together physical file folders - [x] to preprocess files - [ ] to load external data - [ ] to load the website into everyone's phone # A representation of a user interface that is kept in memory and is synced with the "real" DOM is called what? - [x] virtual DOM - [ ] DOM - [ ] virtual elements - [ ] shadow DOM # You have written the following code but nothing is rendering. How do you fix this problem? ```javascript const Heading = () => {Hello!
; }; ``` - [ ] Add a render function. - [x] Change the curly braces to parentheses or add a return statement before the `h1` tag. - [ ] Move the `h1` to another component. - [ ] Surround the `h1` in a `div`. # To create a constant in JavaScript, which keyword do you use? - [x] const - [ ] let - [ ] constant - [ ] var # What do you call a React component that catches JavaScript errors anywhere in the child component tree? - [ ] error bosses - [ ] error catchers - [ ] error helpers - [x] error boundaries # In which lifecycle method do you make requests for data in a class component? - [ ] constructor - [x] componentDidMount - [ ] componentWillReceiveProps - [ ] componentWillMount # React components are composed to create a user interface. How are components composed? - [ ] by putting them in the same file - [x] by nesting components - [ ] with webpack - [ ] with code splitting # All React components must act like **\_** with respect to their props. - [ ] monads - [x] pure functions - [ ] recursive functions - [ ] higher-order functions # What is `[e.target.id]` called in the following code snippet? ```javascript handleChange(e) { this.setState({ [e.target.id]: e.target.value }) } ``` - [ ] a computed property name - [ ] a set value - [x] a dynamic key - [ ] a JSX code string # What is the name of this component? ```javascript class Clock extends React.Component { render() { returnLook at the time: {time}
; } } ``` - [x] Clock - [ ] It does not have a name prop. - [ ] React.Component - [ ] Component # What is sent to an `Array.map()` function? - [x] a callback function that is called once for each element in the array - [ ] the name of another array to iterate over - [ ] the number of times you want to call the function - [ ] a string describing what the function should do # Why is it a good idea to pass a function to `setState` instead of an object? - [ ] It provides better encapsulation. - [ ] It makes sure that the object is not mutated. - [ ] It automatically updates a component. - [x] `setState` is asynchronous and might result in out of sync values. **Explanation:** Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state. Read [this article](https://medium.com/@wisecobbler/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1) # What package contains the render() function that renders a React element tree to the DOM? - [ ] `React` - [x] `ReactDOM` - [ ] `Render` - [ ] `DOM` # How do you set a default value for an uncontrolled form field? - [ ] Use the `value` property. - [x] Use the `defaultValue` property. - [ ] Use the `default` property. - [ ] It assigns one automatically. # What do you need to change about this code to get it to run? ```js class clock extends React.Component { render() { returnLook at the time: {this.props.time}
; } } ``` - [ ] Add quotes around the return value - [ ] Remove `this` - [ ] Remove the render method - [x] Capitalize `clock` **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) # Which Hook could be used to update the document's title? - [x] `useEffect(function updateTitle() { document.title = name + ' ' + lastname; });` - [ ] `useEffect(() => { title = name + ' ' + lastname; });` - [ ] `useEffect(function updateTitle() { name + ' ' + lastname; });` - [ ] `useEffect(function updateTitle() { title = name + ' ' + lastname; });` # What can you use to wrap Component imports in order to load them lazily? - [ ] `React.fallback` - [ ] `React.split` - [x] `React.lazy` - [ ] `React.memo` # How do you invoke setDone only when component mounts, using hooks? ```javascript function MyComponent(props) { const [done, setDone] = useState(false); returnDone: {done}
; } ``` - [ ] `useEffect(() => { setDone(true); });` - [x] `useEffect(() => { setDone(true); }, []);` - [ ] `useEffect(() => { setDone(true); }, [setDone]);` - [ ] `useEffect(() => { setDone(true); }, [done, setDone]);` # Currently, `handleClick` is being called instead of passed as a reference. How do you fix this? ```javascript ``` - [ ] `` - [ ] `` - [x] `` - [ ] `` # Which answer best describes a function component? - [ ] A function component is the same as a class component. - [x] A function component accepts a single props object and returns a React element. - [ ] A function component is the only way to create a component. - [ ] A function component is required to create a React component. # Which library does the `fetch()` function come from? - [ ] FetchJS - [ ] ReactDOM - [x] No library. `fetch()` is supported by most browsers. - [ ] React # What will happen when this useEffect Hook is executed, assuming name is not already equal to John? ```javascript useEffect(() => { setName('John'); }, [name]); ``` - [ ] It will cause an error immediately. - [ ] It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable. - [x] It will update the value of name once and not run again until name is changed from the outside. - [ ] It will cause an infinite loop. # Which choice will not cause a React component to rerender? - [ ] if the component calls `this.setState(...)` - [ ] the value of one of the component's props changes - [ ] if the component calls `this.forceUpdate()` - [x] one of the component's siblings rerenders # You have created a new method in a class component called handleClick, but it is not working. Which code is missing? ```javascript class Button extends React.Component{ constructor(props) { super(props); // Missing line } handleClick() {...} } ``` - [ ] `this.handleClick.bind(this);` - [ ] `props.bind(handleClick);` - [ ] `this.handleClick.bind();` - [x] `this.handleClick = this.handleClick.bind(this);` # React does not render two sibling elements unless they are wrapped in a fragment. Below is one way to render a fragment. What is the shorthand for this? ```javascriptOur Staff
Our staff is available 9-5 to answer your questions
Our Staff
Our staff is available 9-5 to answer your questions
``` - [ ] B ```javascriptOur Staff
Our staff is available 9-5 to answer your questions
``` - [x] C ```javascript <>Our Staff
Our staff is available 9-5 to answer your questions
``` - [ ] D ```javascriptOur Staff
Our staff is available 9-5 to answer your questions
{}
; } } ``` - [x] this.state.count - [ ] count - [ ] state - [ ] state.count # Per the following code, when is the Hello component displayed? ```javascript const greeting = isLoggedIn ?Hi
; ``` - [ ] `const element =Hi
;` - [x] `const element =Hi
;` - [ ] `const element =Hi
;` - [ ] `const element =Hi
;` # Which function is used to update state variables in a React class component? - [ ] `replaceState` - [ ] `refreshState` - [ ] `updateState` - [x] `setState` # Consider the following component. What is the default color for the star? ```javascript const Star = ({ selected = false }) =>Hello {name}!
; ``` - [ ] A ```javascript class Greeting extends React.Component { constructor() { returnHello {this.props.name}!
; } } ``` - [ ] B ```javascript class Greeting extends React.Component {Hello {this.props.name}!
; } ``` - [x] C ```javascript class Greeting extends React.Component { render() { returnHello {this.props.name}!
; } } ``` - [ ] D ```javascript class Greeting extends React.Component { render({ name }) { returnHello {name}!
; } } ``` # Give the code below, what does the second argument that is sent to the render function describe? ```javascript ReactDOM.render(Hi,
document.getElementById('root')
)
```
- [x] where the React element should be added to the DOM
- [ ] where to call the function
- [ ] where the root component is
- [ ] where to create a new JavaScript file
# Why should you use React Router's Link component instead of a basic `` tag in React?
- [ ] The link component allows the user to use the browser's `Back` button.
- [ ] There is no difference--the `Link` component is just another name for the `` tag.
- [ ] The `` tag will cause an error when used in React.
- [x] The `` tag triggers a full page reload, while the `Link` component does not.
# What is the first argument, `x`, that is sent to the `createElement` function?
```javascript
React.createElement(x, y, z);
```
- [x] the element that should be created
- [ ] the order in which this element should be placed on the page
- [ ] the properties of the element
- [ ] data that should be displayed in the element
# Which class-based lifecycle method would be called at the same time as this effect Hook?
```javascript
useEffect(() => {
// do things
}, []);
```
- [ ] componentWillUnmount
- [x] componentDidMount
- [ ] render
- [ ] componentDidUpdate
# What is the name of this component?
```javascript
class Comp extends React.Component {
render() {
return Look at the time: {time}
;
}
}
```
- [x] Comp
- [ ] h1
- [ ] React.Component
- [ ] Component
This question might be an updated version of Q37.
# When using a portal, what is the first argument?
```javascript
ReactDOM.createPortal(x, y);
```
- [ ] the current state
- [x] the element to render
- [ ] the App component
- [ ] the page
**Explanation:**
From official docs: [Portals](https://reactjs.org/docs/portals.html)
# What is `setCount`?
```javascript
const [count, setCount] = useState(0);
```
- [ ] the initial state value
- [ ] a variable
- [ ] a state object
- [x] a function to update the state
**Reference:**
From official docs: [Hooks-State](https://reactjs.org/docs/hooks-state.html#:~:text=If%20we%20want%20to%20update%20the%20current)
# What is the use of map function below?
```javascript
const database = [user1:{},user2:{},user3:{}];
database.map((user)=>user.data
);
```
- [ ] gives a map of all the entries in database
- [x] returns a heading tag for every entry in the database containing it's data
- [ ] returns one heading tag for all the entries in database
- [ ] checks which entry in the database is suitable for heading tag
# Describe what is happening in this code?
```javascript
const { name: firstName } = person;
```
- [ ] It is creating a new object that contains the same name property as the person object.
- [ ] It is assigning the value of the person object's firstName property to a constant called name.
- [ ] It is retrieving the value of person.name.firstName.
- [x] It is assigning the value of the person object's name property to a constant called firstName.
# What is wrong with this code?
```javascript
const MyComponent = ({ names }) => (
Hello
Hello again
);
```
- [ ] React components cannot be defined using functions.
- [x] React does not allow components to return more than one element.
- [ ] The component needs to use the return keyword.
- [ ] String literals must be surrounded by quotes.
# When using a portal, what is the second argument?
```javascript
ReactDOM.createPortal(x, y);
```
- [ ] the App component
- [ ] the page
- [ ] the current state
- [x] the DOM element that exists outside of the parent component
# Given this code, what will be printed in the `` tag?
```javascript
const MyComponent = ({ children }) => (
{children.length}
);
...
Hello
Goodbye
```
- [ ] It will produce an error saying "cannot read property "length" of undefined."
- [ ] 1
- [ ] undefined
- [x] 2
# What is this pattern called?
```javascript
const [count, setCount] = useState(0);
```
- [ ] object destructuring
- [x] array destructuring
- [ ] spread operating
- [ ] code pushing
# What is the first file loaded by the browser in a basic React project?
- [ ] src/App.js
- [ ] src/index.js
- [ ] public/manifest.json
- [x] public/index.html
# The code below is rendering nothing, and there is an error that says "ReactDOM is not defined." How do you fix this issue?
```javascript
import React from 'react';
import { render } from 'react-dom';
const element = Hi
;
ReactDOM.render(element, document.getElementById('root'));
```
- [x] `render(element, document.getElementById("root"));`
- [ ] `ReactDOM(element, document.getElementById("root"));`
- [ ] `renderDOM(element, document.getElementById("root"));`
- [ ] `DOM(element, document.getElementById("root"));`
# In this component, how do you display whether the user was logged in or not?
```javascript
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
The user is:
);
}
```
- [ ] `The user is loggedIn ? logged in : not logged in.`
- [ ] Write a function to check the login status.
- [ ] `The user is {isLoggedIn = "no"}.`
- [x] `The user is {isLoggedIn ? "logged in." : "not logged in"}.`
# You are rendering a list with React when this warning appears in the console: "Warning: Each child in a list should have a unique 'key' prop." How do you fix this issue?
- [ ] Pass the name of each item as its key.
- [ ] Add a key prop with the same value to each item the list.
- [ ] Clear the console warnings.
- [x] When iterating over the list items, add a unique property to each list item.
# How would you generate the boilerplate code for a new app that you are building to collect underpants?
- [ ] npm create-react-app collect-underpants
- [ ] npx start-app collect-underpants
- [ ] react new collect-underpants
- [x] npx create-react-app collect-underpants
[Source: React Docs](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
# Add the code that will fire the photon torpedoes when the button is clicked.
```javascript
class StarTrekkin extends React.Component {
firePhotonTorpedoes(e) {
console.log('pew pew');
}
render() {
return; // Missing code
}
}
```
- [ ] ``
- [ ] ``
- [ ] ``
- [x] ``
[Source: React Docs](https://reactjs.org/docs/handling-events.html)
# What is the process of deciding whether an update is necessary?
- [ ] shadow DOM
- [ ] fiber
- [x] reconciliation
- [ ] setting state
# React is an open-source project but is maintained by which company?
- [ ] Intuit
- [ ] Twitter
- [x] Facebook
- [ ] Snapchat
# What command can you use to generate a React project?
- [ ] react-starter
- [x] create-react-app
- [ ] react-gen
- [ ] react-start
# What is the browser extension called that React developers use to debug applications?
- [x] React Developer Tools
- [ ] React Tooling Add-on
- [ ] React Codewatch
- [ ] React Debug
# Which tool is not part of Create React App?
- [ ] React
- [x] jQuery
- [ ] webpack
- [ ] ReactDOM
# What is the JavaScript syntax extension that is commonly used to create React elements?
- [ ] HTML
- [ ] JavaScriptX
- [x] JSX
- [ ] React JavaScript
# How might you check property types without using Flow or TypeScript?
- [ ] Check Manually.
- [ ] Use `prop-helper`.
- [x] use `prop-types`.
- [ ] user `checker-types`.
# How do you add an id of heading to the following h1 element?
`let dish = Mac and Cheese
; `
- [ ] `let dish = Mac and Cheese
;`
- [x] `let dish = Mac and Cheese
;`
- [ ] `let dish = Mac and Cheese
;`
- [ ] `let dish = Mac and Cheese
;`
# 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 = "kitten";
let button = // Missing code
return button;
}
}
```
- [ ] `;`
- [ ] `;`
- [ ] `;`
- [x] `;`
**Explanation:**
This question test knowledge of react class components. You need to use `this` in order to call methods declared inside class components.
# What syntax do you use to create a component in React?
- [ ] a generator
- [x] a function or a class
- [ ] a service worker
- [ ] a tag
`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)
# You want to disable a button so that it does not emit any events onClick. Which prop do you use to acomplish this?
- [ ] onBlur
- [ ] onPress
- [ ] defaultValue
- [x] disabled
# In this function, which is the best way to describe the Dish component?
```
function Dish() {
return (
<>
Look at the time: {time}
; } } ``` - [x] Comp - [ ] h1 - [ ] React.Component - [ ] Component This question might be an updated version of Q37. # When using a portal, what is the first argument? ```javascript ReactDOM.createPortal(x, y); ``` - [ ] the current state - [x] the element to render - [ ] the App component - [ ] the page **Explanation:** From official docs: [Portals](https://reactjs.org/docs/portals.html) # What is `setCount`? ```javascript const [count, setCount] = useState(0); ``` - [ ] the initial state value - [ ] a variable - [ ] a state object - [x] a function to update the state **Reference:** From official docs: [Hooks-State](https://reactjs.org/docs/hooks-state.html#:~:text=If%20we%20want%20to%20update%20the%20current) # What is the use of map function below? ```javascript const database = [user1:{},user2:{},user3:{}]; database.map((user)=>user.data
); ``` - [ ] gives a map of all the entries in database - [x] returns a heading tag for every entry in the database containing it's data - [ ] returns one heading tag for all the entries in database - [ ] checks which entry in the database is suitable for heading tag # Describe what is happening in this code? ```javascript const { name: firstName } = person; ``` - [ ] It is creating a new object that contains the same name property as the person object. - [ ] It is assigning the value of the person object's firstName property to a constant called name. - [ ] It is retrieving the value of person.name.firstName. - [x] It is assigning the value of the person object's name property to a constant called firstName. # What is wrong with this code? ```javascript const MyComponent = ({ names }) => (Hello
Hello again
); ``` - [ ] React components cannot be defined using functions. - [x] React does not allow components to return more than one element. - [ ] The component needs to use the return keyword. - [ ] String literals must be surrounded by quotes. # When using a portal, what is the second argument? ```javascript ReactDOM.createPortal(x, y); ``` - [ ] the App component - [ ] the page - [ ] the current state - [x] the DOM element that exists outside of the parent component # Given this code, what will be printed in the `` tag?
```javascript
const MyComponent = ({ children }) => (
{children.length}
);
...
Hello
Goodbye
```
- [ ] It will produce an error saying "cannot read property "length" of undefined."
- [ ] 1
- [ ] undefined
- [x] 2
# What is this pattern called?
```javascript
const [count, setCount] = useState(0);
```
- [ ] object destructuring
- [x] array destructuring
- [ ] spread operating
- [ ] code pushing
# What is the first file loaded by the browser in a basic React project?
- [ ] src/App.js
- [ ] src/index.js
- [ ] public/manifest.json
- [x] public/index.html
# The code below is rendering nothing, and there is an error that says "ReactDOM is not defined." How do you fix this issue?
```javascript
import React from 'react';
import { render } from 'react-dom';
const element = Hi
;
ReactDOM.render(element, document.getElementById('root'));
```
- [x] `render(element, document.getElementById("root"));`
- [ ] `ReactDOM(element, document.getElementById("root"));`
- [ ] `renderDOM(element, document.getElementById("root"));`
- [ ] `DOM(element, document.getElementById("root"));`
# In this component, how do you display whether the user was logged in or not?
```javascript
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
The user is:
);
}
```
- [ ] `The user is loggedIn ? logged in : not logged in.`
- [ ] Write a function to check the login status.
- [ ] `The user is {isLoggedIn = "no"}.`
- [x] `The user is {isLoggedIn ? "logged in." : "not logged in"}.`
# You are rendering a list with React when this warning appears in the console: "Warning: Each child in a list should have a unique 'key' prop." How do you fix this issue?
- [ ] Pass the name of each item as its key.
- [ ] Add a key prop with the same value to each item the list.
- [ ] Clear the console warnings.
- [x] When iterating over the list items, add a unique property to each list item.
# How would you generate the boilerplate code for a new app that you are building to collect underpants?
- [ ] npm create-react-app collect-underpants
- [ ] npx start-app collect-underpants
- [ ] react new collect-underpants
- [x] npx create-react-app collect-underpants
[Source: React Docs](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
# Add the code that will fire the photon torpedoes when the button is clicked.
```javascript
class StarTrekkin extends React.Component {
firePhotonTorpedoes(e) {
console.log('pew pew');
}
render() {
return; // Missing code
}
}
```
- [ ] ``
- [ ] ``
- [ ] ``
- [x] ``
[Source: React Docs](https://reactjs.org/docs/handling-events.html)
# What is the process of deciding whether an update is necessary?
- [ ] shadow DOM
- [ ] fiber
- [x] reconciliation
- [ ] setting state
# React is an open-source project but is maintained by which company?
- [ ] Intuit
- [ ] Twitter
- [x] Facebook
- [ ] Snapchat
# What command can you use to generate a React project?
- [ ] react-starter
- [x] create-react-app
- [ ] react-gen
- [ ] react-start
# What is the browser extension called that React developers use to debug applications?
- [x] React Developer Tools
- [ ] React Tooling Add-on
- [ ] React Codewatch
- [ ] React Debug
# Which tool is not part of Create React App?
- [ ] React
- [x] jQuery
- [ ] webpack
- [ ] ReactDOM
# What is the JavaScript syntax extension that is commonly used to create React elements?
- [ ] HTML
- [ ] JavaScriptX
- [x] JSX
- [ ] React JavaScript
# How might you check property types without using Flow or TypeScript?
- [ ] Check Manually.
- [ ] Use `prop-helper`.
- [x] use `prop-types`.
- [ ] user `checker-types`.
# How do you add an id of heading to the following h1 element?
`let dish = Mac and Cheese
; `
- [ ] `let dish = Mac and Cheese
;`
- [x] `let dish = Mac and Cheese
;`
- [ ] `let dish = Mac and Cheese
;`
- [ ] `let dish = Mac and Cheese
;`
# 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 = "kitten";
let button = // Missing code
return button;
}
}
```
- [ ] `;`
- [ ] `;`
- [ ] `;`
- [x] `;`
**Explanation:**
This question test knowledge of react class components. You need to use `this` in order to call methods declared inside class components.
# What syntax do you use to create a component in React?
- [ ] a generator
- [x] a function or a class
- [ ] a service worker
- [ ] a tag
`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)
# You want to disable a button so that it does not emit any events onClick. Which prop do you use to acomplish this?
- [ ] onBlur
- [ ] onPress
- [ ] defaultValue
- [x] disabled
# In this function, which is the best way to describe the Dish component?
```
function Dish() {
return (
<>
Hello
Goodbye
About Us
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Know More