React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

Not a DOM object but just a plain JavaScript object

Question 3

How do you mount a React element to the DOM?

Question 4

What is Babel?

Answer 4

JavaScript Compiler

back conscripting javascript code

Question 5

What is a Plug-in?

Answer 5

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

Question 6

What is a Webpack loader?

Answer 6

Loaders are transformations that are applied to the source code of a module

Question 7

How can you make Babel and Webpack work together?

Answer 7

babel loader

Question 8

What is JSX?

Answer 8

it is 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

JSX creates react elements and so it relies on React object to be able to produce the element

JSX = React.createElement

Question 10

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

Answer 10

Babel loader and other plugins

Question 11

What is a React component?

Answer 11

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation

Question 12

How do you define a function component in React?

Answer 12

Literally JavaScript functions

function CustomButton( ) {
  return Click Me!< /button >;
}

Question 13

How do you mount a component to the DOM?

Answer 13

query select for element to append to
create react.root
render method with function component element as argument

Question 14

What are props in React?

Answer 14

props are object arguments with data that are accepted by function components to return a React element

Question 15

How do you pass props to a component?

Answer 15

Define a new element with the function component and define the specified property to use it

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

< button > { expression } < /button >

curly braces

Question 17

What is the purpose of state in React?

Answer 17

Data model for keeping track of values that change over time

Question 18

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

Answer 18

Pass events as props

i.e.
onClick = {this.handleClick}

Question 19

What are controlled components?

Answer 19

With a controlled component, the input’s value is always driven by the React state

Question 20

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

Answer 20

onChange Event Handler and value property

Question 21

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

Answer 21

map method

Question 22

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

Question 23

When does React call a component’s componentDidMount method?

Answer 23

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree)

Question 24

Name three React.Component lifecycle methods.

Answer 24

componentDidCatch( )
componentDidUpdate( )
componentDidMount( )

Question 25

How do you pass data to a child component?