react

Question 1

What is React?

Answer 1

javascript library for building user interfaces (UIs)

Question 2

What is a React element?

Answer 2

plain objects

Question 3

How do you mount a React element to the DOM?

Answer 3

using the render method

Question 4

What is JSX?

Answer 4

syntax extension

• commonly wrapped in parentheses
• multiple lines for readability

Question 5

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

Answer 5

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code

Question 6

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

Answer 6

Babel compiles JSX down to React.createElement() calls

Question 7

What is a React component?

Answer 7

• like javascript functions
• accept parameters called “props”
• return react elements

Question 8

How do you define a function component in React?

Answer 8

you can define a component either through a function or a es6 class

function component:
use the function keyword followed by the component with the first character capitalized (components starting with a lowercase character are treated as DOM tags

• note: a component function accepts a “props” (parameters) object argument

class component:
use the keyword class followed by the component name capitalize followed by the extends keyword and the component property of the react object

• note: the render method is obviously defined inside the class component code block

Question 9

How do you mount a component to the DOM?

Answer 9

specify the component in the render method of the reactdom object

Question 10

What are props in React?

Answer 10

props are technically properties of an object passed a parameter/argument to a component function

they are read-only

Question 11

How do you pass props to a component?

Answer 11

in component function definitions, we just pass it as a parameter/argument with the keyword “props”

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

use brackets around the javascript expressions

Question 13

How do you create “class” component in React?

Answer 13

class component:
use the keyword class followed by the component name capitalize followed by the extends keyword and the component property of the react object

• note: the render method is obviously defined inside the class component code block

Question 14

How do you access props in a class component?

Answer 14

through the this object

Question 15

What is the purpose of state in React?

Answer 15

a value at the point of time of the component

privately and fully controlled by the component

Question 16

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

Answer 16

as a prop(?)

Question 17

why use an anonymous function in a setState method rather than an object?

Answer 17

React may batch multiple setState() calls into a single update for performance

and hence: Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state

use a second form of setState() that accepts a function rather than an object

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

id

Question 20

What are controlled components?

Answer 20

element controlled by react

Question 21

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

Answer 21

value and onchange prop

Question 22

When does React call a component’s componentDidMount method?

Answer 22

• invoked immediately after a component is mounted
• after the constructor, render methods
• need to handle the first empty render (i.e., “loading..”

Question 23

Name three React.Component lifecycle methods.

Answer 23

constructor, render, componentdidmount, componentdidupdate, componentwillunmount

Question 24

How do you pass data to a child component?

Answer 24

props