React

Question 1

What is React?

Answer 1

a JavaScript framework for building user interfaces

Question 2

What is a React element?

Answer 2

a plain JavaScript object that is the smallest building block of a React app

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, container, [callback])

Question 4

What is Babel?

Answer 4

a JavaScript compiler mainly used to convert ES6 code into a backward-compatible version of JavaScript

Question 5

What is a Plug-in?

Answer 5

a software component that adds a specific feature to and enables customization for an existing computer program

Question 6

What is a Webpack loader?

Answer 6

a transformations (plug-in) that is applied to the source code of a module

Question 7

How can you make Babel and Webpack work together?

Answer 7

install babel-loader as a devDependency

Question 8

What is JSX?

Answer 8

a syntax extension to JavaScript that produces React “elements”

Question 9

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

Answer 9

the createElement( ) method of the React object is called to produce React “elements”

Question 10

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

Answer 10

install @babel/plugin-transform-react-jsx as a devDependency and add the plug-in to webpack.config.js

Question 11

What is a React component?

Answer 11

a JavaScript function that returns a React element

Question 12

How do you define a function component in React?

Answer 12

function keyword, capital functionName with props in parentheses, then the code block that returns a React element

Question 13

How do you mount a component to the DOM?

Answer 13

ReactDOM.render(ReactElement, container)

Question 14

What’s the difference between a library and a framework?

Answer 14

inversion of control - a framework is a type of library that calls your code

Question 15

What are props in React?

Answer 15

properties contained in an object that are used to pass data into a React component

Question 16

How do you pass props to a component?

Answer 16

prop key=”value” pairs

Question 17

How do you write JavaScript expressions in JSX?

Answer 17

enclosed in curly braces

Question 18

How do you create “class” component in React?

Answer 18

class keyword w/ capital className, followed by extends React.Component; must define a render( ) method

Question 19

How do you access props in a class component?

Answer 19

the props property of this object (this.props)

Question 20

What is the purpose of state in React?

Answer 20

keep track of values that change over time

Question 21

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

Answer 21

the event handler is a method on the class and is passed as a prop in the render( ) method

Question 22

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

Answer 22

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

Question 24

What is the virtual DOM?

Answer 24

lifecycle of React elements - the render( ) method of the component gets called once and outputs one React element; if the state updates, it outputs a slightly different React element, and then the React virtual DOM compares the diff and makes small surgical patches to the real DOM in the browser

Question 25

What are controlled components?

Answer 25

input form React elements that receive their value via state and have a change-handler that updates the state

Question 26

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

Answer 26

value, onChange