React Flashcards

1
Q

What is Webpack?

A

It is a static module bundler for modern JavaScript applications (takes all the files and bundles them into one for your application)

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

It internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

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

What is Babel

A

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

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

So you can work on old applications using newer code/methods

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

What is React?

A

React is a way to let you build user interfaces out of individual pieces called components.

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

What is a React element?

A

A React element is what gets returned from components (a custom written DOM element)

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

Attaching/Appending/Rendering

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

What is JSX?

A

JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers commonly used in React

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

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(

<React.StrictMode>
<ComponentName></ComponentName>
</React.StrictMode>

);

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

What is a React component?

A

Independent and reusable bits of code

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

With a capital letter, and return a 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 attaching it to the root. calls the function when it sees it wrapped in <>. Takes the result of calling the function and puts it in the DOM.

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

What are props in React?

A

A type of object where the value of attributes of a tag is stored

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

How do you use props in a component?

A

By passing them as an attribute and setting their value as the value of the attribute

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

How do you write JavaScript expressions in JSX?

A

Within curly braces

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

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

A

As an argument/prop

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

What is the naming conventions for event handlers?

A

Event names are written in camelCase

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

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

A

onClick, onSubmit, onChange

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

What is the naming convention for custom event handler props?

A

Usually with the prefix on*

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

What is an eventHandler?

A

A function that occurs when something is activates it

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

What is an eventHandler?

A

A function that occurs when something is activates it

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

What are hooks in React?

A

useState or any other function starting with “use”. Hooks are special functions that are only available while React is rendering.

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

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

A

Only call hooks at the top level. Only call hooks from react functions. Call hooks from react function components. Call hooks from custom hooks.

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

What is the purpose of state in React?

A

To contain data or information about the component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Why can't we just maintain state in a local variable?
It would be gone after it gets re-rendered
26
What two actions happen when you call a state setter function?
It will update the variable and trigger react to render the component again
27
When does the local state variable get updated with the new value?
After useState has been called
28
How do controlled components differ from uncontrolled components?
Controlled components refer to components that have their state and behavior controlled by the parent component
29
What are some advantages of using uncontrolled components?
You don't have to declare state
30
Which style do you prefer?
controlled
31
What two props must you pass to an in put for it to be "controlled"?
useState
32
What are some popular npm packages for creating forms in React?
react final form
33
What are some advantages of using controlled components?
You can have a live search bar. You do things with that individual value
34
When would we want to create a list of React components?
Whenever you need to have lists coming from a database or from a user
35
Why is it important for React components to be data-driven?
So that the only thing that changes is the data
36
Where in the component code would a list of React components typically be built?
Inside the function body
37
What Array method is commonly used to create a list of React components?
.map
38
Why do components in a list need to have unique keys?
Because react need to keep track incase they want to reorder or remove
39
What is the best value to use a "key" prop when rendering lists?
A number, must be in the outer most element
40
What are two ways React components can interact?
Passing properties from a parent component to children components, and by responding Events from children components
41
How can multiple React components share state?
By removing state and passing components to their closest parent and then passing it down to them via props
42
What are the steps to "lift state up"?
43
When would you want to lift state up?
44
When is a component "mounted" to the DOM?
45
What is a React Effect?
46
When should you use an Effect and when should you not use an Effect?
47
When do Effects run?
After the page renders, ands runs as things change
48
What function is used to declare an Effect?
useEffect
49
What are Effect dependencies and how do you declare them?
When an effect should run and declare them in the array
50
Why do you want to clean up from an Effect?
51
How do you clean up from an Effect?
52
When does the cleanup function run?
53
What is the purpose of React "context"?
Allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it. (must be a child)
54
What values can be stored in context?
Information to any component
55
How do you create context and make it available to the components?
import { createContext } from 'react'; export const AppContext = createContext();
56
How do you access the context values?
Through props with the help of useContext method in React
57
When would you use context? (in addition to the best answer: "rarely")
When building large applications
58
What is React custom hooks?
Reusable functions that a React JS software developer can use to add special and unique functionality to the React applications
59
When are custom hooks useful? When are they not required?
When you need to reuse more than a few times
60
What is the syntax (or naming convention) for writing a custom hook?
Starts with the word “use” and may call other Hooks
61
How do you call a custom hook?
Same way as a normal hook
62
When do custom hooks execute?
Every time the component is rendered.