REACT

Question 1

What is React?

Answer 1

JS Library for building User Interfaces

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 the dom for the root

reactDOM.render(element, container, callback)

Question 4

What is Babel?

Answer 4

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Question 5

What is a Plug-In?

Answer 5

Software component that adds a specific feature to an existing computer program

Question 6

What is a Webpack loader?

Answer 6

transformation s that are applied to the source code of a module. They allow you to pre-process files as you import and “load” them.

Question 7

How can you make Babel and Webpack work together?

Answer 7

Install babel Loader

Question 8

What is JSX?

Answer 8

Syntax extension of JavaScript, allows us to write HTML in react, makes it easier to write and add HTML in React. Provides a visual aid when working with UI inside the javascript code.

Question 9

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

Answer 9

JSX complies into calls to React.createElement, react library must always be in scope from your JSX code.

Question 10

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

Answer 10

Use babel loader

Install babel/plugin-transform-react-jsx

Question 11

What is a React Component?

Answer 11

Independent, reusable bits of code, serves the same purpose of Javascript functions, but works in isolation and returns HTML

Question 12

How do you define a function component in React?

Answer 12

Function functionName(props){ return react element}

Class functionName extends React.Component {render() { return react element}}

Question 13

How do you mount a component to the DOM?

Answer 13

Query the DOM for the root

Assign the component to a const variable, (
root.render(variableName)

Question 14

What are props in React?

Answer 14

Properties in react and used for passing data from one component to another

Question 15

How do you pass props to a component?

Answer 15

Prop.name

propertyName = {}
propertyName = 'string'

Question 16

How do you write Javascript expressions in JSX?

Answer 16

Wrap them with curly braces

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 object

Question 19

What is the purpose of state in React?

Answer 19

keep track of values that will change over time

Question 20

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

Answer 20

As a prop , whatever event = {this.method}

Question 21

What are controlled components?

Answer 21

Input value controlled by React that renders a form and also controls what happens

Question 22

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

Answer 22

Value and onChange

Question 23

What Array method 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

Use IDs from your data as keys, when you dont have stable IDs, you may use the item index as a key as a last resort.

Question 25

When does React call a component’s componentDidMount method?

Answer 25

After render, after react updates DOM and refs and before updating

Question 26

Name three React.Component lifecycle methods.

Answer 26

componentDidMount(), componentDidUpdate(), componentWillUnmount(), constructor(), render()

Question 27

How do you pass data to a child component?

Answer 27

props