M3-React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

It’s an object representing the DOM.

Question 3

How do you mount a React element to the DOM?

Answer 3

react.render()

Question 4

What is a React component?

Answer 4

It accepts arbitrary inputs (called “props”) and returns React elements describing a piece of UI.

Question 5

How do you define a function component in React?

Answer 5

Example:
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
The first letter of the component name of the first letter should be capitalized. React treats components starting with lowercase letters as DOM tags.

Question 6

How do you mount a component to the DOM?

Answer 6

ReactDOM.render()

Calling the render method of the ReactDOM object.

Question 7

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

Answer 7

make sure there is a plugin -transform-react-jsx (answers need to be checked again)

Question 8

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

Answer 8

If you give some JSX to Babel, you will see that JSX is just sugar for React.createElement calls. This is why we need to import React if we use JSX.

Question 9

What are props in React?

Answer 9

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

Question 10

How do you pass props to a component?

Answer 10

Use attribute. key-value format.

Question 11

How do you write JavaScript expressions in JSX?

Answer 11

You are to write the expressions surrounded by curly brackets.

Question 12

How do you create “class” component in React?

Answer 12

Example from React Official Documentation:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Question 13

How do you access props in a class component?

Answer 13

Use ‘this’ keyword. => this.props.name

Question 14

What is the purpose of state in React?

Answer 14

controls what’s display on the page.

Question 15

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

Answer 15

???

Question 16

What are controlled components?

Answer 16

set different values?

Question 17

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

Answer 17

the value and onChange

Question 18

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

Answer 18

map()

Question 19

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

Answer 19

something is unique is the best value.

Question 20

When does React call a component’s componentDidMount method?

Answer 20

is invoked immediately after a component is mounted

Question 21

Name three React.Component lifecycle methods.

Answer 21

not done

Question 22

How do you pass data to a child component?

Answer 22

not done