React

Question 1

What is React?

Answer 1

a JS library for building user interfaces.

component based.

Question 2

What is a React element?

Answer 2

an object that functions as a DOM element

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, container[,callback])

Question 4

What is JSX?

Answer 4

js syntax extension

Question 5

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

Answer 5

bc it gets transformed into react.create element

Question 6

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

Answer 6

we need babel-loader and the babel plugin transform react jsx

Question 7

What is a React component?

Answer 7

a reusable piece of React that describes a piece of the UI

any fxn that starts with CAPITAL LETTER
& returns JSX

Question 8

How do you define a function component in React?

Answer 8

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

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render(element, mountingElement);

Question 10

What are props in React?

Answer 10

how we pass data into a component.

they look like attributes

Question 11

How do you pass props to a component?

Answer 11

key value pair on jsx component that resembles an attribute

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

wrap them with curly brace

Question 13

How do you create “class” component in React?

Answer 13

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

***RENDER METHOD IS REQUIRED!

Question 14

How do you access props in a class component?

Answer 14

this.props.propertyName

Question 15

class CustomButton extends React.Component

What is Component?

Answer 15

Component

is a class that contains props and we are EXTENDING its functionality and thus inherit all the methods of parent class (like prototype almost).

This is how you can access this.props.propertyName in your custom class

Question 16

class CustomButton extends R.Component {
   constructor(props) {
     super(props)
     }
   }

Answer 16

super(props)

super calls parent’s constructor with SUPER and pass it the props

Question 17

What is the purpose of state in React?

Answer 17

manage changing data in component

Question 18

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

Answer 18

1. use constructor to set initial state
2. add method to change/set state upon event
3. bind the method to constructor
4. in component’s render ( ), set up ? : to render different results

Question 19

When does React call a component’s componentDidMount method?

Answer 19

immediately after component is mounted (inserted into tree)

OR

after render() method is called for the first time

Question 20

Name three React.Component lifecycle methods.

Answer 20

NEVER CALL THESE OURSELVES IN ANOTHER METHOD!

componentDidMount( ) - most commonly used for fetch requests

componentDidUpdate( ) - either props or state has changed (or both);

• don’t need it too often; usually there’s a better way to do it
• **do not call setState without an if stmt in this or INFINITE LOOP

componentWillUnmount( )

Question 21

How do you pass data to a child component?

Answer 21

through props