React.js

Question 1

What is React?

Answer 1

A JavaScript library for creating UI.

Question 2

What is a React element?

Answer 2

It describes JavaScript objects that are seen on a webpage.

Question 3

How do you mount a React element to the DOM?

Answer 3

By using the .createRoot() method of the ReactDom object with the element as its argument.

Question 4

What is Babel?

Answer 4

Babel is a toolchain used to convert JavaScript ES6 or later into a backwards compatible version.

Question 5

What is a Plug-in?

Answer 5

A plug-in is a software component (customization) that adds a specific feature to a program.

Question 6

What is a Webpack loader?

Answer 6

A Webpack loader pre-processes files as they are imported. Examples include transforming files from a different language to JavaScript.

Question 7

How can you make Babel and Webpack work together?

Answer 7

The babel-loader package is needed. Webpack bundles modules and Babel transforms code by applying plugins which Webpack will bundle.

Question 8

What is JSX?

Answer 8

A syntax extension of JavaScript that is used be compiled into real JavaScript.

Question 9

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

Answer 9

Although the React object is not visibly used, JSX is compiled into a React element.

Question 10

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

Answer 10

By using the Babel Loader and telling it to use the react-jsx plugin to convert JSX to JavaScript.

Question 11

What is a React component?

Answer 11

A reusable JavaScript function or class that returns React elements represent a section of UI.

Question 12

How do you define a function component in React?

Answer 12

The function keyword followed by a
name with a capitalized first letter, parameter list, and function code block.

Inside the function code block is a React object being returned from the function.

Question 13

How do you mount a component to the DOM?

Answer 13

By creating a root and calling the .render() method of the root object with an argument of one or more react elements.

Question 14

What are props in React?

Answer 14

Props (short for Properties) are arbitrary inputs that describe a React element or object.

Props is an object datatype.

Question 15

How do you pass props to a component?

Answer 15

By adding a prop name and its value to a React element. If the prop value is not a string, then a JavaScript expression can be used instead.

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

By surrounding it in curly braces.

Question 17

How do you create “class” component in React?

Answer 17

The ‘class’ keyword followed by the component’s name, the ‘extends’ keyword, the Component property of the React object, and the curly braces for the class body.

Inside the class body, and prototype method named render is defined with no parameters followed by curly braces for the function code block.

Inside the function code block is an expression being returned from the prototype method.

Question 18

How do you access props in a class component?

Answer 18

By using the ‘props’ property of ‘this’ object inside a JavaScript expression.

Question 19

What is the purpose of state in React?

Answer 19

To hold information about an element or component until an event take place. (???)

A data model of values that change over time.

Question 20

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

Answer 20

By calling the event handler property of ‘this’ object as a JavaScript expression. (???)

As a prop of a React element.

Question 21

What are controlled components?

Answer 21

An input form element whose values are controlled by React.

Question 22

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

Answer 22

The onChange and value props.

Question 23

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

Answer 23

The .map() method.

Question 24

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

Answer 24

A unique identifier as a string.

Question 25

When does React call a component’s componentDidMount method?

Answer 25

Immediately after a component is mounted (inserted into the DOM tree).

Question 26

Name three React.Component lifecycle methods.

Answer 26

constructor(), componentDidMount(), and render().

Question 27

How do you pass data to a child component?

Answer 27

By rendering the child component and passing in the parent component’s state as a prop.