Module 3

Question 1

What is Array.prototype.filter useful for?

Answer 1

to filter data from an array and assign it to a new array

loops through the array and checks for truthies and falsies

Question 2

What is Array.prototype.map useful for?

Answer 2

for data transformations
can transform data and create a new array for that
loops through the array and the return value of each iteration is pushed to new array

Question 3

What is “syntactic sugar”?

Answer 3

syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.

Question 4

What is the typeof an ES6 class?

Answer 4

function

Question 5

Describe ES6 class syntax.

Answer 5

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}
Code language: JavaScript (javascript)'

use the class keyword with name and convention to start with uppercase letter and then everything lives inside the class block including your constructor method and any other method definitions

Question 6

What is “refactoring”?

Answer 6

rewriting code to make it more beautiful /readable

not changing any of the functionality

Question 7

What is Array.prototype.reduce useful for?

Answer 7

takes an array and reduces it down to a single value

taking values of an array and turning it into an object

Question 8

What is Webpack?

Answer 8

Webpack is a free and open-source module bundler for JavaScript
lets us write modules and supports any module formats because it helps us to bundle many js files into 1 js file

Question 9

How do you add a devDependency to a package?

Answer 9

npm install some-package –save-dev (can also put the package name at the end)

npm i -D some-package (= shortcut)
i short for install, D short for save dev

Question 10

What is an NPM script?

Answer 10

The “scripts” property of your package.json file that can be executed by running npm run-script or npm run for short.

Question 11

How do you execute Webpack with npm run?

Answer 11

ensuring to include “build”: “webpack” in your NPM script

execute whatever script executes webpack

Question 12

How are ES Modules different from CommonJS modules?

Answer 12

SYNTAX is easier to read with import/exporting
(import statements vs require statements)
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.

CommonJS is built in node js and designed for synchronous loading

Question 13

What kind of modules can Webpack support?

Answer 13

1. ECMAScript modules
2. CommonJS modules
3. AMD modules

supports BOTH ES modules and CommonJS modules
stick with require statements in node & import statements in front end code

Question 14

What is React?

Answer 14

a JS library for building interfaces

that is declarative and component-based

Question 15

What is a React element?

Answer 15

it’s a symbol?
Symbol(react.element)
they are immutable

Question 16

How do you mount a React element to the DOM?

Answer 16

create a root by using ReactDOM.createRoot(container) & assigning that value to a root variable
and then root.render(element)

Question 17

What is Babel?

Answer 17

a solution for allowing browsers to use complex / modern JS that is not fully supported across various browsers (JSX, typescript)

its a JS compiler built on a plug in system that parses JS syntax into an abstract syntax tree and rewrites it into a version that can be interpreted by your browser

Js compiler that takes ES6 and converts it to ES5

Question 18

What is a Plug-in?

Answer 18

a plug-in is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization

Babels plug-ins are needed to do anything
presets are dynamic bundles based on years
there is a preset for react

Question 19

What is a Webpack loader?

Answer 19

allows you to pre-process your files

Question 20

How can you make Babel and Webpack work together?

Answer 20

….

Question 21

What is a React component?

Answer 21

returns a react element

Question 22

How do you define a function component in React?

Answer 22

like a function that accepts single “props” object argument and it returns a react element

Question 23

How do you mount a component to the DOM?

Answer 23

call the component

Question 24

What is a React component?

Answer 24

describes a reusable piece of the UI

Question 25

How do you define a function component in React?

Answer 25

like a function that accepts single "props" object argument and it returns a react element (JSX) name HAS to start with a capital letter to use it we write it as JSX & they are reusable

Question 26

How do you mount a component to the DOM?

Answer 26

root.render(element) | element = component function return value

Question 27

What are props in React?

Answer 27

parameters in React component functions via attribute like syntax way that we pass data into our components

Question 28

How do you pass props to a component?

Answer 28

define them in the JSX with with key value pairs that looks like an attribute like syntax

Question 29

How do you write JavaScript expressions in JSX?

Answer 29

{ JS expression }

Question 30

How do you create "class" component in React?

Answer 30

``` class Class extends React.component { render ( ) { return } } ``` class extending the component property of React

Question 31

How do you access props in a class component?

Answer 31

this.props

Question 32

What is the purpose of state in React?

Answer 32

so the component renders something different depending on the state allows us to re-render a component with some kind of different outcome

Question 33

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

Answer 33

on the JSX element in curly braces & the callback is a property on the this object add event directly on the element we want it on & pass it a method or a function to be called when that event happens i.e. Click ME!

Question 34

What are controlled components?

Answer 34

technique that allows you to access the form data that user enters into the form via the react this.state forces your user input to override the react this.state so that you can access the data in this.state input controlled by component state

Question 35

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

Answer 35

value and onChange (which is an eventlistener) (and name)

Question 36

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

Answer 36

.map()

Question 37

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

Answer 37

IDs | anything uniquely identifying to each object

Question 38

What does express.static() return?

Answer 38

serveStatic function - a callback function that you can mount in your app.use() in order to access the files in the specified directory function

Question 39

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

Answer 39

The directory name of the current module

Question 40

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

Answer 40

joins path names together

Question 41

What does fetch() return?

Answer 41

a promise | when promise resolves it returns the response object

Question 42

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

Answer 42

``` const myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default', }; ```

Question 43

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

Answer 43

``` const myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default', }; ```

Question 44

When does React call a component's componentDidMount method?

Answer 44

immediately after the component is mounted | after render is called for the first time

Question 45

Name three React.Component lifecycle methods.

Answer 45

render() constructor() setState() ^they are also technically considered lifecycle methods 1. componentDidMount() - gets called right after first render 2. componentDidUpdate() - is given previous state & previous props. If state changes, this will be called once it has already been changed 3. componentWillUnmount() - called right before the component is removed from the DOM

Question 46

How do you pass data to a child component?

Answer 46

pass data via props