react

Question 1

What is React?

Answer 1

a JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

It’s an object that virtually describes the DOM nodes that a component represents

has key, props (children), ref, type(h1, div, etc), _owner
React element is a plain JS object that describes what the DOM obj should look like (NOT a DOM element)
framework stores in memory, not what we see?

Question 3

How do you mount a React element to the DOM?

Answer 3

createElement
query DOM for real DOM element
createRoot using the DOM element
mount the createElement to DOM from root with render()

Question 4

What is Babel?

Answer 4

toolchain used to convert JS versions (can convert code into older JS version syntax for browsers that might not support JS versions that are newer)

Question 5

What is a Plug-in?

Answer 5

software component that adds a specific feature to an existing computer program.

adds more functionality or customization to a program
software already works w/o plug-in; plug-in is an add on
if some code of software modifies a larger piece of code/software that would’ve worked just fine w/o it, its a plugin

Question 6

What is a Webpack loader?

Answer 6

transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.

Question 7

How can you make Babel and Webpack work together?

Answer 7

install bable core (babel)
install webpack
install babel-loader (connects the two above)
specify which babel plugins to use!!

Question 8

What is JSX?

Answer 8

a syntax extension to JavaScript
JSX produces React “elements”

syntax extension used to write react elements
*extension: addon to JS

Question 9

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

Answer 9

b/c JSX is used to create React elements so you need react to do that

needs to be there so when JSX is converted to React.createElement, react is there

Question 10

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

Answer 10

install bable/core, webpack, babel-loader
install @babel/plugin-transform-react-jsx plugin

Question 11

user defined component

Answer 11

a function or a class

Question 12

What is a React component?

Answer 12

basically a function or a class
independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 13

How do you define a function component in React?

Answer 13

accepts a single “props” (which stands for properties) object argument with data and returns a React element
like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

function functionnamethatstartswithacapitalletter (optional props parameter) {
return a React element;
}

Question 14

How do you mount a component to the DOM?

Answer 14

root.render()
create a react element w/ component name to put in render!!
**ex: root.render()
**don’t call function in render()

React is a framework, we define functions, classes, etc. but we don’t call functions in frameworks!!!

Question 15

What are props in React?

Answer 15

an object!

looks like html attributes
kind of like parameters in JS functions?

Question 16

How do you pass props to a component?

Answer 16

looks like html attributes

specify when writing react elements in a react component (as key value pairs)

Question 17

How do you write JavaScript expressions in JSX?

Answer 17

have to write EXPRESSIONS in curly braces!

*no statements: if/else, loop, etc.

Question 18

curly braces in jsx

Answer 18

means JS expression

Question 19

How do you create “class” component in React?

Answer 19

class Componentname extends React.Component {
render( ) {
return react element;
}
}

*need render() for methods!!!
*if using constructor function, need to include super(props)!!!!!

Question 20

How do you access props in a class component?

Answer 20

“this”
props

Question 21

es6 super(_

Question 22

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

Answer 22

array.map()

Question 23

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

Answer 23

a string that uniquely identifies a list item among its siblings.
most often you would use IDs if available

Question 24

What are controlled components?

Answer 24

An input form element whose value is controlled by React

value of contolled component is stored in component state

Question 25

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

Answer 25

value and onChange function

Question 26

What is the purpose of state in React?

Answer 26

keep track of values that change over time

state can change over time

data model for a component

Question 27

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

Answer 27

pass event handler as a prop of that react element

ex: onClick={this.handleClick}