React.js

Question 1

What is React?

Answer 1

A JS library for building user interfaces

However, Tim believes it to be a framework moreso

Question 2

What is a React element?

Answer 2

A plain object that virtually describes the DOM nodes that a component represents

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render ( )

Or

ReactDOM.createRoot( )
Then root.render

Question 4

What is JSX?

Answer 4

syntax extension to JS

produces React elements

Question 5

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

Answer 5

JSX will be creating a React object

under the hood it is actually React.createElement( )

Question 6

How can you make Webpack and babel work together to convert JSX into valid JS?

Answer 6

babel loader

and

@babel/plugin-transform-react-jsx

Question 7

What is a react component?

Answer 7

similar to a JS function

They accept arbitrary inputs (called props) and return React elements describing what should appear on the screen

Question 8

How do you define a function component in React?

Answer 8

function FunctionName (props) {
      return  <h1>Hello, {props.name}</h1>
}

Question 9

How do you mount a component to the DOM?

Answer 9

React.render(, parent)

Question 10

What are props in React?

Answer 10

arguments passed into React components that are objects

Question 11

How do you pass props to a component?

Answer 11

propName=”propvalue”

Question 12

How do you write JS expressions in JSX?

Answer 12

{expression}

has to be an expression

Question 13

How do you create a “class” component in React?

Answer 13

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

Question 14

How do you access props in a class component?

Answer 14

using {this.props}

Question 15

What is the purpose of state in React?

Answer 15

to keep track of values that change over time

Question 16

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

Answer 16

onEvent={this.eventMethod}

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 a “key” prop when rendering lists?

Answer 18

a unique id that is stable and specific amongst its siblings

Question 19

What are controlled components?

Answer 19

those in which form data is handled by the component’s state.

Question 20

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

Answer 20

value=”valueOfSomething”

onchange=”value”

Question 21

When does React call a component’s componentDidMount method?

Answer 21

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

Question 22

Name three React.Component lifecycle methods:

Answer 22

componentDidMount()

componentDidUpdate()

componentWillUnmount()

render()

Question 23

How do you pass data to a child component?

Answer 23

pass a “prop”