React Flashcards

1
Q

What is React?

A

A framework that uses components and state to only update sections of a site that change without rerendering other segments. Helps us build and manage UIs.

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

What is a React element?

A

An object. These elements make up components.

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

How do you mount a React element to the DOM?

A

Use the .render method attached to the object to render to, passing in the node to render as an argument

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

What is JSX?

A

A syntax extension to JavaScript that describes what the UI should look like.

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

Why must the React object be imported when authoring JSX in a module?

A

JSX compiles into React.createElement —> so you need React.

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

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

Set up the transform-react-JSX plugin for babel in your webpack.config.js file and build the project with webpack.

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

What are components?

A

Independent and reusable bits of code that define portions of your UI.

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

How do you define a function component in React?

A

Use the function keyword, ‘TitleCase’ function name, {return <element> }</element>

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

All components first letter must be…

A

Capitalized —> to distinguish from other actual html elements when you render it

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

How do you mount a component to the DOM?

A

Use the render method attached to the root object passing in the component you’d like to render as an argument.

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

When importing ReactDOM —> it should always be form…

A

‘react-dom/client’

This is because there is a server side react-DOM, we don’t want that one

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

What are props in React?

A

They’re objects —> props is short for properties.

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

How do you pass props to a component?

A

Pass it as an argument to the function that creates that component. They’re passed in by the attributes on the component itself.

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

How do you write JavaScript expressions in JSX?

A

Surround the expression in { }

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

How do we add the watch script for webpack?

A

Under scripts —> “webpack —watch —mode=development —devtool=source-map

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

How do you create class components in React?

A

class “ClassName” extends React.Component { render( ) {render-code-here} }

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

How do you access props in a class component?

A

Use this.props.”property-to-access”

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

What is the purpose of state in React?

A

It’s for updating the UI after your initial render.

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

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

A

Give the event element the attribute event-listener-name: function-to-call

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

Why can we never call this.setState( ) from render?

A

Render calls setState, which will call render, which will loop infinitely forever

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

Is setState synchronous or asynchronous?

A

It’s asynchronous —> if you try to use state right after setState( ) it hasn’t set the state yet

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

To check the most updated version of state and render, console.log the most current version in…

A

Render( )

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

Anytime you add a method to a React class make sure to check if you need to…

A

Bind this in the constructor~!

24
Q

What are controlled components?

A

React controls and keeps track of user input on form elements (they usually maintain thru own state)

This is convenient because you don’t have to scrape the form information —> it’s already in react state

You can also modify the onChange handlers like prevent users from entering wrong characters, set max-length on passwords, etc.

25
Q

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

A

Value and onChange. (You can also pass onBlur —> when cursor leaves an input)

onBlur / onFocus are good for showing error messages as user goes thru the form

26
Q

Beyond form controls, where are controlled components useful?

A

For onmove events, you can track the position of the mouse cursor

27
Q

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

A

The map method.

28
Q

Why do we use map?

A

It’s a lot cleaner and convenient.

29
Q

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

A

Data-ids are a good choice —> indexes are a last resort (the order could change). Any string that uniquely id’s a list item among siblings.

30
Q

Why do we use keys?

A

Reconciliation —> It prevents React from mutating over things it doesn’t need to.

31
Q

Two things for when we need a class component

A

State and lifecycle methods

32
Q

For onClick events, how can we pass arguments into whatever is handing the event?

A

Use onClick = { ( ) => this.handleClick(topic.id) }

Anything passed from handleClick can be accessed from the handleClick( ) method on the parent class

33
Q

When does React call a component’s componentDidMount method?

A

It’s invoked immediately after render is called for the FIRST time (only once)

34
Q

Name three React.Component lifecycle methods.

A

Render, componentDidMount, componentDidUpdate

35
Q

How do you pass data to a child component?

A

Use props — but be careful! B/c fetch is asynchronous, the child won’t have access to the props immediately

36
Q

What are React hooks?

A

They’re functions that allow you to ‘hook into’ React state and lifecycle features from function components.

37
Q

Do hooks work within React classes?

A

Nope.

38
Q

React’s state hook is called…

A

useState()

39
Q

What does calling useState do?

A

It declares a ‘state variable’. This allows us to preserve values between function calls (similar to class state)

40
Q

What do we pass to useState as an argument?

A

The only argument is the initial state.

41
Q

What does useState return?

A

It returns a pair of values: the current state and the function that updates it. I.e —> const [count, setCount] returns the count state and the function setCount(‘count-to-set’)

42
Q

Why square brackets for useState?

A

It’s array destructuring!

43
Q

Regarding useState and destructuring, what is the equivalent 3 lines of code for

const [fruit, setFruit] = useState(‘banana’)

A

Var fruitStateVariable = useState(‘banana’)
Var fruit = fruitStateVariable[0] (‘banana’)
Var setFruit = fruitStateVariable[1] (function setFruit)

44
Q

What are the two kinds of side effects in React components?

A

Those that don’t require cleanup, and those that do.

45
Q

What are some examples of effects without cleanup?

A

Network requests, manual DOM mutations, and logging. We run them and then forget about them.

46
Q

What does useEffect do?

A

You’re telling react that your component needs to do something (use some effect) after render. React remembers the function you passed to it (the effect) and can call it later.

47
Q

Why is useEffect called inside a component?

A

Placing it inside the component lets us access state variables (or any props) directly from the effect.

48
Q

Does useEffect run after every render?

A

Yup! By default it runs after the first render AND after every update.

49
Q

Instead of thinking in terms of “mounting” and “updating” — with useEffect think in terms of…

A

“After render”

50
Q

Is the function passed to useEffect the same on every render?

A

Noooo — it’s different. This allows us to get the value inside the effect without worrying about it getting stale. Each effect ‘belongs’ to a particular render.

51
Q

What about effects with cleanup — what’s an example of those?

A

Subscriptions!

52
Q

We typically setup subscriptions in _______, and clean up in __________.

A

Setup: componentDidMount

Clean-up: componentWillUnmount

53
Q

How do we run cleanup from useEffect?

A

Return a function from the effect with the cleanup!

54
Q

When does React execute the cleanup function in useEffect?

A

When the component unmounts.

55
Q

In some cases — cleaning up or applying the effect after every render is a no-no. How do we fix this with useEffect?

A

Pass an array as the optional second argument, and put any dependencies in that array. Make sure the array includes ALL values from scope (like props and state) that change over time and are used by the effect or those values will get stale on re-render!