React

Question 1

What is React?

Answer 1

a javascript library for building user interfaces

Question 2

What is a React element?

Answer 2

an object that the user can see

Question 3

How do you mount a React element to the DOM?

Answer 3

render method of the reactDOM object

Question 4

What is JSX?

Answer 4

syntax extension to JS, allows users to write HTML elements in JS and place them in the DOM without createElement()/appendChild() methods

Question 5

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

Answer 5

React library must be within the scope as you are calling things from it

Question 6

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

Answer 6

webpack takes babel loader with plugin-transform-react-jsx to translate jsx to javascript and compile into another file

Question 7

What is a React component?

Answer 7

function (class) that returns react elements

Question 8

How do you define a function component in React?

Answer 8

same as JavaScript function definition

Question 9

How do you mount a component to the DOM?

Answer 9

call reactDOM.render(, DOM)

Question 10

What are props in React?

Answer 10

props are objects which are arbitrary inputs

Question 11

How do you pass props to a component?

Answer 11

add it as a parameter in the function and call it within the function definition as {props}

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

within curly brackets { }

Question 13

How do you create “class” component in React?

Answer 13

class className extends React.Component {
render() {
}
}

Question 14

How do you access props in a class component?

Answer 14

this.props

Question 15

What is the purpose of state in React?

Answer 15

hold information that is managed within the component (like variables in a function)
State is an object that determines how that component renders and behaves

Question 16

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

Answer 16

onClick={ }

Question 17

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

Answer 17

.map()

Question 18

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

Answer 18

IDs from data

Question 19

What are controlled components?

Answer 19

An input form element whose value is controlled by React with value prop and an onChange listener

Question 20

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

Answer 20

value and onChange