React 230327

Question 1

What is React?

Question 2

What is a React element?

Answer 2

a component (see what component is)

Question 3

How do you mount a React element to the DOM?

Answer 3

this means to attach/insert a component into the dom tree

you mount by calling:
ReactDOM.render(foo, domContainer);

Question 4

What is JSX?

Answer 4

a way to write html in react

Question 5

How does React use JSX to render components?

Question 6

What is a React component?

Answer 6

a JavaScript function that you can sprinkle with markup

Question 7

How do you define a component in React?

Answer 7

In the return statement of a function whose name is capitalized, and which can be exported

Question 8

How do you mount a component to the DOM (or “render” a component)?

Question 9

What are props in React?

Answer 9

a way to pass info using what in html is like an attribute

Question 10

How do you use props in a component?

Question 11

How do you pass props to a component?

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

within curly braces

Question 13

What are hooks in React?

Answer 13

a function starting with “use” then an uppercase letter,

e.g. useState

Question 14

What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)

Answer 14

-declare at top

-don’t use inside conditionals/loops

-use “use”

-can only be called in react components and other hooks

Question 15

What is the purpose of state in React?

Answer 15

it holds the data between function calls

Question 16

Why can’t we just maintain state in a local variable?

Answer 16

because it would be reset when funcion calls

Question 17

What two actions happen when you call a state setter function?

Answer 17

-triggers react to re-render

-it keeps a cashe of state value

Question 18

When does the local state variable get updated with the new value?

Answer 18

on the re-render

Question 19

How do controlled components differ from uncontrolled components?

Answer 19

if it’s controlled, the parent

if it’s uncontrolled, … ?

Question 20

What are some advantages of using uncontrolled components?

Answer 20

don’t have to use state,

it’s simpler!

Question 21

What are some advantages of using controlled components?

Answer 21

it’s simpler to get the values out

Question 22

Which style do you prefer?

Answer 22

“it’s really just a preference”

Question 23

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

Answer 23

value and …

on change?

Question 24

What are some popular npm packages for creating forms in React?

Question 25

Where in the component code would a list of React components typically be built?

Answer 25

inside the function body

Question 26

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

Answer 26

map()

Question 27

Why do components in a list need to have unique keys?

Answer 27

when there are changes to list item content, you need to know which one to edit!

Question 28

When is a component "mounted" to the DOM?

Answer 28

When the page renders (when the component appears for the first time) and if a dependency changes

Question 29

What is a React Effect?

Answer 29

lets you synchronize a component with an external system. when dependencies (reactive values) change, code runs. if you don't specify dependencies, all reactive values will be considered dependencies. *double check this part (above) when components and children are rendered, useEffect runs

Question 30

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

Answer 30

If your Effect only adjusts some state based on other state, you might not need an Effect. In this case, try to use

Question 31

When do Effects run?

Answer 31

when dependencies (reactive values) change, Effects runs. if you don't specify dependencies, all reactive values will be considered dependencies.

Question 32

What function is used to declare an Effect?

Answer 32

useEffect()

Question 33

What are Effect dependencies and how do you declare them?

Answer 33

when these dependencies run, effects run. they are declared as the second argument

Question 34

Why would you want to clean up from an Effect?

Answer 34

to release resources that have been allocated inside useEffect. that is, to stop wasting resources

Question 35

How do you clean up from an Effect?

Question 36

When does the cleanup function run?

Answer 36

when the compoment is dismounted, before the effect is called again