React JS

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

A JavaScript object created using React that models a DOM element

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(newReactElement, existingDOMElement);

Question 4

What is JSX?

Answer 4

It is a syntax extension of JavaScript that is used to describe HTML elements, and can be converted into React elements using Babel

Question 5

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

Answer 5

JSX code is syntactic sugar for a React element

Question 6

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

Answer 6

You assign the module.exports.module.rules[0].use.loader = ‘babel-loader’ in the webpack.config.js file

Question 7

What is a React component?

Answer 7

A JavaScript function/class that takes in a props argument to construct a React element

Question 8

How do you define a function component in React?

Answer 8

function SomeComponent([props]) {
return ...
}

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render(Some Component />, existingDOMElement);

Question 10

Why do you need to capitalize React components?

Answer 10

React treats components starting with a lowercase letter as a DOM tag (converts it to string)

Question 11

What are props in React?

Answer 11

They are objects holding the “properties” to be used in making a React element

Question 12

How do you pass props to a component?

Answer 12

You specify them as you would write attributes in an HTML element opening tag

Question 13

How do you write JavaScript expressions in JSX?

Answer 13

between curly braces {expression}

Question 14

How do you create “class” component in React?

Answer 14

class SomeComponent extends React.Component {
render() {
return ...
}
}

Question 15

How do you access props in a class component?

Answer 15

this.props

Question 16

What is the purpose of state in React?

Answer 16

They keep track of values in a React element that change over time

Question 17

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

Answer 17

You can pass it as a prop in the React element

Question 18

What are controlled components?

Answer 18

An input form element whose value is controlled by React

Question 19

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

Answer 19

The onChange and value props

Question 20

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

Answer 20

.map()

Question 21

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

Answer 21

listElement.id

Question 22

When does React call a component’s componentDidMount method?

Answer 22

Right after the render() method when the component is first instantiated

Question 23

Name three React.Component lifecycle methods

Answer 23

constructor(), render(), componentDidMount(), componentDidUpdate()

Question 24

How do you pass data to a child component?

Answer 24

By passing it in a prop