Module-3

Question 1

What is Array.prototype.filter useful for?

Answer 1

Useful for filtering arrays.

Question 2

What is Array.prototype.map useful for?

Answer 2

Useful for transforming an array.

Question 3

What is Array.prototype.reduce useful for?

Answer 3

Useful for returning a single value from an array.

Question 4

What is “syntactic sugar”?

Answer 4

A version of code that is more readable.

Question 5

What is the typeof an ES6 class?

Answer 5

A function.

Question 6

What is “refactoring”?

Answer 6

Restructuring code to be more efficient and readable but not changing the output.

Question 7

What is a webpack?

Answer 7

Webpack is a tool that bundles JavaScript applications, and supports any module format aside from ESM.

Question 8

How do you add a devDependency to a package?

Answer 8

From the root directory in the command line, you run npm install with the package-name and the “–save-dev” flag

Question 9

What is an npm script?

Answer 9

An npm script bundles commands together, and are typically commands, or a string of commands that would usually be entered in the command line to have an application do something.

Question 10

How do you execute Webpack with npm run?

Answer 10

With npm run script-name.

Question 11

What is Babel?

Answer 11

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into compatible versions of JavaScript.

Question 12

What is a plug-in?

Answer 12

A software component that adds a specific feature to an existing program.

Question 13

What is a webpack loader?

Answer 13

Loaders are transformations that are applied to source code of a module, and provide a way to handle front-end build steps.

Question 14

How can you make Babel and webpack work together?

Answer 14

Install the Babel loader then configure the webpack.js file.

Question 15

What is JSX?

Answer 15

JSX is a React extension to the JavaScript language syntax.

Question 16

Why must the react object be imported when authoring JSX in a module?

Answer 16

To bring the React library in scope with the JSX code.

Question 17

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 17

You can use a Babel loader

Question 18

What is a React component?

Answer 18

React components are JavaScript functions or classes that are reusable pieces of code.

Question 19

How do you define a function component in React?

Answer 19

You start with the keyword function, followed by a function name with a (parameter), opening curly brace, then a return react elements. Ending with a curly brace.

Question 20

How do you mount a component to the DOM?

Answer 20

Create a react root by calling the createRoot method of the ReactDOM object with the react elements and assigning it to a variable. Then the render method of the root object is called with the function as an argument.

Question 21

What are props in React?

Answer 21

Props are objects.

Question 22

How do you pass props to a components?

Answer 22

Props are passed to a component thru a DOM tag name and assigning a value to the prop name, then assigning the return value to an element.

Question 23

How do you write JavaScript expressions in JSX?

Answer 23

JavaScript expressions are wrote in JSX within a functions’ curly braces.

Question 24

What are controlled components?

Answer 24

An input form element whose value is controlled by React.

Question 25

What two props must you pass to an input for it to be “controlled?”

Answer 25

Value and onChange.

Question 26

What array methods is commonly used to create a list of React elements?

Answer 26

The map() method.

Question 27

What is the best value to use as a “key” prop when rendering lists?

Answer 27

A string that identifies the key, or an ID from the data.

Question 28

What is a fetch() return?

Answer 28

A Promise that resolves to a Response object.

Question 29

What is the default request method used by fetch?

Answer 29

A Get request.

Question 30

How do you specify the request method (GET, POST, etc) when calling fetch?

Answer 30

Enter the method into the second row.

Question 31

When does React call a component’s componentDidMount method?

Answer 31

Immediately after a component is mounted/inserted into the tree.

Question 32

Name three React.Component lifecycle methods.

Answer 32

Constructor, render, and componentDidMount.

Question 33

How do you pass data to a child component?

Answer 33

Through props.