m3-0822

Question 1

What is Array.prototype.filter useful for?

Answer 1

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

useful for getting values from an array that meet the conditions you specify

Question 2

What is Array.prototype.map useful for?

Answer 2

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

useful for manipulating each element of an array in the way specified

Creating a new array containing the transformed elements of another.

Question 3

What is Array.prototype.reduce useful for?

Answer 3

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an array

run through an array and performing the same operation on each element cumulatively

Combining the elements of an array into a single value.

Question 4

What is “syntactic sugar”?

Answer 4

syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express

Question 5

What is the typeof an ES6 class?

Answer 5

function

Question 6

Describe ES6 class syntax.

Answer 6

class keyword, followed by the name of the class
inside the code block, constructor method where you can initialize the properties of an instance and other methods can be added

Question 7

What is “refactoring”?

Answer 7

code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior

Question 8

What is Webpack?

Answer 8

It’s a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.

Webpack is a helpful tool we use during development to write code that is readable to us but usable by browsers.

Question 9

How do you add a devDependency to a package?

Answer 9

npm install –save-dev (name of package)

Question 10

What is an NPM script?

Answer 10

way to bundle shell commands

help us run repetitive tasks, automates tasks

Question 11

How do you execute Webpack with npm run?

Answer 11

add npm script to package.json named “build” that executes “webpack” and then npm run build in the CLI

Question 12

How are ES Modules different from CommonJS modules?

Answer 12

Their syntax is even more compact than CommonJS’s.
Their structure can be statically analyzed (for static checking, optimization, etc.).
Their support for cyclic dependencies is better than CommonJS’s.

Question 13

What kind of modules can Webpack support?

Answer 13

ECMAScript modules. CommonJS modules. AMD modules.

Question 14

What is React?

Answer 14

A JavaScript library for building user interfaces

Question 15

What is a React element?

Answer 15

React Element - It is a simple object that describes a DOM node and its attributes or properties you can say. It is an immutable description object and you can not apply any methods on it.

Question 16

How do you mount a React element to the DOM?

Answer 16

calling the render method of the React root object

Question 17

What is Babel?

Answer 17

Babel is a JavaScript compiler that converts code to older syntax.

Question 18

What is a Plug-in?

Answer 18

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

Question 19

What is a Webpack loader?

Answer 19

transformations that are applied to the source code of a module

Question 20

How can you make Babel and Webpack work together?

Answer 20

using loaders

Question 21

What is JSX?

Answer 21

a syntax extension to JavaScript

Question 22

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

Answer 22

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

Question 23

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

Answer 23

babel-loader

Question 24

What is a React component?

Answer 24

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

independent, reusable pieces of the UI

Question 25

How do you define a function component in React?

Answer 25

write a JavaScript function

Question 26

How do you mount a component to the DOM?

Answer 26

calling the render method of a root object with the component as the argument

Question 27

What are props in React?

Answer 27

object that provides data to the React component

Question 28

How do you pass props to a component?

Answer 28

through JSX attributes

Question 29

How do you write JavaScript expressions in JSX?

Answer 29

{ }

Question 30

How do you create “class” component in React?

Answer 30

To define a React component class, you need to extend React.Component.
The only method you must define in a React.Component subclass is called render().

Question 31

How do you access props in a class component?

Answer 31

through prototypal inheritance from React.Component

JavaScript expressions

Question 32

What is the purpose of state in React?

Answer 32

provide information about the component’s current situation

Question 33

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

Answer 33

inside the opening JSX tag include name of the event in camel case and assign a the callback function from the this object

Question 34

What are controlled components?

Answer 34

React components that render a form and also control what happens in that form on subsequent user input

Question 35

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

Answer 35

value and onChange

Question 36

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

Answer 36

map method

Question 37

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

Answer 37

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Question 38

What does express.static() return?

Answer 38

function

Question 39

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

Answer 39

the absolute path to the directory name of the current module

Question 40

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

Answer 40

The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

Question 41

What does fetch() return?

Answer 41

A Promise that resolves to a Response object.

Question 42

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

Answer 42

GET request

Question 43

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

Answer 43

method => options

Question 44

When does React call a component’s componentDidMount method?

Answer 44

when an instance of a component is being created and inserted into the DOM
(render is called for the first time)

Question 45

Name three React.Component lifecycle methods.

Answer 45

render, constructor, componentDidMount, componentDidUpdate, componentWillUnmount

Question 46

How do you pass data to a child component?

Answer 46

through the props object