Thinking in React

Question 1

What’s a functional component?

Answer 1

A functional component is a TS/JS function that takes props and returns JSX

Question 2

How does JSX work?

Answer 2

JSX works by wrapping functioning JS in syntactic sugar, giving it the appearance of HTML while returning valid JS.

Question 3

What’s the difference between a prop & a state?

Answer 3

A state is data managed in a component, it’s mutable & private. A prop is data passed into a component from a parent, it’s immutable by the child.

Question 4

What is Declarative Rendering Logic?

Answer 4

A programming paradigm where you declare what the UI should look like based on the current state, and the framework handles the how of updating the UI

Question 5

What are the main conditional rendering operators?

Answer 5

The ternary operator ( ?: ) and the LOGICAL AND operator ( && )

Question 6

How do you handle events?

Answer 6

You have a camel case function that you pass in to the event handler without calling it.

<button onClick={turnOn}>

Question 7

How do foundational hooks relate to declarative rendering logic?

Answer 7

Declarative rendering logic describes what the UI should render, foundational hooks allow the states we render to be dynamic.

Question 8

What should I remember about state hooks? (What can’t you do to the state variable, and what should you do when updating the state based on the old state)

Answer 8

1. You can’t modify the state variable directly
2. When updating the state based on the old state, you should pass in an update function.