React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

React elements are plain objects

Question 3

How do you mount a React element to the DOM?

Answer 3

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

breakdown:
const reactH1Element = React.createElement(
  'h1',
  null,
  'Hello, React!'
);

ReactDOM.render(reactH1Element, document.querySelector(‘#root’));

Question 4

What is Babel?

Answer 4

Babel is a JS complier; it 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

a software component that adds a specific feature to an existing computer program.

Question 6

What is a Webpack loader?

Answer 6

Loaders are transformations that are applied to the source code of a module.

Question 7

How can you make Babel and Webpack work together?

Answer 7

install babel-loader and babel plug-ins as dependencies

Question 8

What is JSX?

Answer 8

it provides the syntactic sugar for React.createElement(component,props,children) function

Question 9

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

Answer 9

Since JSX compiles into calls to React.createElement, the React library must also 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

You can have a Babel Loader with the react plugin

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.

they are like JS functions; they accept arbitrary inputs (called “props”) and return React elements.

Question 12

How do you define a function component in React?

Answer 12

Write a javascript function that returns jsx element.

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

Question 13

How do you mount a component to the DOM?

Answer 13

ReactDOM.render(element, container)

Question 14

What are props in React?

Answer 14

they are objects that hold properties of declared key/value pairs

Question 15

How do you pass props to a component?

Answer 15

ComponentName (props)

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object.

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

surrounding the expressions in curly braces

Question 17

How do you create “class” component in React?

Answer 17

class className extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Question 18

How do you access props in a class component?

Answer 18

this.props

Question 19

What is the purpose of state in React?

Answer 19

to keep track of values that changes over time.

Question 20

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

Answer 20

pass a property in the render method.

Question 21

What Array method is commonly used to create a list of React elements?

Answer 21

Array.map()

Question 22

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

Answer 22

string value – anything unique such as an id

Question 23

What are controlled components?

Answer 23

An input form element whose value is controlled by React.

-accepts its current value as a prop, as well as a callback to change that value.

Question 24

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

Answer 24

value, onChange

Question 25

When does React call a component’s componentDidMount method?

Answer 25

after render();

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Question 26

Name three React.Component lifecycle methods.

Answer 26

componentDidMount()
componentDidUpdate()
componentWillUnmount()

Question 27

How do you pass data to a child component?

Answer 27

using props (adding key and values to the props object of the component)