m3-0822 Flashcards
What is Array.prototype.filter useful for?
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
What is Array.prototype.map useful for?
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.
What is Array.prototype.reduce useful for?
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.
What is “syntactic sugar”?
syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
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
What is “refactoring”?
code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior
What is Webpack?
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.
How do you add a devDependency to a package?
npm install –save-dev (name of package)
What is an NPM script?
way to bundle shell commands
help us run repetitive tasks, automates tasks
How do you execute Webpack with npm run?
add npm script to package.json named “build” that executes “webpack” and then npm run build in the CLI
How are ES Modules different from CommonJS modules?
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.
What kind of modules can Webpack support?
ECMAScript modules. CommonJS modules. AMD modules.
What is React?
A JavaScript library for building user interfaces
What is a React element?
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.
How do you mount a React element to the DOM?
calling the render method of the React root object
What is Babel?
Babel is a JavaScript compiler that converts code to older syntax.
What is a Plug-in?
a software component that adds a specific feature to an existing computer program
What is a Webpack loader?
transformations that are applied to the source code of a module
How can you make Babel and Webpack work together?
using loaders
What is JSX?
a syntax extension to JavaScript
Why must the React object be imported when authoring JSX in a module?
Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
babel-loader
What is a React component?
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
How do you define a function component in React?
write a JavaScript function
How do you mount a component to the DOM?
calling the render method of a root object with the component as the argument
What are props in React?
object that provides data to the React component
How do you pass props to a component?
through JSX attributes
How do you write JavaScript expressions in JSX?
{ }
How do you create “class” component in React?
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().
How do you access props in a class component?
through prototypal inheritance from React.Component
JavaScript expressions
What is the purpose of state in React?
provide information about the component’s current situation
How to you pass an event handler to a React element?
inside the opening JSX tag include name of the event in camel case and assign a the callback function from the this object
What are controlled components?
React components that render a form and also control what happens in that form on subsequent user input
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?
map method
What is the best value to use as a “key” prop when rendering lists?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
What does express.static() return?
function
What is the local __dirname variable in a Node.js module?
the absolute path to the directory name of the current module
What does the join() method of Node’s path module do?
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
What does fetch() return?
A Promise that resolves to a Response object.
What is the default request method used by fetch()?
GET request
How do you specify the request method (GET, POST, etc.) when calling fetch?
method => options
When does React call a component’s componentDidMount method?
when an instance of a component is being created and inserted into the DOM
(render is called for the first time)
Name three React.Component lifecycle methods.
render, constructor, componentDidMount, componentDidUpdate, componentWillUnmount
How do you pass data to a child component?
through the props object
