React

Question 1

What is React?

Answer 1

JavaScript library for building user interfaces

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 ReactDOM.render(elementMade, root DOM node)

Question 4

What is JSX?

Answer 4

a syntax extension to JavaScript that produces React “elements”

Question 5

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

Answer 5

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

Question 6

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

Answer 6

using babel loader with plugin @babel/plugin-transform-react-jsx

Question 7

What is a React component?

Answer 7

similar to JavaScript functions, 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 Component (props) {
return <h1>Hello, {props.name}</h1> ;
}

Question 9

How do you mount a component to the DOM?

Answer 9

use ReactDOM.render( react element created , root DOM node);

Question 10

What are props in React?

Answer 10

properties used for passing data from one component to another

Question 11

How do you pass props to a component?

Answer 11

as key value pairs, example text=’this’

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

wrap variables in curly braces

Question 13

How do you create “class” component in React?

Answer 13

class Component extends React.Component {
render( ) {
return Example, {this.props.example}
   }
}

Question 14

How do you access props in a class component?

Answer 14

this.props

Question 15

What is the purpose of state in React?

Answer 15

object that stores a component’s dynamic data and determines the component’s behavior

Question 16

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

Answer 16

provide a listener when the element is initially rendered onClick={eventHandlerMethod}

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

Answer 18

data IDs

Question 19

What are controlled components?

Answer 19

an input form element whose input value is always driven by the React state

Question 20

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

Answer 20

value and onChange

Question 21

When does React call a component’s componentDidMount method?

Answer 21

immediately after render

Question 22

Name three React.Component lifecycle methods.

Answer 22

constructor( ), render ( ), componentDidMount( )

Question 23

How do you pass data to a child component?

Answer 23

using props

Question 24

List 3 major advantages of React.

Answer 24

1. it increases the applications performance
2. JSX increases code readability
3. component reusability

Question 25

What does unidirectional data flow mean?

Answer 25

the data should only flow in one direction for example from parent to children

Question 26

What are 3 major features of using React?

Answer 26

1. it uses the virtual DOM
2. it uses server-side rendering
3. it follows uni-directional data flow

Question 27

what is the virtual DOM?

Answer 27

a lightweight JavaScript object which originally is just the copy of the real DOM; React’s render function creates a node tree out of the React components and updates the tree in response to mutations in the data model.

Question 28

why can’t browsers read JSX?

Answer 28

browsers can only read JavaScript objects and JSX is not a regular JS object; therefore must transform JSX using Babel and then passing it to the browser

Question 29

what are the different phases of react component’s lifecycle?

Answer 29

initial rendering, updating(responds to changes in state), unmounting

Question 30

what is Redux?

Answer 30

an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces

Question 31

Which hook returns a pair with the current state value and a function that lets you update it?

Answer 31

useState

Question 32

______ are functions that let you “hook into” React state and lifecycle features from function components.

Answer 32

Hooks

Question 33

T/F

Hooks don’t work inside classes

Answer 33

True

Question 34

Which hook adds the ability to perform side effects from a function component?

Answer 34

useEffect

Question 35

Which hook serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount?

Answer 35

useEffect

Question 36

A component calling _______ (hook) will always re-render when the context value change.

Answer 36

useContext

Question 37

When should useContext be used?

Answer 37

to share data that can be considered global for a tree of react components

Question 38

When using useContext what steps should be taken? (5)

Answer 38

1. import createContext
2. call createContext() save to a variable and export
3. context provider with a value attribute (top of tree)
4. import useContext (where context is needed)
5. call useContext(context argument)

Question 39

What arguments are passed when calling useEffect ?

Answer 39

arrow function and optional array of dependencies

Question 40

How do you pass data from child to parent?

Answer 40

1. Create a callback function in parent and empty state
2. Pass the function as a prop to the child component
3. Set the data using the useState hook.