Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

LFZ - rc0122 > Section 2 > Flashcards

Section 2 Flashcards

1
Q

What is a code block? What are some examples of a code block?

A
  • denoted by curbraces

- if/else, for, do while, while, try, catch, etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does block scope mean?

A
  • inside the code block

- things that happen inside the curbraces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the scope of a variable declared with const or let?

A

block-scope

  • var uses global (the window global object)
  • var is FUNCTION scoped
  • let is not attached to the global object
  • let is BLOCK-SCOPED, not initialized to any value, and not attached to the global object.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the difference between let and const?

A
  • let is mutable, can be reassigned, and doesn’t have to be initialized
  • const is read-only/constant, can’t be reassigned, but can be modified, is not immutable, must have initialization
  • by convention, the constant identifiers are in uppercase.
    const CONSTANT_NAME = value;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why is it possible to .push() a new value into a const variable that points to an Array?

A
  • bc we’re not reassigning a block-scope, we’re just modifying the array held by the const variable
  • const’s values can change/be mutated, but it cannot be reassigned to a dif block-scope value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How should you decide on which type of declaration to use?

A

is the whole variable being reassigned (let), or are just the values inside the variable changing (const)

arrays & objects, always CONST

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the syntax for writing a template literal?

A

backticks: this is a template literal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is “string interpolation”?

A

imbedding variables & expressions in a string and JS automatically replacing them with their values

it looks like ${variable_name} this

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

__code read: ___

const bio = My name is ${firstName} ${lastName} and I am ${age} years old.;

A

there is a template literal string with the substitutions firstName, lastName, and age, being assigned to the const bio

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is destructuring, conceptually?

A
  • a way to assign the properties of an object to individual variables
  • to get values from an object
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the syntax for Object destructuring?

A

let { propertyName: variableName, propertyName: variableName } = sourceObject;

so ‘sourceObject.propertyName’ is now ‘variableName’ for ease of use

Object destructuring assigns the properties of an object to variables with the same names by default.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the syntax for Array destructuring?

A

let [var, for, each, index] = scrArray/srcFunc()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How can you tell the difference between destructuring and creating Object/Array literals?

A

assignment is inverted

creating, on the right
destructuring, on the left

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

code read:

const { title, author, libraryID } = book1;
const { title: eek, author: barba, libraryID: durkle } = book2;

A

the const title, author, libraryID are being destructured from book1

the const title is being aliased with eek … being destructured from boook2

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the syntax for defining an arrow function?

A

parameter list, arrow, codeblock

let funcName = (parameter) => { return expression; };

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

When an arrow function’s body is left without curly braces, what changes in its functionality?

A
  • it will return automatically
  • implicit/implied return = withOUT curbraces
  • explicit return = WITH cubraces
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How is the value of THIS determined within an arrow function?

A
  • from the enclosing lexical scope. so you cannot use a new this in an arrow function, unless you:
  • assign the this to a variable, then use that variable in your arrow function
  • this in an arrow func captures this’s value from the enclosing context instead of creating its own
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is a CLI?

A

command line interface

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is a GUI?

A

graphical user interface

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Give at least one use case for each of the commands listed in this exercise.

A

man – interface to the online reference manuals
cat – concat files & print to standard output, but rly for viewing file contents
_cat filename -quickly see the contents of a file
ls – list directories
pwd – print working directory
echo – display a line of text
touch – change file timestamps, but rly for creating empty files
_touch empty-file.txt -create an epmty file
mkdir – make directories
mv – move (rename) files
rm – remove files/directories
cp – copy files/directories

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are the three virtues of a great programmer?

A
  1. Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don’t have to answer so many questions about it.
  2. Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don’t just react to your needs, but actually anticipate them. Or at least pretend to.
  3. Hubris: The quality that makes you write (and maintain) programs that other people won’t want to say bad things about.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is Node.js?

A
  • a js environment outside of a browser
  • can be used to build a server
    a program that allows JavaScript to be run outside of a web browser, especially for talking/building to backend/servers/etc as a foundation for a web application
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What can Node.js be used for?

A

building servers or backends for web applications

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is a REPL?

A

Read–eval–print loop
A read–eval–print loop (REPL), also termed an interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the process object in a Node.js program?

A
  • a global variable that gives info about the current node.js process

The process object is a global that provides information about, and control over, the current Node.js process.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

How do you access the process object in a Node.js program?

A
  • same way you would any object ?
  • through node in the terminal
  • through node in the terminal executing js file with a console.log of the object/properties
As a global, it is always available to Node.js applications without using require().
It can also be explicitly accessed using require():
const process = require('process');
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What is the data type of process.argv in Node.js?

A
  • an array of strings
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is a JavaScript module?

A
  • a single .js file, full of code that interacts with other modules full of code to create a cohesive application
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What values are passed into a Node.js module’s local scope?

A
  • exports
  • require
  • module
  • __filename
  • __dirname
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Give two examples of truly global variables in a Node.js program.

A
  • console
  • setinterval
  • settimeout
  • process
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What is the purpose of module.exports in a Node.js module?

A
  • insures that the code in the module is able to be seen & accessed (connected to) by other modules in the application
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

How do you import functionality into a Node.js module from another Node.js module?

A
  • with require()
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What is the JavaScript Event Loop?

A
  • js’s logical ordering of what it’s supposed to do

- a continual loop of checking the call stack and executing functions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is different between “blocking” and “non-blocking” with respect to how code is executed?

A
  • whether or not a process impedes other processes
  • non-blocking will offset that stuff to do other things until it’s the slow thing is ready
  • blocking would allow the slow thing to impede otehr things
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

The Event Loop is one of the four major concepts that sets JavaScript apart from many other languages.

A
  • Prototypal Inheritance
  • how this works
  • closures
  • the event loop
    Understanding how asynchronous programming works is absolutely critical to modern Web development and especially programming in JavaScript.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What is a directory?

A

a folder that holds files/a repository

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What is a relative file path?

A

relative to where you are locally

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What is an absolute file path?

A

the full path on the system, relative to root

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What module does Node.js include for manipulating the file system?

A

fs (file system)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

What method is available in the Node.js fs module for writing data to a file?

A

.writeFile() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Are file operations using the fs module synchronous or asynchronous?

A

asynchronous

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What is a client?

A
  • a requester of a service or resource provided by a server
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

What is a server?

A
  • a provider of a service or resource
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

What is on the first line of an HTTP request message?

A
  • an HTTP method; GET, PUT, POST, etc
  • the request target; URL or absolute path, port etc
  • the HTTP version

A start-line describing the requests to be implemented. This start-line is always a single line.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

What is on the first line of an HTTP response message?

A
  • the protocol version, usually HTTP/1.1
  • a status code indicating success/failure; 404, 200 etc
  • a status text, brief info for the humans

A status-line describing whether successful or a failure. This start-line is always a single line.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

What are HTTP headers?

A

optional specification info

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Is a body required for a valid HTTP message?

A

nope. optional

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What is NPM?

A
  • Node Package Manager
  • a way to re-use code from other devs, or share your code for use
  • consists of:
    • website, use to discover packages, set up profiles, and manage other aspects of your npm experience.
    • CLI, runs from a terminal, and is how most developers interact with npm.
    • registry, a large public database of JavaScript software and the meta-information surrounding it.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

What is a package?

A
  • bits of reusable code, also called modules

- a directory with files that also has package.json

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

How can you create a package.json with npm?

A
  • make sure you’re in the correct directory, then:

- npm init –yes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What is a dependency and how to you add one to a package?

A
  • a connection to a library of code your program will access/use
  • npm install ‘package-name’
  • npm uninstall ‘package-name’
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

What happens when you add a dependency to a package with npm?

A
  • it’s installed into the node-modules folder in the directory where it’s created
  • it’s added to the dependencies object
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

How do you add express to your package dependencies?

A
  • be in the correct directory
  • npm init –yes to make a new package.json to hold it
  • npm install express
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

What Express application method starts the server and binds it to a network PORT?

A
  • listen() method
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

How do you mount a middleware with an Express application?

A
  • app.use()
const express = require('express');
const app = express();
app.use((req, res) => {
  // eslint-disable-next-line no-console
  console.log('req.method: ', req.method);
  res.send('a string');
});
57
Q

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A
  • Request, req
  • Response, res
  • next()
58
Q

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A
  • application/json
59
Q

What is the significance of an HTTP request’s method?

A
  • gives a way to indicate our intention between client/server
  • the methods only do the thing they say if WE BUILD THEM to do those things
60
Q

What does the express.json() middleware do and when would you need it?

A
  • it will allow app to parse JSON request bodies

- you need it when you’re expecting incoming POST requests

61
Q

What is PostgreSQL and what are some alternative relational databases?

A
  • Postgre is a standalone, isolated application we interact with through an API
  • Structured Query Language
  • a relational database management system (RDBMS)
  • spreadsheeeeeets
    _PostgreSQL is a powerful, free, open source Relational Database Management System
    _MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation, Amazon has one…
62
Q

What are some advantages of learning a relational database?

A
  • RDBs are stronk pwrful
  • very common, widely used for just about everything where stored data is relational (inter-related data)
  • many kinds of SQL db used, knowing SQL gives you access to them all

_A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. This means that developers can set up their database to reject “bad” data and not worry about data being “half written”.

63
Q

What is one way to see if PostgreSQL is running?

A

sudo service postgresql status

64
Q

What is a database schema?

A
  • a collection of tables that defines how the db should be organized

_In relational databases, you typically have to define your schema up front and the database server will make sure that any data being written to the database conforms to that schema.

65
Q

What is a table?

A
  • a list of rows each having the same set of attributes
    [1 x A|B|C|D|E]
    [2 x A|B|C|D|E]
    …etc
66
Q

What is a row?

A
  • an item in a db/entry in the table which has values in the columns
67
Q

What is SQL and how is it different from languages like JavaScript?

A
  • Structured Query Language is the primary way of interacting with relational databases
  • a relational database management system (RDBMS)
  • spreadsheeeeeets
  • JS is an IMPERATIVE high lvl OOP language for front end design and back end intergration/communication (you tell it explicitly what to do)
  • SQL is for managing relational databases
  • SQL is DECLARATIVE (like HTML & CSS, you tell it what you want and it tries to produce that)

_Relational databases interpret SQL and then dynamically generate a plan of action to perform the programmer’s commands as efficiently as possible.

68
Q

How do you retrieve specific columns from a database table?

A

select “column01Name”,
“column02Name”
from “tableName”;

69
Q

How do you filter rows based on some specific criteria?

A 
select "colName",
       "colName2",
       "colName3"
  from "tableName"
 where "colName" = 'columnValue'

ex:
select “ISBN”
from “books”
where “coverArt” = ‘blue’;

  • text values (‘blue’) are single quote
  • numbers & booleans don’t need the single quotes, but will work if used
  • in addition to =, can use , !=
  • will be random w/out an “order by” clause
70
Q

What are the benefits of formatting your SQL?

A

everything is better in a nice tidy order

71
Q

What are four comparison operators that can be used in a where clause?

A
  • =, , !=
72
Q

How do you limit the number of rows returned in a result set?

A

select “colName”
from “tableName”
order by “colName” desc
limit 1;

desc changes to descending order instead of ascending, so this -^- bit will return the one most expensive thing/highest value from that possible list

73
Q

How do you retrieve all columns from a database table?

A

select *
from “tableName”;

-the results order will be random, but it will be all columns

74
Q

How do you control the sort order of a result set?

A

select *
from “tableName”
order by “columName”;

-will return all columns in ascending order of specified column’s value

75
Q

How do you add a row to a SQL table?

A

insert into “tableName” (“column1”, “column2”, “column3”)
values (‘value1’, ‘value2’, value 3)
returning *;

_ returning *; will immediately return/display the row you just inserted (can use list instead of *)
_‘productID’ column/value ommited bc tables are often configured to auto-generate identifier attributes to avoid accidental duplicates

76
Q

What is a tuple?

A

a list of values

77
Q

How do you add multiple rows to a SQL table at once?

A

same as a single row, just with a comma making a list of lists

insert into “tableName” (“column1”, “column2”, “column3”)
values (‘value1’, ‘value2’, value 3),
values (‘valueA’, ‘valueB’, value C)
returning *;

78
Q

How do you get back the row being inserted into a table without a separate select statement?

A

returning *; at the bottom of the insert statement

79
Q

How do you update rows in a database table?

A

update “tableName”
set “columnName” = newValue
where “colValue” = value;

update “products”
set “price” = 100
where “productId” = 24;

_can update multiple columns with comma-list like so:

update “products”
set “price” = 200,
“name” = ‘Super ShakeWeight’,
“description” = ‘Makes you ULTRA strong!’
where “productId” = 24;

80
Q

Why is it important to include a where clause in your update statements?

A

so you don’t change ALL the things, just the thing you want to change

81
Q

How do you delete rows from a database table?

A

delete from “tableName”
where “columnName” = value;

delete from “products”
where “productId” = 24
returning *;

_we can also use AND:

If we wanted to delete all “products” in the ‘cleaning’ category that are cheaper than 20, we would:

delete from “products”
where “category” = ‘cleaning’
and “price” < 20

82
Q

How do you accidentally delete all rows from a table?

A

delete from “tableName”;

83
Q

foreign key constraint:

A
  • when you try to delete a thing from a table but it says no bc it’s being referenced in another table
  • failsafe to prevent accidentally breaking tables
84
Q

What is a foreign key?

A

a column + values shared by multiple tables

85
Q

How do you join two SQL tables?

A

select *
from “table01”
join “tables2” using (“sharedColumnName”);

select *
from “products”
join “suppliers” using (“supplierId”);

86
Q

How do you temporarily rename columns or tables in a SQL statement?

A

select the table.columns, use AS to temp rename them

select “table”.”columnNameX” AS “tempName”
“table2”.”columnNameX” as “difTempName”
from “table”
join “table2” using (“sharedColName”);

select “products”.”name” as “product”,
“suppliers”.”name” as “supplier”
from “products”
join “suppliers” using (“supplierId”);

_this will only change their names for the immediate output results

87
Q

What are some examples of aggregate functions?

A

max(), avg(), count(), min(), sum(), every()

ex:

select max("price") as "highestPrice"
  from "products";
select avg("price") as "averagePrice"
  from "products";
select count(*) as "totalProducts"
  from "products";
88
Q

What is the purpose of a group by clause?

A

to apply aggregate functions to selections of rows

ex:

select “category”,
avg(“price”) as “averagePrice”
from “products”
group by “category”;

-will give the avg price for each product category

89
Q

what exactly is a Promise?

A
  • The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
    It’s a a proxy for a value not necessarily known when the promise is created.
    Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.
90
Q

What are the three states a Promise can be in?

A

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

–once either fulfilled or rejected it’s state can no longer change

91
Q

How do you handle the fulfillment of a Promise?

A

then(fulfillmentFunc(), rejectionFunc())

promise. then(console.log, console.error)
promise. the(resolve, reject)

p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
});
92
Q

How do you handle the rejection of a Promise?

A

with second callback in then(), or with catch()

promise. then(console.log).catch(console.error)
p. catch(onRejected);

p.catch(function(reason) {
   // rejection
});
93
Q

What is Array.prototype.filter useful for?

A
  • filter an array and create a new array from what’s gathered

_The filter() method creates a new array with all elements that pass the test implemented by the provided function.

_filter() calls a provided callbackFn function once for each element in an array, and constructs a new array of all the values for which callbackFn returns a value that coerces to true.

94
Q

What is Array.prototype.map useful for?

A
  • apply some logic to every index of an array, and return a new array of the results
  • can duplicate arrays with or without data transformation
  • will always be of equal length

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

95
Q

What is Array.prototype.reduce useful for?

A
  • to create a single value from all values in an array

_The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add.

96
Q

What is “syntactic sugar”?

A

_In computer science, syntactic sugar is 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.

97
Q

What is the typeof an ES6 class?

A

function

98
Q

Describe ES6 class syntax.

A 
class Name {
     optionalConstructor(params) {
        this.paramPropName = param;
  }
  prototypeMethodDefinition() {
     const { paramPropName } = this;
     return `${paramPropName}`;
  }
}
_ex:
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
99
Q

What is “refactoring”?

A
  • ‘improving’ the design of the code

_In computer programming and software design, code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality.

100
Q

What is Webpack?

A
  • compiles/combines JS files into a single file

_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.

101
Q

How do you add a devDependency to a package?

A
  • npm install devDependency –save-dev

–prod-dev is the default

102
Q

What is an NPM script?

A
  • a shortcut to larger scripts
  • any CLI command can be made into a script and executed with it’s shortcut
  • a small bit of js code tucked into an object property in the package.json file
  • you can access it with:
    npm run scriptName
_ex:
{... 
  "scripts": {
    "build": "webpack"
  }
}
npm run build
103
Q

How do you execute Webpack with npm run?

A
  • go into package.json and add a script key/val pair where key = scriptName & value = webpack
  • in cmdr, nmp run scriptName
104
Q

devDependency - tools used indirectly to DEV the code

dependency - tools used directly IN the code

A

webpack & webpack-cli ALWAYS go together

when cloning a new repo always open up package.json and read the scripts to see what scripts & dependencies are there to use

105
Q

How are ES Modules different from CommonJS modules?

A 
const TodoList = require('./todo-list');
module.exports = TodoApp;

vs

import TodoList from ‘./todo-list’;
export default TodoApp;

  • 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.
  • Similar to CommonJS, they have a compact syntax, a preference for single exports and support for cyclic dependencies.
  • Similar to AMD, they have direct support for asynchronous loading and configurable module loading.
106
Q

What kind of modules can Webpack support?

A

CommonJS & ES6 and others

107
Q

What is React?

A
  • a JS library for creating user interfaces

- built with JS, doesn’t do anything you couldn’t do on your own, but it’s pre-built

108
Q

What is a React element?

A
  • a plain object, uses a virtual DOM (which is just a bunch of objects) to update the actual DOM (which is also just a bunch of objects)
const bucket = React.createElement(
  'h1',
  null,
  'Hello, React!'
);
109
Q

How do you mount a React element to the DOM?

A

ReactDOM.render(element, container);

-any size project only ever calls ReactDOM.render ONCE

110
Q

What is Babel?

A
  • a fancy tool for working across dif versions of JS

_Babel is a JavaScript compiler
_Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

111
Q

What is a Plug-in?

A

_a set of software components that adds specific abilities to a larger software application
_a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.

112
Q

What is a Webpack loader?

A
  • they allow you to pre-process files as you import or “load” them
  • you can install loaders for various specific things (CSS, TypeScript, etc) and then assign all files of those types to be processed by a given loader

_Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules

113
Q

How can you make Babel and Webpack work together?

A
  • installing babel-loader devDependency
114
Q

What is JSX?

A
  • a syntax extension for JavaScript which produces React elements

_Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.

115
Q

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

A
  • bc all JSX turns into React.createElement calls, so yeah
116
Q

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

A

devDependencies:

  • babel-loader
  • @babel/core
  • @babel/plugin-transform-react-jsx
  • webpack
  • webpack-cli
117
Q

What is a React component?

A
  • reusable React code that describes a p
  • basically JS function that takes an object (properties) as an argument and returns React elements for the DOM

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

118
Q

How do you define a function component in React?

A 
unction Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div> represents an HTML div tag, but represents a component and requires Welcome to be in scope.</div>

119
Q

How do you mount a component to the DOM?

A 
// React 17 version:
// ReactDOM.render(, document.querySelector('#root'));
  • first you need a DOM element to aim it at, like a div classed as ‘root’
  • make the component
  • select the DOM el with .getElById and use as arg inside ReactDOM.creatRoot, assign result to const root
  • root.render();
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = ;

const root = ReactDOM.createRoot(document.getElementById(‘root’));

root.render(element);

120
Q

What are props in React?

A
  • objects of properties to use

- allows the passing of info

121
Q

How do you pass props to a component?

A
  • k/v pair on the JSX component that resembles an attribute
122
Q

How do you write JavaScript expressions in JSX?

A

wrap em in curbraces {}

123
Q

How do you create “class” component in React?

A

To define a React component class, you need to extend React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.
124
Q

How do you access props in a class component?

A
  • have to use THIS in the JSX

- render() { return { THIS.props.whatever } } }

125
Q

What is the purpose of state in React?

A
  • state allows us to manage changing data in an application
  • STATE is a plain JavaScript object that holds info which influences the render output
    _State is similar to props, but it is private and fully controlled by the component.
    _state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
    _PROPS get passed to the component (similar to function parameters) whereas STATE is managed within the component (similar to variables declared within a function).
  • STATE is asynchronous
  • don’t try to console.log it directly after assigning it bc it won’t be accurate
  • if you want to c.log it, do it at the top of the RENDER(), bc render() is called when state updates
126
Q

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

A
  • put it directly on the element:
  • create it under the constructor in the class
  • bind it to the constructor
    (this. handleClick = this.handleClick.bind(this);
- assign it in the render() return
(
  {this.state.isClicked ? 'ON' : 'OFF'}
 )
;
127
Q

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

A

.map()

128
Q

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

A

IDs or values from data

129
Q

What are controlled components?

A
  • an input element whose value is controlled by the React component that renders it
130
Q

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

A
  • this.handleChange
  • this.handleSubmit

this. handleChange = this.handleChange.bind(this);
this. handleSubmit = this.handleSubmit.bind(this);

131
Q

What does express.static() return?

A

_it directly returns a function, the function handles requests for files or moves on to the next file

132
Q

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

A

_it’s a string and it’s the absolute path to the folder the module is in

_The directory name of the current module. This is the same as the path.dirname() of the __filename.

133
Q

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

A
  • takes file segments and makes a file path

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

Zero-length path segments are ignored. If the joined path string is a zero-length string then ‘.’ will be returned, representing the current working directory.

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// Returns: '/foo/bar/baz/asdf'
134
Q

What does fetch() return?

A
  • a promise which resolves to the Response object representing the response to your request.const
135
Q

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

A

GET

136
Q

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

A
  • in the props of the config object
fetch (url, {
  method: 'GET',
  ...,
  ...
)};
137
Q

When does React call a component’s componentDidMount method?

A
  • immediately after a component is mounted (inserted into the tree).

Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().

138
Q

Name three React.Component lifecycle methods.

A

__the 3 that matter most:
componentDidMount()
componentWillUnmount()
componentDidUpdate()

139
Q

How do you pass data to a child component?

A

props

LFZ - rc0122 (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions