Thinking In React

Question 1

What is Step 1 in Thinking in React?

Answer 1

Break the UI into a component hierarchy

Question 2

How should you approach breaking the UI into a component hierarchy?

Answer 2

1. Draw boxes around every component and subcomponent in the mock you got from the designer
2. SRP (single responsibility principle): A component should ideally do just one thing

Question 3

What are the two types of “model” data in React?

Answer 3

1. props (i.e., properties)
2. state

Question 4

What data type are both props and state in React?

Answer 4

Plain JavaScript objects

Question 5

What is the primary difference between props and state in React?

Answer 5

Props get passed into a component (analogous to a function parameter)
while state is managed within the component only

Question 6

What does it mean to say that props and state are deterministic in React?

Answer 6

The component should generate the exact same output given the same combination of props and state. If the component generates different output (given the above) something is broken.

Question 7

• *When should you use state**
• *instead of a prop?**

Answer 7

If you will ever need to alter a component attribute at some point in time,
it should definitely go into the component’s state

Question 8

What is a stateless component?

Answer 8

The component has props but no state.

Question 9

What is a stateful component?

Answer 9

Both props and state; also known as state managers.

Question 10

How do React achieve interactivity in components? Or, how can you trigger changes to your underlying data model?

Answer 10

With state

Question 11

What three questions should one ask to determine if a piece of data should be in the component’s state?

Answer 11

1. Is it passed in from a parent via props? (If so, it’s probably not state-worthy)
2. Does it remain unchanged over time? (If so, it probably isn’t state)
3. Can you compute it based on any other state or props in your component? If you can, it’s not state

Question 12

• *What is the direction of**
• *data flow in React?**

Answer 12

React is all about one-way data flow down the component hierarchy.

Question 13

Where should your state live in the context of multiple nested components?

Answer 13

It should live in a parent component that lives above all other components that require that state. If you can’t find a parent in which it makes sense to store the state, you may want to create a new component purely for holding the state.

Question 14

What is JSX?

Answer 14

A syntax extension to JavaScript

An HTML proxy in JavaScript

JavaScript & XML

Question 15

What does JSX do?

Answer 15

JSX produces React “elements.”

Question 16

Is using JSX required?

Answer 16

No, it’s not. But it is a useful abstraction providing a visual aid for developers.

It also allows React to show more useful error and warning messages.

Question 17

What is allowed inside curly braces (“{ }”) when working with JSX?

Answer 17

You can put any valid JavaScript expression inside the curly braces in JSX.

Question 18

How does React prevent injection attacks?

Answer 18

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.