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

Question 3

How do you mount a React element to the DOM?

Answer 3

reactDom.render(Element, Container[, callback])

Question 4

What is JSX?

Answer 4

A syntax extension to JavaScript.

Question 5

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

Answer 5

Because JSX compiles into calls to React.createElement, the React library must also be in scope from the JSX code.

Question 6

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

Answer 6

install the babel-loader as a devDependency.

add the plugin @babel/plugin-transform-react-jsx in the

Question 7

What is a React component?

Answer 7

It is a “function” or “class” that accepts 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 keyword

Name (must start with capitalized letter)

(props)

return JSX

Question 9

How do you mount a component to the DOM?

Answer 9

Assign the return of the component to a variable.

Call the render method of the ReactDom object

Pass the variable containing the component as the first argument in the render method then query the DOM for the element you are mounting the component to.

Question 10

What are props in React?

Answer 10

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

Question 11

How do you pass props to a component?

Answer 11

Pass it as an argument when the component is created?

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

Surround it with curly braces.

Question 13

How do you create a “class” component in React?

Answer 13

class keyword followed by the name of the component followed by extends. Then call the Component method of the React object followed by curly braces. Define the render() method followed by opening curling braces and return the JSX.

There are other options we haven’t gone over yet.

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

To store property values that belong to components. When the state changes the component re-renders.

Question 16

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

Answer 16

add the corresponding prop/value pair to the element being “created”

The prop name has to start with on and must be in camelCase.

Question 17

What are controlled components?

Answer 17

When the React component that renders a form also controls what happens in that form at the same time.

Question 18

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

Answer 18

value prop and the on change prop.

Question 19

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

Answer 19

Map()

Question 20

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

Answer 20

A unique ID between the siblings, preferably not the index.