Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

LearningFuze > react.js > Flashcards

react.js Flashcards

1
Q

What is Webpack?

A

it is a “bundler” which basically gathers large amounts of code from js files and npm packages into a single or few files

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

easier to download, remove unused code, makes the code obscure so it is hard for people to decipher

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

What is Babel?

A

it is a transpiler, which translates new code to an older version. so in babel it translates new es6 js code into an older version

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

it allows you to write code in the newer version while still being able to work with older devices and systems

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

What is React?

A

javascript library used for building UIs for web apps

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

What is a React element?

A

it is a component, basically its code that is like a custom 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

by using ReactDOM.createRoot and root.render

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

What is JSX?

A

JavaScript XML is a language that allows developers to write HTML-like code inside of a JS code

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

by using babel to transform the JSX to JS

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

What is a React component?

A

a custom DOM element

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

by defining a function with a capital letter?

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

ReactDOM.render

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

What are props in React?

A

passing information to their child components

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

pass in the props as the parameter as a destructured object

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

How do you pass props to a component?

A

add attributes to the component

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

How do you write JavaScript expressions in JSX?

A

by enclosing them in {}

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

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

A

as one of the props

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

What is the naming convention for event handlers?

A

having a “handle” prefix
(ex. handleClick)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
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
20
Q

What is the naming convention for custom event handler props?

A

having a “on” prefix
(ex. onClick)

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

What are hooks in React?

A

functions that lets you use states in components

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

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

A

hooks starting with use can only be called at the top level of your component or your own hook, you can’t call Hooks inside conditions, loops, or other nested functions

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

What is the purpose of state in React?

A

to manage data within components in between function calls

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

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

A

if it is in a local variable the variable resets after it is run, react doesn’t know that the component’s state has changed

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

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

A

the state is updated and then re-rendered

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

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

A

the next time the useState is called and it is re-rendered

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

How do controlled components differ from uncontrolled components?

A

uncontrolled maintains its own internal state, the input updates its internal state to reflect the new value, and it needs to access the dom directly WHILE controlled components is controlled by the parent of the elements, the values are stored in the component’s state and is updated using event handlers

28
Q

What are some advantages of using uncontrolled components?

A

simpler code, faster rendering

29
Q

What are some advantages of using controlled components?

A

reliable, easy to integrate with api,

30
Q

Which style do you prefer?

A

uncontrolled

31
Q

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

A

value, onChange

32
Q

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

A

react hook form, formik, react final form

33
Q

When would we want to create a list of React components?

A

If you have an array of data that needs to be displayed in a list

34
Q

Why is it important for React components to be data-driven?

A

are able to respond to changes in data more efficiently and accurately, basically the component will automatically re-render with the updated data

35
Q

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

A

in the render method of the parent component

36
Q

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

A

map

37
Q

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

A

because it uses these keys to identify individual components and track their state and updates

38
Q

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

A

a unique identifier for each item in the list, like id

39
Q

What are two ways React components can interact?

A

one way is through props, another is through callbacks

40
Q

How can multiple React components share state?

A

by lift state up

41
Q

What are the steps to “lift state up”?

A

move the state to the parent or closest common ancestor and then update the child to have the state passed as props with event handlers

42
Q

When would you want to lift state up?

A

when multiple components need access to the same state

43
Q

When is a component “mounted” to the DOM?

A

when it appears on the screen for the first time (rendering)

44
Q

What is a React Effect?

A

a function that runs after the component has been rendered, it is used to fetch data(API), update the page, or setting up event listeners

45
Q

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

A

it should be used when managing side effects like fetching data, updating the page, or setting up event listeners and you shouldn’t use it when you don’t need to manage any of these side effects

46
Q

When do Effects run?

A

after the component is rendered

47
Q

What function is used to declare an Effect?

A

the useEffect(), first argument is a callback, and the second argument is an array of dependencies

48
Q

What are Effect dependencies and how do you declare them?

A

Effect dependencies are used to control when an effect should be run in a React functional component

49
Q

Why would you want to clean up from an Effect?

A

to avoid unwanted and unexpected behavior that can occur when you have a state that are no longer needed

50
Q

How do you clean up from an Effect?

A
51
Q

When does the cleanup function run?

A

when the component is unmounted from the DOM

52
Q

How can useEffect be used to load data for a component?

A

giving the data useState an empty array

53
Q

What browser function can be used to make HTTP requests to a server in React?

A

fetch()

54
Q

How do you use useEffect to load component data just once when the component mounts?

A

pass an empty array

55
Q

How do you use useEffect to load component data every time the data key changes?

A

by passing the data key as a dependency

56
Q

In a large-scale production app, what are some better alternatives for loading and managing backend data?

A

you can use reactQuery and Vercel SWR

56
Q

What is the purpose of React “context”?

A

so that you can pass information from the parent component to multiple children once

57
Q

What values can be stored in context?

A

data

58
Q

How do you create context and make it available to the components?

A

const MyContext = createContext()

59
Q

How do you access the context values?

A

function Component() {
const myValue = useContext(MyContext);
…
}

60
Q

When would you use context? (in addition to the best answer: “rarely”)

A

when data needs to be shared between components at different levels of the component tree

61
Q

What is a React custom hook?

A

custom function that starts with ‘use’ prefix that allows you to reuse stateful logic between different components

62
Q

When are custom hooks useful? When are they not required?

A

when we need a reusable hook for multiple components

63
Q

What is the syntax (or naming convention) for writing a custom hook?

A

‘use’ prefix

64
Q

How do you call a custom hook?

A

if the custom hook is ‘useTodo’ than you call it like this:
useTodo();

65
Q

When do custom hooks execute?

A

its executed on every render of the component where they are called

LearningFuze (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions