Module 3 Flashcards
What is Array.prototype.filter useful for?
It helps create a new array with elements of the array matching specified parameters, which lets you search for specific elements.
What is Array.prototype.map useful for?
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.
What is Array.prototype.reduce useful for?
To combine bunch of data using a defined function into one result
What is “syntactic sugar”?
Syntax in a programming language that is designed to be easier to read by humans
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
Declare class ClassName { constructor( ) { } method( ) { } }
What is “refactoring”?
Restructuring code without changing its behavior
Does a class need constructor within?
No
What is Webpack?
Module bundler, takes files and groups into one file
What is an NPM script?
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.
How are ES Modules different from CommonJS modules?
Syntax differences, ESM can use the import and export keywords, are more compact since it is built in.
What kind of modules can Webpack support?
ES modules, commonJS modules, nearly every JS module.
What is React?
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.
What is a React element?
A dom element created by react
How do you mount a React element to the DOM?
You use React.createElement( );
What is Babel?
A toolchain that converts ES6 script into backwards compatible JS. Can also convert JSX
What is a Plug-in?
A software addon component that adds a specific feature to an existing computer program
What is a Webpack loader?
A transformation that is applied to source code to transform files from different languages into JS or load inline images as data URLs
How can you make Babel and Webpack work together?
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.
What is JSX?
A html-like markup language that can be used with JavaScript and React. But note it is neither HTML nor JavaScript.
Why must the React object be imported when authoring JSX in a module?
JSX cannot be read by browsers by default, need to be converted. Babel converts JSX to React.createElement(‘tag’, props, ‘textContent’)
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader to connect babel to webpack then the plugin @babel/plugin-transform-react-jsx
What is a React component?
They split a ui into independent reusable pieces.
How do you define a function component in React?
Any javaScript function that takes one argument props and returns a React element
How do you mount a component to the DOM?
Use ReactDom.render( component, DomPath )
What are props in React?
Arbitrary read-only inputs accepted by a React component. They are how information is passed from outside a component into a component.
How do you pass props to a component?
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.
How do you write JavaScript expressions in JSX?
They have to be enclosed in { } braces.
How do you create “class” component in React?
Use class CustomComponent extends React.component{ render() { jsx } }. The only thing required is render(), constructor is not necessary.
How do you access props in a class component?
this.props.propName because props becomes a property of the class.
What is the purpose of state in React?
Allows you to save certain property value changes to change component output.
How to you pass an event handler to a React element?
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
What are controlled components?
An input element whose value is controlled by react
What two props must you pass to an input for it to be “controlled”?
value and onChange.
What Array method is commonly used to create a list of React elements?
array.map( )
What is the best value to use as a “key” prop when rendering lists?
Unique id values, if possible. Second best is index number.
What does express.static() return?
It returns a function (to be used by app.use( ) )
What is the local __dirname variable in a Node.js module?
The current absolute path of the current module.
What does the join() method of Node’s path module do?
Joins multiple directory names into one direct path.
What does fetch() return?
Returns a promise, this is async so it does not block other JS code. Promise fulfilled = response received that needs to be converted.
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
Use an init object. To use another method example:
fetch(‘link’, { method: ‘POST’ })
When does React call a component’s componentDidMount method?
After a component is added to DOM tree. Basically, after the first render method is called.
Name three React.Component lifecycle methods.
constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount. Technically setState is also a lifetycle method.
How do you pass data to a child component?
As props
How do you get the HTTP request header?
with req.get(headerName)
what is .next()?
next() is just the third argument passed to the express middleware function and can be named anything, but conventionally named "next" to avoid confusion.
