React

Question 1

What is React?

Answer 1

A JavaScript library for creating user interfaces

Question 2

What is a React element?

Answer 2

An object that describes what the DOM should look like

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render

Keep in mind React takes over the whole DOM

Question 4

What is JSX?

Answer 4

A syntax extension used in JavaScript, JSX produces React “elements”

Question 5

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

Answer 5

Because JSX will be called into React.createElement and therefore must be in scope

<h1></h1>

in React actually means -> React.createElement

Question 6

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

Answer 6

Using babel-loader and the @babel/plugin-transform-react-jsx plugin

Question 7

What is a React component?

Answer 7

Similar to JavaScript functions, they accept 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 FunctionName(props) {
   return elementChildrenContent, {props.name};
}

props is optional

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.createRoot(document.getElementById(‘root’));

root.render(element);

Question 10

What are props in React?

Answer 10

A JavaScript object

Children and attributes gathered into this object

Question 11

How do you pass props to a component?

Answer 11

’ < componentName propName = propValue / >’

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

Surround it with curly braces

Question 13

How do you create “class” component in React?

Answer 13

class ClassName extends React.Component {
   render( ) {
      return ' < React element type > ' React children 
      { this.props.name } '  ' ;
   }
}

Question 14

How do you access props in a class component?

Answer 14

this

Question 15

How does extends work?

Answer 15

Used in class declarations or expressions that creates a child class of another class

Question 16

What is the syntax for extends?

Answer 16

class ChildClass extends ParentClass

Question 17

How does super work?

Answer 17

Used to access and call functions from an object’s parent

Question 18

What is the syntax for super?

Answer 18

super( [ arguments ] );

super.functionOnParent( [ arguments ] );

Question 19

What is the purpose of state in React?

Answer 19

Represents the current status of the component

Keeps track of values that change over time

Question 20

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

Answer 20

As props to child components

Question 21

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

Answer 21

Map( )

Question 22

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

Answer 22

A string that uniquely identifies a list item among its siblings, typically an ID

Question 23

What are controlled components?

Answer 23

A form element whose value is controlled by React

Question 24

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

Answer 24

The result of the constructor’s method that controls the mutable state and the value

Question 25

When does React call a component’s componentDidMount method?

Answer 25

Immediately after a component is mounted (inserted into the tree).
- Initialization that requires DOM nodes should go here

Constructor occurs 1 time, render occurs, and then componentDidMount occurs once after one successful render occurs

Examples of this could be:
- A subscription setup

Question 26

Name three React.Component lifecycle methods.

Answer 26

constructor( )
render ( )
componentDidMount( )

Question 27

How do you pass data to a child component?

Answer 27

Pass a prop

Question 28

What is the component lifecycle?

Answer 28

The process in which a component runs its code

1. Constructor is ran first and only once in the component lifecycle
2. Render method gets called with initial state and its props being passed,
3. componentDidMount method (optional) gets called after first successful render
4. Event listeners and set states occur
5. Render method runs again
6. componentDidUpdate method gets called after every render
7. componentWillUnmount is used when DOM elements are to be removed (example view swapping)