Javascript Flashcards
What is the purpose of variables?
a way to store values
How do you declare a variable?
var and its name
How do you initialize (assign a value to) a variable?
with the assignment operator = then semicolon ;
What characters are allowed in variable names?
The period, the underscore, and the characters $, #, and @
What does it mean to say that variable names are “case sensitive”?
capitalizing letters change the name
What is the purpose of a string?
assign text to a value
What is the purpose of a number?
to assign a value a number to manipulate
What is the purpose of a boolean?
assign a value as either true or false
What does the = operator mean in JavaScript?
assignment
How do you update the value of a variable?
use the name with a new value assigned
What is the difference between null and undefined?
null means intentionally left blank and undefined means there is no value assigned
Why is it a good habit to include “labels” when you log values to the browser console?
so you know what the value your seeing represents
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
What data type is returned by an arithmetic operation?
integer value
What is string concatenation?
adding strings together to combine them
What purpose(s) does the + plus operator serve in JavaScript?
addition and concatenation
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
adds the value on the right to the variable on the left
What are objects used for?
containers for named values
What are object properties?
names that separate objects from others
Describe object literal notation.
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
How do you remove a property from an object?
use the delete operator before the object name
What are the two ways to get or update the value of a property?
bracket notation name[‘name2’], and dot notation name.name2
What are arrays used for?
when you want to store an ordered list of values
Describe array literal notation.
when you define an array using empty brackets
How are arrays different from “plain” objects?
they are ordered
What number represents the first index of an array?
0
What is the length property of an array?
how many entries there are in the array
How do you calculate the last index of an array?
you subtract 1 from the length since its index starts at 0
What is a function in JavaScript?
a block of code designed for a task that can be reused
Describe the parts of a function definition.
the arguments line and then the code block or body of the function
Describe the parts of a function call.
the name of the function and the arguments being passed
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition has the word function Infront of it as well as the body or declaration block of what the function is doing.
What is the difference between a parameter and an argument?
parameter if for the definition and argument is what is being sent to the function when it’s called
Why are function parameters useful?
they describe what the expected argument is
What two effects does a return statement have on the behavior of a function?
it ends the execution of the function and also returns controls what is given back to the calling function
Why do we log things to the console?
so developers can temporally see the output of something
What is a method?
actions that can be performed on objects
How is a method different from any other function?
a method is associated with 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?
floor() method
How do you generate a random number?
Math.random() then multiply the result by array length or another value
How do you delete an element from an array?
splice()
How do you append an element to an array?
append()
How do you break a string up into an array?
split()
Do string methods change the original string? How would you check if you weren’t sure?
no, call the original string
Roughly how many string methods are there according to the MDN Web docs?
30-40
Is the return value of a function or method useful in every situation?
no, sometimes you just want the function to preform an action
Roughly how many array methods are there according to the MDN Web docs?
30-40
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?
to run code if a condition is met
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
the word if, the condition it parentheses, the code that will run if the condition is met
What are the three logical operators?
AND, OR, NOT
How do you compare two different expressions in the same condition?
logical operators ( &&, ||)
What is the purpose of a loop?
to repeat a process multiple times
What is the purpose of a condition expression in a loop?
to define how many iterations the statement will have
What does “iteration” mean in the context of loops?
times code is run
When does the condition expression of a while loop get evaluated?
after the initialization or after previous loop final expression
When does the initialization expression of a for loop get evaluated?
one time when the loop starts
When does the final expression of a for loop get evaluated?
after the code block
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 1 to the variable
How do you iterate through the keys of an object?
with a for in statement
Why do we log things to the console?
so we can check the value of an item in the document
What is a “model”?
a representation of a proposed structure
Which “document” is being referred to in the phrase Document Object Model?
HTML
What is the word “object” referring to in the phrase Document Object Model?
the elements and attributes and text
What is a DOM Tree?
the elements with the attributes and children branching off
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID and querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll
Why might you want to assign the return value of a DOM query to a variable?
so you don’t have to look for it again
What console method allows you to inspect the properties of a DOM element object?
.dir
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so it loads all other elements first before inspecting the document
What does document.querySelector() take as its argument and what does it return?
an element and returns the first one to match the name given
What does document.querySelectorAll() take as its argument and what does it return?
it returns all elements with the given name
Why do we log things to the console?
to check the value of a variable throughout the code
What is the purpose of events and event handling?
so that users can interact with a webpage making it less static
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
a name that refers back to the definition instead of calling it immediately
What object is passed into an event listener callback when the event fires?
an event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
a reference to an object. check mdn
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
ones a callback function that doesn’t run the code immediately while the other is calling it right away
What is the className property of element objects?
it sets the class attribute of the element given
How do you update the CSS class attribute of an element using JavaScript?
className
What is the textContent property of element objects?
how you get the value of the text of an element
How do you update the text within an element using JavaScript?
get the element and assign it with textConent property
Is the event parameter of an event listener callback always useful?
no
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
more complicated because you’d have to go through html strings, since html doesn’t have values
Why is storing information about a program in variables better than only storing it in the DOM?
it make it much easier to make effects since all the information is already there
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 < form >?
submit
What does the event.preventDefault( ) method do?
prevents the event default behavior
What does submitting a form without event.preventDefault( ) do?
reloads the page
What property of a form element object contains all of the form’s controls.
elements property
What property of a form control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
it can be hard to see where the code went wrong
What is an advantage of having your console open when writing a JavaScript program?
see if the code has any errors or check values
Does the document.createElement() method insert a new element into the page?
no it just creates it
How do you add an element as a child to another element?
append or appendChild
What do you pass as the arguments to the element.setAttribute() method?
the name of the attribute and the value you want it to be
What steps do you need to take in order to insert a new element into the page?
create the element then append it
What is the textContent property of an element object for?
to get or set the text for an element
Name two ways to set the class attribute of a DOM element.
element. className
element. setAttribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
you can reuse them and test the easier
Give two examples of media features that you can query in an @media rule.
width/height, orientation
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
What is the event.target?
object the event is on
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What DOM element property tells you what type of element it is?
.tagName
What does the element.closest() method take as its argument and what does it return?
takes a css selector and returns the closest parent
How can you remove an element from the DOM?
element.remove()
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add it to the parent with and if statement to select correct elements
What is the event.target?
element where the event occurs
What is the affect of setting an element to display: none?
the document treats it like it doesn’t exist
What does the element.matches() method take as an argument and what does it return?
takes a selector as a string and returns true or false
How can you retrieve the value of an element’s attribute?
element.getAttribute(‘class’)
At what steps of the solution would it be helpful to log things to the console?
when you want to verify a value or see if the code itself will run
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?
add an event listener for each tab
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?
it would have multiple conditions for each tab
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
What are serialization and deserialization?
Serialization: converting complex data (like an object) to string
Deserialization: converting string to object
Why are serialization and deserialization useful?
Serialization allows from data to be stored in memory. Also makes it easier to transfer data across a network.
Deserialization makes it so that data is easier to interact with.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How to you store data in localStorage?
localStorage.setItem( ) method
How to you retrieve data from localStorage?
localStorage.getItem( ) method
What data type can localStorage save in the browser?
‘String’ type data (local storage needs serialized data )
When does the ‘beforeunload’ event fire on the window object?
before the page refreshes
What is a method?
A method is a function that is a property of an object.
How can you tell the difference between a method definition and a method call?
A method definition would have the keyword function and { } for the function code block.
A method call would have the object followed by dot notation, name of method and then ( ).
Describe method definition syntax (structure).
{ property: function methodName ( [optional parameters] ) {code block }, }
Describe method call syntax (structure).
object.methodName( )
How is a method different from any other function?
Needs dot notation or bracket notation. Also a method belongs to an object as a property of the object.
What is the defining characteristic of Object-Oriented Programming?
Objects can contain BOTH data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction, encapsulation, inheritance , polymorphism
What is “abstraction”?
making a big problem smaller
What does API stand for?
Application Programming Interface
What is the purpose of an API?
Selection of tools (set of code features such as methods, properties, events, and URLS) to make it easier for developers to interact with a software.
What is this in JavaScript?
‘this’ is an implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
It is available in a function’s code block even though it was never included in the function’s parameters list or declared with ‘var’.
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);
}
};nothing
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
Result = “It’s-a-me, Mario!” because ‘this’ refers to the object being called. The object firstName property has the value of Mario.
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
Result = “It’s-a-me, undefined!” because ‘this’ refers to the window (hello is not a property of an object, therefore default object would be the window object). Window object does not have the property firstName so therefore, ‘this.firstName” has the value of undefined.
How can you tell what the value of ‘this’ will be for a particular function or method definition?
You can’t. Value of ‘this’ is determined at call time.
How can you tell what the value of this is for a particular function or method call?
By looking to left of the dot (the object).
What kind of inheritance does the JavaScript programming language use?
JS uses prototype-based inheritance
What is a prototype in JavaScript?
Prototypes are the mechanism by which JavaScript objects inherit features from one another.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
Due to JS prototypes; models that was created that contain these methods.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
From the object’s prototype, if it’s not there then object’s object’s prototype
What does the new operator do?
The new keyword does the following things:
Creates a blank, plain JavaScript object
Links (sets the constructor of) the newly created object to another object by setting the other object as its parent prototype;
Passes the newly created object from Step 1 as the this context;
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?
It tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. Returns a boolean.
What is a “callback” function?
It is a function passed in through another function as an argument
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?
Use setTimeout( ) function
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
an id for that function
What is a client?
Piece of software that is asking a service from something
What is a server?
The provider of the services to clients
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What three things are on the start-line of an HTTP request message?
HTTP method; request target; HTTP version
What three things are on the start-line of an HTTP response message?
Protocol version; status code; status text
What are HTTP headers?
Further information about the request or response
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?
no
What is a code block? What are some examples of a code block?
A block of code within curly braces { };
Examples: if else, for, do while, while; function code block;
What does block scope mean?
An area within the block where variables can be referenced
What is the scope of a variable declared with const or let?
Let = block-scoped; Const = block-scoped
What is the difference between let and const?
Const can’t be reassigned while let can.
Why is it possible to .push() a new value into a const variable that points to an Array?
The value within the array is mutable
How should you decide on which type of declaration to use?
If the variable is not going to be reassigned, use ‘const’. If it will be reassigned, then use ‘let’
What is the syntax for writing a template literal?
Template literals use backticks rather than single or double quotes and the javascript expression is as follows: ${variable}
What is “string interpolation”?
A process where variables and expressions is embedded in a string. The variable/expression has to be placed in a space block as follows:
${variable_name}
What is destructuring, conceptually?
Taking the values within the object and assign it to a variable
What is the syntax for Object destructuring?
let {
property1: variable1,
property2: variable2
} = object;
or
if the variable is the same name as the property then you just need that name in the bracketsWhat is the syntax for Array destructuring?
let [index1, index 2] = array
How can you tell the difference between destructuring and creating Object/Array literals?
Destructuring: variable name goes on the right of the assign operator ( let/const { } or [ ] = variable )
Creating: variable name goes on the left of the assign operator ( variable = { } or [ ])
What is the syntax for defining an arrow function?
(parameters separated by commas) => { code block };
If there is only 1 parameter, the parentheses are not needed. If return is a simple expression, brackets and return keyword can be omitted. Brackets and return keyword are needed for code block if it’s multiline statements.
When an arrow function’s body is left without curly braces, what changes in its functionality?
the body becomes the return value
How is the value of this determined within an arrow function?
Arrow functions: value of this is determined at definition time
Regular functions: value of this is determined at call time
What is a CLI?
Stands for command-line interfaces. CLI processes commands to a computer program in the form of lines of text. The program which handles the interface is called a command-line interpreter or command-line processor.
What is a GUI?
Stands for graphical user interface. GUI is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation.
Give at least one use case for man.
Systems manual pager. Documentation/manual page for commands
Give at least one use case for cat.
Concatenate files and print on the standard output
Give at least one use case for ls.
List information about the FILEs (and the current directory by default)
Give at least one use case for pwd.
Print the full filename of current working directory
Give at least one use case for echo.
Echo the STRING(s) to standard output…. Display a line of text
Give at least one use case for touch.
Change file timestamps/ update the access and modification times of each FILE to the current time.
Give at least one use case for mkdir.
Make directories (if they do not already exist)
Give at least one use case for mv.
Move (or rename) files
Give at least one use case for rm.
Remove files or directories (by default, does not remove directories)
Give at least one use case for cp.
Copy files and directories
What are the three virtues of a great programmer?
- 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.
- 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.
- Hubris: The quality that makes you write (and maintain) programs that other people won’t want to say bad things about.
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser.
What can Node.js be used for?
It is commonly used to build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform.
What is a REPL?
REPL also known as Read Evaluate Print Loop is a programming language environment (basically a console window) that takes single expression as user input and returns the result back to the console after execution.
When was Node.js created?
2009 by Ryan Dahl
What back end languages have you heard of?
Ruby, PHP, Java, .Net, Python
What is the process object in a Node.js program?
The process object is a global that provides information about, and control over, the current Node.js process.
How do you access the process object in a Node.js program?
Just reference it. As a global, it is always available to Node.js applications without using require().
What is the data type of process.argv in Node.js?
An array of Strings
What is a JavaScript module?
A single .js file
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.
Process and global
What is the purpose of module.exports in a Node.js module?
To export code into another module
How do you import functionality into a Node.js module from another Node.js module?
Require( ) and pass in the relative path of the file as a string
What is the JavaScript Event Loop?
The Event Loop is a queue of callback functions. Takes the first thing on the callback queue and puts it back on the stack if the stack is empty
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking is when the execution of additional JavaScript in the Node.js process must wait until a non-JavaScript operation completes.
Non-blocking methods execute asynchronously.
What is a directory?
Also called folders
What is a relative file path?
Relative file path to current directory (doesn’t start with a slash)
What is an absolute file path?
Absolute path contains the root of element and the complete directory list required to location file. Starts with a slash
What module does Node.js include for manipulating the file system?
The fs (file system) module
What method is available in the Node.js fs module for writing data to a file?
writeFile( ) method
Are file operations using the fs module synchronous or asynchronous?
Both. The ones that are synchronous will have ‘sync’ in the name.
What is NPM?
NPM is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently.
npm consists of three distinct components:
• the website
• the Command Line Interface (CLI)
• the registry
What is a package?
A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry.
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?
Dependency = a pack of code your application depends on
Npm install
What happens when you add a dependency to a package with npm?
Package.json gets updated; makes node_modules folder that includes the package you installed
How do you add express to your package dependencies?
Npm install express
What Express application method starts the server and binds it to a network PORT?
app.listen(path, [callback])
How do you mount a middleware with an Express application?
By app.use()
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
Request object, response object
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Application/json
What does the express.json() middleware do and when would you need it?
It parses the incoming requests object.
It is needed when you need to parse the request bodies that are JSON.
What is the significance of an HTTP request’s method?
Is arbitrary. It makes it more specific for the client to show the server what the client is wants to do.
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS).
Other popular relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation.
What are some advantages of learning a relational database?
Relational databases are arguably the most widely used kind of database. Many times when developers create a full stack developer, they are using a relational database.
What is one way to see if PostgreSQL is running?
sudo service postgresql status
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 data that is in a list of rows where rows each have the same set of attributes.
What is a row?
A single instance of record in that table
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.
How do you retrieve specific columns from a database table?
Use the select keyword followed by the name of the column
How do you filter rows based on some specific criteria?
Use the select and where clause; expression that evaulates to true or false
What are the benefits of formatting your SQL?
For readability
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?
Keyword limit followed by a number for the number of rows
How do you retrieve all columns from a database table?
Select *
How do you control the sort order of a result set?
Keyword order by column name ___ (default is ascending) and if want descending put desc
How do you add a row to a SQL table?
insert into “name of table to insert to” (“column names separated by commas”)
values (’text values wrapped in single quotes’, number values with literal numbers);
What is a tuple?
In SQL, a list of values is referred to as a tuple.
How do you add multiple rows to a SQL table at once?
Data rows can be batch inserted into a database table by specifying more than one tuple of values, separated by commas
How to you get back the row being inserted into a table without a separate select statement?
Keyword returning *;
How do you update rows in a database table?
update “table name”
set “attribute column name” = ‘value’ and no single quotes if it’s a number value
Why is it important to include a where clause in your update statements?
You don’t want to update every row to have the same value (unless that is what you intend to do)
How do you delete rows from a database table?
Keyword delete from and table name and followed a where clause!!!! If not, the entire table will be deleted
How do you accidentally delete all rows from a table?
By not specifying where
What is a foreign key?
Is a set of attributes in a table that refers to the primary key of another table. The foreign key links these two tables.
How do you join two SQL tables?
Use the join keyword followed by “tableName” followed by using keyword followed by (“foreign key”);
How do you temporarily rename columns or tables in a SQL statement?
Use as (e.g table_name as alias_name)
What are some examples of aggregate functions?
max(), avg(), count(), min(), sum(), and every()
What is the purpose of a group by clause?
Groups only certain rows that the user chooses to perform an action on – apply aggregate functions only on selected rows
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?
Use then( ) method
How do you handle the rejection of a Promise?
Use then( ) method or catch( ) method
What is Array.prototype.filter useful for?
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
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.
What is Array.prototype.reduce useful for?
callback function on each element of the array
What is “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.
What is the typeof an ‘ES6 class’?
The class declaration is just syntactic sugar of the constructor function, therefore, the result of the ‘typeof’ operator of ES6 class is function.
Describe ES6 class syntax.
Class keyword followed by curly braces for the class declaration
What is “refactoring”?
Code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior; preserve functionality
What is Webpack?
Is a static module bundler for modern JavaScript applications.
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.
How do you add a devDependency to a package?
npm install –save-dev
Or you can manually add it by editing the package.json file and adding an attribute called “devDependencies” that references the name and semantic version of each devDependency
What is an NPM script?
They are essentially an alias for a command line task that you want to run over and over
An NPM script are typically commands, or a string of commands, which would normally be entered at the command line in order to do something with your application.
How do you execute Webpack with npm run?
Whatever it’s alias to.
i.e.»_space;> Npm run build
How are ES Modules different from CommonJS modules?
ES modules are the standard for JavaScript, while CommonJS is the default in Node. js.
What kind of modules can Webpack support?
ECMAScript modules. CommonJS modules. AMD modules
What is React?
React is a JavaScript library for building user interfaces.
What is a React element?
A React Element is what gets returned from components.
It’s an object that virtually describes the DOM nodes that a component represents.
An element is a plain object describing a component instance or DOM node and its desired properties.
How do you mount a React element to the DOM?
By using ReactDOM.render
What is Babel?
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.
What is a Plug-in?
A plugin is a software add-on that is installed on a program, enhancing its capabilities.
In computing, a plug-in is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.
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. 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!
How can you make Babel and Webpack work together?
By installing babel loader
What is JSX?
JSX is an XML-like syntax extension to ECMAScript w/o any defined semantics.
It is called JSX, and it is a syntax extension to JavaScript.
Used to write HTML tags inside JavaScript.
JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code
Why must the React object be imported when authoring JSX in a module?
JSX works with React.render() or createElement(); belongs to React
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader and install the babel-plugin that transforms React JSX
What is a React component?
Conceptually, components are like JavaScript functions.
Components let you split the UI into independent, reusable pieces.
Think about each piece in isolation.
How do you define a function component in React?
Function name (props) {
Return (rendered React elements)
}How do you mount a component to the DOM?
By using ReactDOM.render
What are props in React?
They are objects; Props stand for properties; used to pass data between React components
How do you pass props to a component?
As an argument
How do you write JavaScript expressions in JSX?
Put them in brackets
How do you create “class” component in React?
keyword class name keyword extends react.component {
render() {
return the react elements
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
To keep track of values that will change over time
How to you pass an event handler to a React element?
Pass the event handler to the react React element’s prop
What are controlled components?
A component who 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?
an id
