React

Question 1

What is React?

Answer 1

React is a JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

A React element gets returned from React components, it is an object that virtually describes the DOM nodes a component represents.

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, target)

Question 4

What is JSX?

Answer 4

JSX is an extension of JavaScript syntax used by React to allow for HTML-like text to exist in JavaScript code.

Question 5

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

Answer 5

Because React elements written in JSX are syntactic sugar for React.createElement calls.

Question 6

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

Answer 6

Ensure that @babel/plugin-transform-react-jsx is listed as a Babel plugin in webpack.config.js

Question 7

What is a React component?

Answer 7

React components are reusable pieces of code that accept a props argument and return React elements.

Question 8

How do you define a function component in React?

Answer 8

function Comp(props) { return <h1>example</h1>; }

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render(reactElement, domTarget);

Question 10

What are props in React?

Answer 10

Props are properties that get passed into React components and represent the properties of a React element.

Question 11

How do you pass props to a component?

Answer 11

Specify them using key=”value” pairs in the opening tag of a React element representing a user-defined component.

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

Put them in curly braces.

Question 13

How do you create “class” component in React?

Answer 13

class ComponentName extends React.Component { render() { return } }

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

state is an object in a React component that keeps track of the state of a component and can be updated upon certain events.

Question 16

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

Answer 16

Specify an event handler as the value of an OnEvent prop in a React element tag.

Question 17

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

Answer 17

.map()

Question 18

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

Answer 18

A unique string for each item in the list.

Question 19

What are controlled components?

Answer 19

An input form element whose value is controlled by the React component’s state, making it the “single source of truth”.

Question 20

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

Answer 20

value={this.state.value} and onChange={this.eventHandler}

Question 21

When does React call a component’s componentDidMount method?

Answer 21

componentDidMount is called after constructor() and render()

Question 22

Name three React.Component lifecycle methods.

Answer 22

constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount

Question 23

How do you pass data to a child component?

Answer 23

Through the props.