React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

An object that describes how the DOM should look

Question 3

What is Babel?

Answer 3

Babel is a JavaScript compiler mainly used to convert ES2015+ code into backward compatible versions for older browsers.

Question 4

What is a Plug-in?

Answer 4

A software component that adds a specific feature to an existing program

Question 5

What is a Webpack loader?

Answer 5

Transformations applied to modules. Allows you to preprocess files and perform other tasks during load.

Question 6

How can you make Babel and Webpack work together?

Answer 6

Install them as dependencies and add webpack.config.js that calls the babel plugins.

Question 7

What is JSX?

Answer 7

JavaScript Extension. JSX provides syntactic sugar for the React.createElement function, so you can call it with fewer lines of code.

Question 8

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

Answer 8

React.createElement function is needed to render elements in JSX.

Question 9

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

Answer 9

Install webpack, webpack-cli, babel loader, babel/core, babel/plugin-transform-react-jsx. Babel/plugin-transform-react-jsx then gets added to webpack.config.js and transforms JSX to valid JavaScript upon build.

Question 10

What is a React component?

Answer 10

A function that return React elements

Question 11

How do you define a function component in React?

Answer 11

Create a function with a return statement that has JSX in it.

Question 12

How do you mount a component to the DOM?

Answer 12

Call ReactDOM render function and pass in the component and DOM node.

Question 13

What are props in React?

Answer 13

Props are properties or children passed to a React component

Question 14

How do you pass props to a component?

Answer 14

In the custom React tag add the name of the props = value

Question 15

How do you write JavaScript expressions in JSX?

Answer 15

Place it in curly braces within the tags.

Question 16

How do you create “class” component in React?

Answer 16

class extends React.Component

Question 17

How do you access props in a class component?

Answer 17

this.props

Question 18

What is the purpose of state in React?

Answer 18

React objects are immutable and must be re-rendered if you want the elements to change. Add state so that React only renders when a change happens.

Question 19

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

Answer 19

Pass the callback function in curly braces to the event prop.

Question 20

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

Answer 20

map

Question 21

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

Answer 21

id

Question 22

What are controlled components?

Answer 22

Elements with their own state that are controlled by the React element’s state

Question 23

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

Answer 23

onChange, value

Question 24

When does React call a component’s componentDidMount method?

Answer 24

Right after the component gets added to DOM

Question 25

Name three React.Component lifecycle methods.

Answer 25

componentDidMount, componentDidUpdate, componentWillUnMount, constructor, render

Question 26

How do you pass data to a child component?

Answer 26

pass a prop