HTML Flashcards
Where do you put non-visible content about the HTML document?
head tag
Where do you put visible content about the HTML document?
body tag
Where do the head and body tags go in a valid HTML document?
html tag first
head tag second
body tag last
What is the purpose of a !DOCTYPE declaration?
Informs the web browser about the type and version of HTML used in building the web document.
Give five examples of HTML element tags.
doctype html head body span ul li p a
What is the purpose of HTML attributes?
Modifies the element type
Give an example of an HTML entity (escape character).
© ®
How do block-level elements affect the document flow?
It takes up 100% of the width of the block line, and starts a new line.
How do inline elements affect the document flow?
It takes up only the smallest space that an element needs, continues on the same line.
What are the default width and height of a block-level element?
100% width, height unchangeable
What are the default width and height of an inline element?
Width is determined by the element, height is unchangeable
What is the difference between an ordered list and an unordered list in HTML?
Ordered list has numbers for every li tag, unordered has bullet points, stars, etc.
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
<a>Anchor Tags</a> (Anchor tags)
What is an absolute URL?
URL that directs to an external site.
What is a relative URL?
URL that directs to a specific location inside a folder that is relative to the root you’re in.
How do you indicate the relative link to a parent directory?
the (../)
How do you indicate the relative link to a child directory?
calling the folder name, then the file inside the folder that you want to open
How do you indicate the relative link to a grand parent directory?
using (../../)
How do you indicate the relative link to the same directory?
If it’s in the same directory, you just need to call the name of the file.
What is the purpose of an HTML form element?
Collect information, and sending it back to the developer.
Give five examples of form control elements.
input label select textarea button legend
Give three examples of type attributes for HTML elements.
button checkbox radio text password file hidden submit
Is an HTML element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
table thead tbody td tr tfoot
What purpose do the thead and tbody elements serve?
screen readers
Give two examples of data that would lend itself well to being displayed in a table.
statistics organizing data table
What are the names of the individual pieces of a CSS rule?
CSS Selector, declaration block
In CSS, how do you select elements by their class attribute?
add a (.) before the class name
In CSS, how do you select elements by their type?
Calling the element name by itself
In CSS, how do you select an element by its id attribute?
add a (#) before the name
What CSS properties make up the box model?
Margin Border Padding
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
Name three different types of values you can use to specify colors in CSS.
RGB, Hexcode, Color Names
What is a pseudo-class?
Selector that selects elements that are in a specific state eg hover, active, visited, etc.
What are CSS pseudo-classes useful for?
Add functional styles for the elements
What is the default flex-direction of a flex container?
row (horizontal)
What is the default flex-wrap of a flex container?
no-wrap (makes everything shrink and fit on one line)
Why do two div elements “vertically stack” on one another by default?
because of it having the property of display: block
which takes up the whole width and starts on a new line.
What is the default flex-direction of an element with display: flex?
flex-direction: row (horizontal)
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
relative does not affect the positioning of elements in normal flow unless you add offsets, but does cause those elements to be considered to be positioned.
How does setting position: relative on an element affect where it appears on the page?
any adjustments you do to it is relative to where it is on the page
How does setting position: absolute on an element affect document flow?
moves it from the document flow
How does setting position: absolute on an element affect where it appears on the page?
attaches to any parent without a static element
How do you constrain an absolutely positioned element to a containing block?
make it a non-static property
What are the four box offset properties?
top right bottom left
What is the purpose of variables?
Storing information for a value
How do you declare a variable?
var name
How do you initialize (assign a value to) a variable?
assignment operator (=)
What characters are allowed in variable names?
alphanumerical values $ -
What does it mean to say that variable names are “case sensitive”?
Capitalization and typos matter a lot fullname != fullName
What is the purpose of a string?
Storing text
What is the purpose of a number?
Storing numbers
What is the purpose of a boolean?
Storing true/false values
What does the = operator mean in JavaScript?
Assignment operator
How do you update the value of a variable?
Assign a new value to the same variable
What is the difference between null and undefined?
Null is an empty value, undefined is no value has been assigned
Why is it a good habit to include “labels” when you log values to the browser console?
Makes it easier to reference & debug.
Give five examples of JavaScript primitives.
numbers string boolean undefined null
What data type is returned by an arithmetic operation?
a number
What is string concatenation?
when 2 strings get added together ex: fullName=firstName + lastName;
What purpose(s) does the + plus operator serve in JavaScript?
concatenation, addition
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
sets the variable to whatever the sum is equal to when it is added by a value
What are objects used for?
Containers for named values properties and methods.
What are object properties?
values associated with the object (keys)
Describe object literal notation.
The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array.
How do you remove a property from an object?
delete operator
What are the two ways to get or update the value of a property?
dot notation & bracket notation
What are arrays used for?
lists of values like a grocery list
Describe array literal notation.
square brackets
How are arrays different from “plain” objects?
plain objects can’t contain more than one value
What number represents the first index of an array?
0
What is the length property of an array?
.length measures the length of the array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
a reusable command
Describe the parts of a function definition.
function keyword, the function name, the parameters, opening curly brace for the function code block, return statement, closing curly brace marking the end of code block
Describe the parts of a function call.
function name, the parentheses and parameters inside it, with a semicolon
When comparing them side-by-side, what are the differences between a function call and a function definition?
The function definition specifies the name, parameters and the code block instructions, whereas the function call just passes an argument to the function definition, and gets whatever is returned.
What is the difference between a parameter and an argument?
a parameter is a placeholder for the argument for a function. The argument is the actual data that is going to be used for the function.
Why are function parameters useful?
When a function is called, the parameters in its definition take on the values of the arguments that were passed.
What two effects does a return statement have on the behavior of a function?
return statement returns a value, and exits the function when it is called.
Why do we log things to the console?
debug and check code
What is a method?
a function of an object
How is a method different from any other function?
method exists as a property of an object
How do you remove the last element from an array?
pop method
How do you round a number down to the nearest integer?
round method
How do you generate a random number?
random method
How do you delete an element from an array?
splice [index, delete number]
How do you append an element to an array?
push method
How do you break a string up into an array?
split method
Do string methods change the original string? How would you check if you weren’t sure?
No, use console.log
Roughly how many string methods are there according to the MDN Web docs?
mid 40s (dont have to memorize all)
Is the return value of a function or method useful in every situation?
No, because there are functions that modify things and there are those that return things
Roughly how many array methods are there according to the MDN Web docs?
more than 30, dont have to memorize all
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
< > <= >= == ===
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
checking the expression and make a decision with the result
Is else required in order to use an if statement?
not required
Describe the syntax (structure) of an if statement.
if (condition) code block return else return
What are the three logical operators?
and or not
How do you compare two different expressions in the same condition?
logical or and logical and
What is the purpose of a loop?
to repeat a set of instructions however many times specified.
What is the purpose of a condition expression in a loop?
to check if the loop should keep going
What does “iteration” mean in the context of loops?
how many times the code ran
When does the condition expression of a while loop get evaluated?
before executing the statement
When does the initialization expression of a for loop get evaluated?
before the loop begins
When does the condition expression of a for loop get evaluated?
after the initializer and right after incrementation
When does the final expression of a for loop get evaluated?
right after the loop finishes
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
adds the value by 1 (i+=1)
How do you iterate through the keys of an object?
for in loop
Difference between i++ and ++i?
increments the value before they get substituted
What are the four components of “the Cascade”.
importance, origin, specificity, position
What does the term “source order” mean with respect to CSS?
the further down it goes in the css code, the more “important it is”
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritence
List the three selector types in order of increasing specificity.
type, class, id
Why is using !important considered bad practice?
makes it harder to debug
Why might you want to assign the return value of a DOM query to a variable?
to know the location of the variable in the document, so it’s easier to access them
What console method allows you to inspect the properties of a DOM element object?
dir method
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
you need to load your javascript dom after the document has been processed
What does document.querySelector() take as its argument and what does it return?
accepts css selectors, and returns the elements
What does document.querySelectorAll() take as its argument and what does it return?
it takes css selectors and returns NodeList
Why do we log things to the console?
test and debug your code
What is the purpose of events and event handling?
user input
What do [] square brackets mean in function and method syntax documentation?
it is optional
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener method
What is a callback function?
function that is being used as an argument in another function, and which we do not call
What object is passed into an event listener callback when the event fires?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
its a reference to where the object is being invoked. the debugger. the mdn
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the event listener will call it when there are parantheses are inserted. When parantheses aren’t there, it doesn’t get called automatically.
Is the event parameter of an event listener callback always useful?
not always, but generally it is good practice
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
it’d be harder
Why is storing information about a program in variables better than only storing it in the DOM?
cannot depend on the dom, so storing it on a variable makes it easier to find
What does the transform property do?
it modifies the coordinate space which lets you rotate, scale, skew or translate an element
Give four examples of CSS transform functions.
translate scale rotate skew matrix
What is the className property of element objects?
it lets you modify/replace the className on an existing html file on javascript
How do you update the CSS class attribute of an element using JavaScript?
you put the class location into a variable via getQuery and then use the className property
What is the textContent property of element objects?
it allows you to modify the text content inside an element
How do you update the text within an element using JavaScript?
put the element location inside a variable, then modify it using .textContent
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
HTML elements
What is a DOM Tree?
an illustration of how the DOM reads the document with its elements and children
Give two examples of document methods that retrieve a single element from the DOM.
getQuery getElementByID
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName querySelectorAll
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
prevents it from reloading the page and putting the information on the URL
What does submitting a form without event.preventDefault() do?
it refreshes the page and loads your information into the URL
What property of a form element object contains all of the form’s controls.
getters
What property of form a control object gets and sets its value?
setters
What is one risk of writing a lot of code without checking to see if it works so far?
you won’t know which part of the code is wrong
What is an advantage of having your console open when writing a JavaScript program?
allows you to debug and see if there are any errors
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendChild() method
What do you pass as the arguments to the element.setAttribute() method?
name+value
What steps do you need to take in order to insert a new element into the page?
create element then append child
What is the textContent property of an element object for?
retrieve/set text inside an element
Name two ways to set the class attribute of a DOM element.
classname, classlist, setattribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reusability
Give two examples of media features that you can query in an @media rule.
style, link, source
Which HTML meta tag is used in mobile-responsive web pages?
meta name=”viewport” tag
What is the event.target?
The target event property returns the element that triggered the event.
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What does the element.closest() method take as its argument and what does it return?
The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null . var closestElement = targetElement.closest(selectors);
What is the event.target?
The target event property returns the element that triggered the event.
What is the affect of setting an element to display: none?
makes the content invisible and removes it from the document
What does the element.matches() method take as an argument and what does it return?
string representing the selector to test. returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute() let attribute = element.getAttribute(attributeName);
At what steps of the solution would it be helpful to log things to the console?
Every step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
multiple eventListeners
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
Conditional statements to check each of the tabs
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
because of cascading. If it happens after, it will override
How to you store data in localStorage?
storeItem method
How to you retrieve data from localStorage?
getItem method
What data type can localStorage save in the browser?
string (JSON.stringify)
When does the ‘beforeunload’ event fire on the window object?
before the document gets unloaded
What is a method?
sends objects to invoke behaviors and delegate the implementations to the receiving objects
How can you tell the difference between a method definition and a method call?
with the definition, you are writing the code, with the call, you are calling it and giving the values
Describe method definition syntax (structure).
object variable name, object properties, method
Describe method call syntax (structure).
dot method to call
How is a method different from any other function?
because it is a property inside an object
What is the defining characteristic of Object-Oriented Programming?
because an object can take properties and functions inside an object
What are the four “principles” of Object-Oriented Programming?
encapsulation, abstraction, inheritance, polymorphism
What is “abstraction”?
working with something complex and simplifying it
What does API stand for?
application programming interface
What is the purpose of an API?
an API delivers a user response to a system and sends the system’s response back to a user.
What is this in JavaScript?
a keyword that contains a value that is defined at call time
What does it mean to say that this is an “implicit parameter”?
not explicitly written in a function, but it is always accessible
When is the value of this determined in a function; call time or definition time?
call time
What does this refer to in the following code snippet? var character = { firstName: 'Mario', greet: function () { var message = 'It\'s-a-me, ' + this.firstName + '!'; console.log(message); } };
the object character
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
it would return “It’s -a-me, Mario!”
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
it would be undefined, because hello is not connected to an object, whereas character.greet() has character as the object
How can you tell what the value of this will be for a particular function or method definition?
the value of this would be the object in which this was created.
How can you tell what the value of this is for a particular function or method call?
it would refer to whatever object calls the function
What kind of inheritance does the JavaScript programming language use?
prototypes
What is a prototype in JavaScript?
an object that has functionality inside it that other objects can use separately.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
using a function that prototypes for the objects
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype chain
What does the new operator do?
creates a new blank object and links the constructor to the other object to its parent prototype and sets the this, and returns this if the function doesn’t return an object.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
What does the instanceof operator do?
checks to see if the prototype chain exists in an object
What is a “callback” function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeOut method
How can you set up a function to be called repeatedly without using a loop?
setInterval function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
the default would be 0, it would get sent immediately
What do setTimeout() and setInterval() return?
it returns the timer ID
What is a client?
someone that requests a service from a server
What is a server?
answers requests from a client
Which HTTP method does a browser issue to a web server when you visit a URL?
get method
What three things are on the start-line of an HTTP request message?
verb like get put post and a noun like head or options
What three things are on the start-line of an HTTP response message?
protocol version status code and status text
What are HTTP headers?
information related to the request
Where would you go if you wanted to learn more about a specific HTTP Header?
mdn
Is a body required for a valid HTTP request or response message?
they are optional
What is AJAX?
Ajax allows you to update certain parts of a page without needing to reload the page. Ajax is a way to make asynchronous requests.
What does the AJAX acronym stand for?
asynchronous javascript and xml
Which object is built into the browser for making HTTP requests in JavaScript?
XML object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
the load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
it is related to the event.target –
What is destructuring, conceptually?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
What is the syntax for Object destructuring?
let {} = variable
What is the syntax for Array destructuring?
let [] = variable
How can you tell the difference between destructuring and creating Object/Array literals?
if it’s happening on the left side, it is destructuring, and the right side is defining
What is a code block? What are some examples of a code block?
some code inside curly braces
What does block scope mean?
A block scope is the area within if, switch conditions or for and while loops
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 changed, const stays the same
Why is it possible to .push() a new value into a const variable that points to an Array?
because the value is being changed, not the variable itself
How should you decide on which type of declaration to use?
seeing if the variable will be the same or it can change
What is the syntax for writing a template literal?
` ${variable} `
What is “string interpolation”?
the ability to substitute part of the string for the values of variables or expressions
What is the syntax for defining an arrow function?
(parameters) => {code block, return}
When an arrow function’s body is left without curly braces, what changes in its functionality?
doesn’t need a return statement
How is the value of this determined within an arrow function?
where the function is defined
What is a CLI?
command line interface
What is a GUI?
graphic user interface
Give at least one use case for each of the commands listed in this exercise. man cat ls pwd echo touch mkdir mv rm cp
man: description/options for the manual command
cat:
ls:
pwd:
echo: print out a status text
touch:
mkdir:
mv: move a file or rename it
rm: remove file/directories
cp:
What are the three virtues of a great programmer?
laziness virtue hubris
What is Node.js?
As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.
What can Node.js be used for?
anything
What is a REPL?
read eval print loop
When was Node.js created?
2009
What back end languages have you heard of?
PHP Node.JS
What is a computer process?
the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
100
Why should a full stack Web developer know that computer processes exist?
to see if the code that they made is running inside of the process
How do you access the process object in a Node.js program?
process (a global variable)
What is the data type of process.argv in Node.js?
array
What is a JavaScript module?
modules are a codeblock inside of a file that does a certain functionality. Modules are originally private, but if the dev passes it into the export object, it becomes public.
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, __dirname
Give two examples of truly global variables in a Node.js program.
global, process, console, setTimeOut, setInterval
What is the purpose of module.exports in a Node.js module?
to call an object, variable, functions, etc from one file to another
How do you import functionality into a Node.js module from another Node.js module?
module.exports = function, then
require(./function.js)
What is the JavaScript Event Loop?
pushes async functions to the api, so that other functions can run at the same time. When the async function loads, it is pushed onto the queue stack, and when the stack is empty, the first function that is loaded onto the task queue is pushed onto the stack.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking is a piece of codeblocks that blocks other code from running.
What is a directory?
a location where a file is stored
What is a relative file path?
a local file stored inside a local computer
What is an absolute file path?
path from the route directory
What module does Node.js include for manipulating the file system?
fs
What method is available in the Node.js fs module for writing data to a file?
fs.writeFile()
Are file operations using the fs module synchronous or asynchronous?
asynchronous
What is on the first line of an HTTP request message?
request line, which represent the first line of a request message
What is on the first line of an HTTP response message?
status status code
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response
Is a body required for a valid HTTP message?
no
What is NPM?
node package manager. takes a module or package and sends it to a server so other developers can access and reuse it.
What is a package?
a package is a directory with one or more files in it.. It usually includes a package.json with metadata in it.
How can you create a package.json with npm?
npm init –yes
What is a dependency and how to you add one to a package?
Packages required by your application in production.
What happens when you add a dependency to a package with npm?
downloaded to the repo and then added to the json
How do you add express to your package dependencies?
npm install express const express = require('express')
What Express application method starts the server and binds it to a network PORT?
the listen method
How do you mount a middleware with an Express application?
the .use method
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req and res
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
What is the significance of an HTTP request’s method?
to know what the user desires to do: GET (create), PUT , POST, DELETE, etc.
What is PostgreSQL and what are some alternative relational databases?
MySQL, Oracle, SQL Server
What are some advantages of learning a relational database?
when the application needs to quickly retrieve or store complex data in an organized fashion, a database fills that need nicely.
What is one way to see if PostgreSQL is running?
sudo service postgresql status or check the top in terminal
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.
What is a table?
A table is a list of rows each having the same set of attributes. For example, all students in a “students” table could have “firstName”, “lastName”, and “dateOfBirth” attributes.
What is a row?
a record of a specific item or person (for example: student id, name, height, gender, etc)
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative programming language, which describes the result instead of telling it what to do
How do you retrieve specific columns from a database table?
select statment, and a string of the column name
How do you filter rows based on some specific criteria?
where clause.
What are four comparison operators that can be used in a where clause?
< > = !=
How do you limit the number of rows returned in a result set?
limit clause
How do you retrieve all columns from a database table?
select *
How do you control the sort order of a result set?
orderBy descending
What are the benefits of formatting your SQL?
readability and formatting
How do you add a row to a SQL table?
insert into “table” (“row name”)
What is a tuple?
In SQL, a list of values is referred to as a tuple. aka values ('value1', 'value2') would be a tuple
How do you add multiple rows to a SQL table at once?
separate with comma and parentheses
values (‘value1’), (‘value2’)
How do you get back the row being inserted into a table without a separate select statement?
returning * to output the row, or returning “column” to return a specific column
How do you update rows in a database table?
update “table”
set “column” = ‘value’
where “id” = ‘value’
Why is it important to include a where clause in your update statements?
if you do not put where, it updates the whole row
How do you delete rows from a database table?
delete from “table”
where “column” = ‘value’
How do you accidentally delete all rows from a table?
if you don’t put the where clause
What is a foreign key?
combining 2 columns that have a similar column
How do you join two SQL tables?
join clause using clause
How do you temporarily rename columns or tables in a SQL statement?
as clause
What are some examples of aggregate functions?
max(), sum(), min(), avg()
What is the purpose of a group by clause?
to take a certain column, and arrange the data to that certain column
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
promise.then()
How do you handle the rejection of a Promise?
promise.catch()
What is Array.prototype.filter useful for?
it’s useful as a “checker” for an array, to see which values match the conditions. If the condition is matched, it returns another array with the matching values.
What is Array.prototype.reduce useful for?
to combine all of the values of an array into a single datatype
What is “syntactic sugar”?
syntax used to make things easier to read or to express
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class name, constructor, methods
What is “refactoring”?
destructuring the code without changing the behavior
What is Webpack?
bundles js applications based on your imports and exports. takes all the files from the project and bundles it all in one big js file
How do you add a devDependency to a package?
npm install –save-dev webpack
What is an NPM script?
script that automates tasks.
How do you execute Webpack with npm run?
npm run build
How are ES Modules different from CommonJS modules?
more compact import export statements
What kind of modules can Webpack support?
ECMA, CommonJS, AMD
What is React?
JS library used to build user interfaces
What is a React element?
It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns.
How do you mount a React element to the DOM?
using the render() method, the first argument is the element, and the 2nd argument is which container you want to put it in, 3rd is the callback
What is Babel?
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, also converts from jsx files to js
What is a Plug-in?
Software component that adds a specific feature to an existing computer program
What is a Webpack 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.
How can you make Babel and Webpack work together?
make webpack, babel and its plugins a dev dependency
What is JSX?
special syntax to allow html style writing inside javascript.
Why must the React object be imported when authoring JSX in a module?
In order to use the package from react, which allows us to use the jsx tags
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
As webpack bundles files together, babel works in the background to convert the file into an older, more accessible version of ecmascript
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
How do you define a function component in React?
function keyword, capitalized component name, and the return keyword with the elements.
How do you mount a component to the DOM?
render method with the jsx element, and the container
What are props in React?
properties, which are objects used to pass data from one component to another
How do you pass props to a component?
using curly braces and adding the properties in the middle
How do you write JavaScript expressions in JSX?
insert the expression between curly braces {}
What is the purpose of state in React?
in order to hold data, and to specify what to do with it with other methods
How to you pass an event handler to a React element?
use a onClick attribute and assign it to a method
What Array method is commonly used to create a list of React elements?
.map()
What is the best value to use as a “key” prop when rendering lists?
id, anything unique
What are controlled components?
input form where input is controlled by react
What two props must you pass to an input for it to be “controlled”?
handleChange and handleSubmit
What does express.static() return?
middleware
What is the local __dirname variable in a Node.js module?
returns the string of the directory name of where your file is located on the local pc
What does the join() method of Node’s path module do?
it combines the path of the dirname with whatever you insert
What does fetch() return?
promise
What is the default request method used by fetch()?
get method
How do you specify the request method (GET, POST, etc.) when calling fetch?
fetch(url, { method: get/post }) put it on the 2nd argument
When does React call a component’s componentDidMount method?
after the rennder phase
Name three React.Component lifecycle methods.
componentdidmount componentdidupdate componentwillunmount
How do you pass data to a child component?
Exercise
through props