ES6/JSX/REACT Flashcards
What is a code block? What are some examples of a code block?
a lexical structure of source code which is grouped together. if, else, while, for loop, do while
What does block scope mean?
within the curly braces, the only place this thing would exist
What is the scope of a variable declared with const or let?
block scoped
What is the difference between let and const?
let can be reassgined and const can not
Why is it possible to .push() a new value into a const variable that points to an Array?
if the const object is an object or array its properties or items can be updated or removed but not reassigned
How should you decide on which type of declaration to use?
every thing should be a const, until you have a variable that will be reassigned.
What is the syntax for writing a template literal?
wrap your text in backticks and for substitution we use ${}
What is “string interpolation”?
when you substitute part of the string for the values of variables or expressions.
What is destructuring, conceptually?
Its something that allows us to access properties inside of an object or indexes inside an array, and then store that information into a new variable
What is the syntax for Object destructuring?
const{ property1: variable1} = object;
What is the syntax for Array destructuring?
const foo = [“one”, “two”, “three”];
const [red, yellow, green] = foo;
console.log(red); // “one”
console.log(yellow); // “two”
console.log(green); // “three”
How can you tell the difference between destructuring and creating Object/Array literals?
The difference is if the curly braces is on the left side, it is object/array destructuring and if its on the right side, we’re creating a new object.
What is the syntax for defining an arrow function?
const add = (x, y) => { return x + y; };
const sample = x => {}
const sample = ()=>2+2
When an arrow function’s body is left without curly braces, what changes in its functionality?
implicit “return”. The braces can only be omitted if the function directly returns an expression.
const add = (x, y) => { x + y; };
Nao ia dar certo pq com o {}, nao tem mais o implicit return
How is the value of this determined within an arrow function?
its going to be based on lexical this.
an arrow function captures the this value of the enclosing context instead of creating its own this context.
What are the three states a Promise can be in?
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
promise1.then((value) => {
console.log(value);
});
What is Array.prototype.filter useful for?
To return a new array with all the elements that pass the test implemented by the callback() function.
What is Array.prototype.map useful for?
Array.map() method allows you to iterate over a new array and modify its elements using a callback function.
For each does the same thing as .map() but the difference is that it does not return a new array
What is Array.prototype.reduce useful for?
The array reduce in JavaScript is a method used to reduce an array to a single value by passing a callback function on each element of the array.
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 Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
let john = new Person(“John Doe”);
let name = john.getName();
console.log(name); // “John Doe”
What is “refactoring”?
code refactoring is the process of restructuring existing code without changing its external behavior.
What is Webpack?
Its a program that allows us to take all of our script files and combine them into one file
How do you add a devDependency to a package?
npm install <package-name> --save-dev</package-name>
What is an NPM script?
It allows us to run different commands. ex: build: webpack
How do you execute Webpack with npm run?
npm run build
How are ES Modules different from CommonJS modules?
With CommonJS, all of the dependencies for a project are stored in one file called node_modules/. With ES modules, each dependency is stored in its files. This allows developers to better control how their dependencies are used and makes it easier to version software. ES6 greater functionality. Require its for entire file, takes more time to load.
Common JS: require method
ES Module: export/import
What kind of modules can Webpack support?
ECMAScript modules
CommonJS modules
AMD modules
Assets
WebAssembly modules
What is React?
A JavaScript library for building user interfaces
What is a React element?
it is an object representation of a virtual DOM node.
How do you mount a React element to the DOM?
create a root (createRoot()) and then use the render method. render-> where we want to append to
What is a Plug-in?
a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization. ex: mp3 file, web video
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module. It allows us to pre process files before you implement them.
Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs.
How can you make Babel and Webpack work together?
install the module under dev dependency and have the webpack.config.js
What is webpack.config.js?
gives us the option of configuring how webpack interacts with other packages that we have installed in the application. ex: babel loader
What is JSX?
it is a syntax extension to JavaScript. It allows you to write HTML elements inside of a JS file. Its not react but react uses it.
Why must the React object be imported when authoring JSX in a module?
The jsx code won’t work if you dont import it because of that react create element method. If we go to the main.js file, on the bottom, we’ll see createElement method with the html elements being created. And we need react because we’re using in the method.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
use the @babel/plugin-transform-react-jsx
What is a React component?
Components are like JavaScript functions that let you split the UI into independent, reusable pieces, and think about each piece in isolation. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
a JavaScript function that accepts a single “props” (which stands for properties) object argument with data and returns a jsx and then we append it to the root.
How do you mount a component to the DOM?
You use render method on the root
What are props in React?
a type of object where the value of the attribute of a tag is stored/
“props” (which stands for properties) object argument with data. ex: <CustomButton text=”I”>
How do you pass props to a component?
pass them as the argument to the function. and we do that as an attribute of the function call.
How do you write JavaScript expressions in JSX?
You can put any valid JavaScript expression inside the curly braces in JSX.
ex: return{ <button>{props.text}</button>}
How do you create “class” component in React?
class className extends React.Component{ render() {return }}. ex class Animal{} class Bird extends Animal{} -> now the class bird will have access to the methods inside the class Animal
How do you access props in a class component?
{this.props.name}
What is super()?
super is calling the constructor from where we’re extending and access all the method and information that is inside the constructor that we are extending from/ super is calling the constructor for the class we’re extending from
What is the purpose of state in React?
The state is a built-in React object that is used to contain data or information about the component and is only available within that component.
How to you pass an event handler to a React element?
eventName = {functionName}. ex: onClick={this.handleClick}
What are controlled components?
A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state. In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state.
What two props must you pass to an input for it to be “controlled”?
A controlled input accepts its current value as a prop, as well as a callback to change that value. ex: value and onChange
What Array method is commonly used to create a list of React elements?
map(). because it returns an array so we can loop through it.
What is the best value to use as a “key” prop when rendering lists?
Most often you would use IDs from your data as keys
What is the best value to use as a “key” prop when rendering lists?
Most often you would use IDs from your data as keys
What does express.static() return?
Returns a path/middleware
The function determines the file to serve by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, it calls next() to move on to the next middleware, allowing for stacking and fall-backs.
What is the local __dirname variable in a Node.js module?
The directory name of the current module
What does the join() method of Node’s path module do?
Combines any number of paths/directories. joines them and normalizes them.
Ex:
const publicPath = path.join(__dirname, ‘public’) -> dirname is relative to the computer I am specifically using. ‘public’ folder is the one to serve from.
What does fetch() return?
a promise which is fulfilled once the response is available.
What is the default request method used by fetch()?
The default method of fetch() is GET. If needed, we can also make a POST, PUT and DELETE method request as well.
How do you specify the request method (GET, POST, etc.) when calling fetch?
put in the second arg, an object
ex: fetch(resource, options) -> options is an object
When does React call a component’s componentDidMount method?
immediately after a component is mounted (inserted into the tree).
Name three React.Component lifecycle methods.
componentDidUpdate() , componentWillUnmount() , and componentDidMount()
How do you pass data to a child component?
Using props
