React

Question 1

What is React?

Answer 1

A JavaScript library for building UI

Question 2

What is a React element?

Answer 2

An Object with properties representing a component

Question 3

How do you mount a React element to the DOM?

Answer 3

You call the render method off of the root object (which could be a div you queried for) and pass in the created React element.

Question 4

What is a React component?

Answer 4

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Question 5

How do you define a function component in React?

Answer 5

You name it with a capitalized first letter and have it return JSX

Question 6

How do you mount a component to the DOM?

Answer 6

You call the render function on the root with the desired component being passed into it.

Question 7

What are props in React?

Answer 7

They are the properties of the react element/component.

Question 8

How do you pass props to a component?

Answer 8

You contain the props within curly ({props.propertyName}) braces. Each function component can be passed exactly one props object!

Question 9

How do you write JavaScript expressions in JSX?

Answer 9

You would contain the expression within curly ({}) braces.
(ex.) <p>2 + 2 is...{2+2}</p>

Question 10

What are controlled components?

Answer 10

A component where the state controls/is the source of the input data

Question 11

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

Answer 11

value and onChange

Question 12

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

Answer 12

Array.map() and Array.filter()

Question 13

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

Answer 13

A unique identifier to the data (not based off say, index in array, due to possibility of data mutation)

Question 14

What is a React Effect?

Answer 14

A section of code run after every render, mainly used to synchronize React with external systems.

Question 15

When should you use an Effect and when should you not use an Effect?

Answer 15

When you need the React component to interact with a non-React system in some way one should use an Effect. One does not need an Effect if attempting to change data while rendering.

Question 16

When do Effects run?

Answer 16

After the component mounts to the DOM, or when one of the dependencies changes.

Question 17

What function is used to declare an Effect?

Answer 17

useEffect(fn, [dependencies]) with dependencies being optional

Question 18

What are Effect dependencies and how do you declare them?

Answer 18

They are declared in the useEffect function call as the second argument. They allow the effect to only be run when certain values passed as a dependency change.

Question 19

How do you clean up from an Effect?

Answer 19

You would return a function that undoes what the effect did, such as returning a clearInterval after setting one in the Effect.

Question 20

When does the cleanup function fire?

Answer 20

Before the effect runs the next time and during the unmount.