React

Question 1

What is React?

Answer 1

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.

Question 2

What is a React element?

Answer 2

An object. These elements make up components.

Question 3

How do you mount a React element to the DOM?

Answer 3

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

Question 4

What is JSX?

Answer 4

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

Question 5

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

Answer 5

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

Question 6

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

Answer 6

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

Question 7

What are components?

Answer 7

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

Question 8

How do you define a function component in React?

Answer 8

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

Question 9

All components first letter must be…

Answer 9

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

Question 10

How do you mount a component to the DOM?

Answer 10

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

Question 11

When importing ReactDOM —> it should always be form…

Answer 11

‘react-dom/client’

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

Question 12

What are props in React?

Answer 12

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

Question 13

How do you pass props to a component?

Answer 13

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

Question 14

How do you write JavaScript expressions in JSX?

Answer 14

Surround the expression in { }

Question 15

How do we add the watch script for webpack?

Answer 15

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

Question 16

How do you create class components in React?

Answer 16

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

Question 17

How do you access props in a class component?

Answer 17

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

Question 18

What is the purpose of state in React?

Answer 18

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

Question 19

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

Answer 19

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

Question 20

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

Answer 20

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

Question 21

Is setState synchronous or asynchronous?

Answer 21

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

Question 22

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

Answer 22

Render( )

Question 23

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

Answer 23

Bind this in the constructor~!

Question 24

What are controlled components?

Answer 24

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.

Question 25

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

Answer 25

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

Question 26

Beyond form controls, where are controlled components useful?

Answer 26

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

Question 27

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

Answer 27

The map method.

Question 28

Why do we use map?

Answer 28

It’s a lot cleaner and convenient.

Question 29

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

Answer 29

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.

Question 30

Why do we use keys?

Answer 30

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

Question 31

Two things for when we need a class component

Answer 31

State and lifecycle methods

Question 32

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

Answer 32

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

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

Question 33

When does React call a component’s componentDidMount method?

Answer 33

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

Question 34

Name three React.Component lifecycle methods.
◦

Answer 34

Render, componentDidMount, componentDidUpdate

Question 35

How do you pass data to a child component?

Answer 35

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

Question 36

What are React hooks?

Answer 36

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

Question 37

Do hooks work within React classes?

Answer 37

Nope.

Question 38

React’s state hook is called…

Answer 38

useState()

Question 39

What does calling useState do?

Answer 39

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

Question 40

What do we pass to useState as an argument?

Answer 40

The only argument is the initial state.

Question 41

What does useState return?

Answer 41

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’)

Question 42

Why square brackets for useState?

Answer 42

It’s array destructuring!

Question 43

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

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

Answer 43

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

Question 44

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

Answer 44

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

Question 45

What are some examples of effects without cleanup?

Answer 45

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

Question 46

What does useEffect do?

Answer 46

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.

Question 47

Why is useEffect called inside a component?

Answer 47

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

Question 48

Does useEffect run after every render?

Answer 48

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

Question 49

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

Answer 49

“After render”

Question 50

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

Answer 50

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.

Question 51

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

Answer 51

Subscriptions!

Question 52

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

Answer 52

Setup: componentDidMount

Clean-up: componentWillUnmount

Question 53

How do we run cleanup from useEffect?

Answer 53

Return a function from the effect with the cleanup!

Question 54

When does React execute the cleanup function in useEffect?

Answer 54

When the component unmounts.

Question 55

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

Answer 55

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!