React

Question 1

What is React?

Answer 1

JavaScript library for creating user interfaces

Question 2

What is a React element?

Answer 2

plain objects that contain information needed to turn it into a DOM

Question 3

How do you mount a React element to the DOM?

Answer 3

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

Question 4

What is JSX?

Answer 4

It is syntactic sugar for creating React elements

Question 5

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

Answer 5

It is just syntactic sugar for createElement method of the React object

Question 6

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

Answer 6

Install both webpack and babel/babel-loader. Use babel plug-in for converting JSX

Question 7

What is a React component?

Answer 7

Essentially just a function that returns a react element

Question 8

How do you define a function component in React?

Answer 8

Normal function definition, but React components have first letter capitalized

Can also define a component via class:
class ComponentFunction extends React.Component {
    render( ) {
        return <h1> Hello, {this.props.name}</h1>;
    }
}

Question 9

How do you mount a component to the DOM?

Answer 9

Using the ReactDOM.render( ) method

Question 10

What are props in React?

Answer 10

Props are essentially objects that get passed into the createElement method that get attached to the React element in a way that mimics HTML attributes

Question 11

How do you pass props to a component?

Answer 11

as property=value pairs within the JSX syntax

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

can embed JS expressions by enclosing them in squiggly brackets { }

Question 13

How do you create “class” component in React?

Answer 13

class Component extends React.Component {
    render( ) {
        return reactElement;
    }
}

Question 14

How do you access props in a class component?

Answer 14

Through this.props

Question 15

What is the purpose of state in React?

Answer 15

an object that is maintained within the component that indicate its current state

Question 16

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

Answer 16

assign them as a prop with the value of a callback function

Question 17

What are controlled components?

Answer 17

Components that control both its state and a form element’s values.

Question 18

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

Answer 18

value=this.state.value

onChange=handleChange

Question 19

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

Answer 19

array.prototype.map( )

Question 20

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

Answer 20

the data’s ID or any other unique identifier

can be unique only among its siblings

Question 21

When does React call a component’s componentDidMount method?

Answer 21

after the render( ) method call ONLY if it’s the first iteration

constructor > render > componentDidMount

Question 22

Name three React.Component lifecycle methods

Answer 22

constructor
render
componentDidMount
componentWillUnmount
componentDidUpdate

Question 23

How do you pass data to a child component?

Answer 23

through props