REACT Flashcards

1
Q

What is Webpack?

A

Webpack, grabs only the files the web browser needs and bundles them for quick easy use for the browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the advantage of using Webpack (or a similar bundler)?

A

Make things quicker and less downloading.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is Babel?

A

Converts modern javascript into older javascvript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the advantage of using Babel (or a similar transpiler)?

A

Allows us to develop javascript with modern rules but still allow older browsers to run.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is React?

A

A framework to create reusable and interactive components.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a React element?

A

Custom written DOM element or group of.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do you mount a React element to the DOM?

A

ReactDom

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is JSX?

A

JSX allows you to write, html in your javascript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How does React use JSX to render components?

A

React runs all the fance DoM javascript methods.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is a React component?

A

A html element or group of elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do you define a component in React?

A

In a function with uppercase name that returns JSX.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

By calling a function that returns JSX and is capital letters.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

Through it’s props

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the naming convention for event handlers?

A

handleWhatever

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are some custom event handler props a component may wish to define?

A

Whatever they need?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the naming convention for custom event handler props?

A

onClick

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are hooks in React?

A

Any function starting with use that run while React is rendering.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are the “Rules of Hooks”?

A

They must be called at the top level of a components or inside other hooks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the purpose of state in React?

A

Maintain a variable as a state variable through renders.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

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

A

Local variable do not persist through a render and changes to a variable don’t trigger a render. Also to make a component reusable you need a variable for each one.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

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

A

Triggers a render, and updates a ‘cache’ or future value of the variable for after the render.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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

A

After the render is done.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

How do controlled components differ from uncontrolled components?

A

The parent controls the child, or uncontrolled does it itselfs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are some advantages of using uncontrolled components?

A

Don’t have to maintain states, can be a lot of work with a lot of fields.

25
What are some advantages of using controlled components?
Allows interactivity with other components.
26
Which style do you prefer?
Controlled.
27
What two props must you pass to an input for it to be "controlled"?
A value and a onChange prop.
28
What are some popular npm packages for creating forms in React?
React Hook Form, Formik, and React Final Form.
29
When would we want to create a list of React components?
When you need dynamic lists. You want to organize your lists or filter data.
30
Why is it important for React components to be data-driven?
Make reusable components.
31
Where in the component code would a list of React components typically be built?
32
What Array method is commonly used to create a list of React components?
array.map
33
Why do components in a list need to have unique keys?
So that we can make the list dynamic to remove and change and reorder the list and let react track them.
34
What is the best value to use as a "key" prop when rendering lists?
An ID attached to the data.
35
When is a component "mounted" to the DOM?
When a component appears on the page the first time.
36
What is a React Effect?
A block of code that runs after the page renders.
37
When should you use an Effect and when should you not use an Effect?
When your running code outside of React.
38
When do Effects run?
After the page renders. or if its dependencies change.
39
What function is used to declare an Effect?
useEffect
40
What are Effect dependencies and how do you declare them?
To help tell an effect to run. pass them as a second argument as an array.
41
Why would you want to clean up from an Effect?
Release resources from the effect.
42
How do you clean up from an Effect?
Resetting variable, closing timers.
43
When does the cleanup function run?
After the effect runs.
44
How can useEffect be used to load data for a component?
Loading data after everything else has been render.
45
What browser function can be used to make HTTP requests to a server in React?
fetch.
46
How do you use useEffect to load component data just once when the component mounts?
Set the the dependencies to []. An empty array.
47
How do you use useEffect to load component data every time the data key changes?
Set the data key as a dependency.
48
In a large-scale production app, what are some better alternatives for loading and managing backend data?
Packages that manage it for you.
49
What is the purpose of React "context"?
To share data with different components from a common ancestor without having to pass props at each level
50
What values can be stored in context?
Objects? Any data.
51
How do you create context and make it available to the components?
create a context and wrap around the parent component you want to hold the context.
52
How do you access the context values?
assign the values from useContext to a variable in the component after passing the context to the
53
When would you use context? (in addition to the best answer: "rarely")
Managing user login data/permissions, or a common color theme i.e. user switched to dark mode.
54
What is a React custom hook?
A hook that you write, that starts with use and should probably call other hooks.
55
When are custom hooks useful? When are they not required?
To reduce code duplication. If it doesn't call another hook it doesn't need to be another hook.
56
What is the syntax (or naming convention) for writing a custom hook?
Write a function that starts with use*****
57
How do you call a custom hook?
58
When do custom hooks execute?