React

Question 1

What is React?

Answer 1

a JS library for building UI

Question 2

What is a react element?

Answer 2

Object

Question 3

How do you mount a React element to the DOM

Answer 3

Query select the element to attach it too, createRoot method and then the render method.

Question 4

What is Babel?

Answer 4

• A javascript compiler, takes new JS to convert it backwards.

Question 5

What is a plug in?

Answer 5

• An add-on that adds a special feature to a program

Question 6

• What is a Webpack loader?

Answer 6

• Transformations applied to the source code of a module

Question 7

How to make Babel and Webpack work together

Answer 7

By using webpack, babel and babel-loader to link the two.

Question 8

What is JSX?

Answer 8

JSX is a syntax extension to JS, it produces react elements

Question 9

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

Answer 9

Because the compiled output calls react.createElement()

Question 10

how can you make webpack and Babel work together to convert JSX into valid JS?

Answer 10

Babel loader and the transform-react-jsx plug in

Question 11

what is a react component?

Answer 11

Components let you split the UI into independent, reusable pieces and think about each piece in isolation

Question 12

how do you define a function component in React

Answer 12

start with a capital letter, optional props parameter, it has to return react element.

Question 13

How do you mount a component to the DOM?

Answer 13

Create a react element from a component and pass it to the render method of the root object.

Question 14

what are props in React?

Answer 14

Object properties used to pass data from one component to another

Question 15

How do you pass props to a component?

Answer 15

Type the react element, type the props which look like attributes, if its not a string use curly brackets

Question 16

how do you write JS expressions in JSX?

Answer 16

wrap in curly brackets

Question 17

How do you create class component in React?

Answer 17

Class ClassName extends React.Component {
render() {}
}

Question 18

How do you access props in a class component

Answer 18

this.props

Question 19

What are controlled components?

Answer 19

the values of the inputs are stored in the state of the components

Question 20

What two props do you need to pass to an input to be considered controlled?

Answer 20

value and onChange

you dictate with the react state what the value of the input should be.

Question 21

• What is the purpose of state in React?

Answer 21

• Keeps track of values that change over time

Question 22

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

Answer 22

• As a prop, the prop name is the event you are listening for. The JavaScript expression containing the function.

Question 23

• WhatArraymethod is commonly used to create a list of React elements?

Answer 23

• Map

Question 24

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

Answer 24

• The ID from your data

Question 25

• What doesfetch()return?

Answer 25

• It returns a promise for the response

Question 26

• What is the default request method used byfetch()?

Answer 26

• Get

Question 27

• How do you specify the request method (GET,POST, etc.) when callingfetch?

Answer 27

• Give it a second argument of an object containing the method to use.

Question 28

• When does React call a component’scomponentDidMountmethod?

Answer 28

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

Question 29

• Name three React.Component lifecycle methods

Answer 29

• Constructor, render, componentDidUpdate, componentDidMount.

Question 30

• How do you pass data to a child component?

Answer 30

• Pass a prop as a JS expression.