Module 3

Question 1

What is Array.prototype.filter useful for?

Answer 1

It helps create a new array with elements of the array matching specified parameters, which lets you search for specific elements.

Question 2

What is Array.prototype.map useful for?

Answer 2

It is useful for making changes to all elements of an existing array and assigning it to a new array, without actually modifying the original array.

Question 3

What is Array.prototype.reduce useful for?

Answer 3

To combine bunch of data using a defined function into one result

Question 4

What is “syntactic sugar”?

Answer 4

Syntax in a programming language that is designed to be easier to read by humans

Question 5

What is the typeof an ES6 class?

Answer 5

function

Question 6

Describe ES6 class syntax.

Answer 6

Declare class ClassName { constructor( ) { } method( ) { } }

Question 7

What is “refactoring”?

Answer 7

Restructuring code without changing its behavior

Question 8

Does a class need constructor within?

Answer 8

No

Question 9

What is Webpack?

Answer 9

Module bundler, takes files and groups into one file

Question 10

What is an NPM script?

Answer 10

A way to write common commands in a short way rather than typing out the whole thing. Typically stored in package.json, takes a saved command and executes for you.

Question 11

How are ES Modules different from CommonJS modules?

Answer 11

Syntax differences, ESM can use the import and export keywords, are more compact since it is built in.

Question 12

What kind of modules can Webpack support?

Answer 12

ES modules, commonJS modules, nearly every JS module.

Question 13

What is React?

Answer 13

A js library for building user interfaces, it is a javaScript framework for building webpages. Makes setting up a webpage easier than direct dom manipulation.

Question 14

What is a React element?

Answer 14

A dom element created by react

Question 15

How do you mount a React element to the DOM?

Answer 15

You use React.createElement( );

Question 16

What is Babel?

Answer 16

A toolchain that converts ES6 script into backwards compatible JS. Can also convert JSX

Question 17

What is a Plug-in?

Answer 17

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

Question 18

What is a Webpack loader?

Answer 18

A transformation that is applied to source code to transform files from different languages into JS or load inline images as data URLs

Question 19

How can you make Babel and Webpack work together?

Answer 19

Using Babel Loader, it works such that webpack reads the files, passes it through babel to convert, then gets a converted language back to package.

Question 20

What is JSX?

Answer 20

A html-like markup language that can be used with JavaScript and React. But note it is neither HTML nor JavaScript.

Question 21

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

Answer 21

JSX cannot be read by browsers by default, need to be converted. Babel converts JSX to React.createElement(‘tag’, props, ‘textContent’)

Question 22

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

Answer 22

Use babel loader to connect babel to webpack then the plugin @babel/plugin-transform-react-jsx

Question 23

What is a React component?

Answer 23

They split a ui into independent reusable pieces.

Question 24

How do you define a function component in React?

Answer 24

Any javaScript function that takes one argument props and returns a React element

Question 25

How do you mount a component to the DOM?

Answer 25

Use ReactDom.render( component, DomPath )

Question 26

What are props in React?

Answer 26

Arbitrary read-only inputs accepted by a React component. They are how information is passed from outside a component into a component.

Question 27

How do you pass props to a component?

Answer 27

Use the component and assign the key-value pair to the component. Like assigning attributes to html tags. Not actual attribute, don’t call them that.

Question 28

How do you write JavaScript expressions in JSX?

Answer 28

They have to be enclosed in { } braces.

Question 29

How do you create “class” component in React?

Answer 29

Use class CustomComponent extends React.component{ render() { jsx } }. The only thing required is render(), constructor is not necessary.

Question 30

How do you access props in a class component?

Answer 30

this.props.propName because props becomes a property of the class.

Question 31

What is the purpose of state in React?

Answer 31

Allows you to save certain property value changes to change component output.

Question 32

How to you pass an event handler to a React element?

Answer 32

You have to include it as a key-value property pair (or jsx attribute) to its component after defining it as a method in its class

Question 33

What are controlled components?

Answer 33

An input element whose value is controlled by react

Question 34

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

Answer 34

value and onChange.

Question 35

What Array method is commonly used to create a list of React elements?

Answer 35

array.map( )

Question 36

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

Answer 36

Unique id values, if possible. Second best is index number.

Question 37

What does express.static() return?

Answer 37

It returns a function (to be used by app.use( ) )

Question 38

What is the local __dirname variable in a Node.js module?

Answer 38

The current absolute path of the current module.

Question 39

What does the join() method of Node’s path module do?

Answer 39

Joins multiple directory names into one direct path.

Question 40

What does fetch() return?

Answer 40

Returns a promise, this is async so it does not block other JS code. Promise fulfilled = response received that needs to be converted.

Question 41

What is the default request method used by fetch()?

Answer 41

GET

Question 42

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

Answer 42

Use an init object. To use another method example:

fetch(‘link’, { method: ‘POST’ })

Question 43

When does React call a component’s componentDidMount method?

Answer 43

After a component is added to DOM tree. Basically, after the first render method is called.

Question 44

Name three React.Component lifecycle methods.

Answer 44

constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount. Technically setState is also a lifetycle method.

Question 45

How do you pass data to a child component?

Answer 45

As props

Question 46

How do you get the HTTP request header?

Answer 46

with req.get(headerName)

Question 47

what is .next()?

Answer 47

next() is just the third argument passed to the express middleware function and can be named anything, but conventionally named "next" to avoid confusion.