React Redux

Question 1

What is React?

Answer 1

• Open-source frontend Javascript library

- SPA (Single Page Application)

Question 2

What are the major features of React?

Answer 2

• Virtual DOM
• Unidirectional dataflow
• Reusability & composability
• — Lego bricks
• Isomorphic (server-side rendering)
• — Splits up the bundle for faster initial load

Question 3

What is JSX?

Answer 3

• Infused with Javascript & XML/HTML syntax
• — XML = markdown language
• — Syntactic sugar for creating elements

Question 4

What is the difference between a component & element?

Answer 4

• React mainly uses components

- Elements are the immutable version

Question 5

What is state?

Answer 5

• Holds information

- It can change over the lifetime of a component

Question 6

What are props?

Answer 6

• Inputs to components
• They are always passed down
• Unidirectional dataflow

Question 7

What is the difference between props & state?

Answer 7

• Locally, state can change

- — Props can’t

Question 8

What is the difference between HTML & React events?

Answer 8

• lowercase vs camelCase

- Native events vs Synthetic Events

Question 9

What are Synthetic Events?

Answer 9

• A wrapper around HTML native events

- So the Virtual DOM can track changes

Question 10

What are conditional expressions?

Answer 10

• Ternary (true ? ‘yes ‘ : ‘no’)
• &&
• ||

Question 11

What is ‘key’ used for?

Answer 11

• Unique key

- — Helps in fetching & changing that specific element

Question 12

What are refs?

Answer 12

• They provide a reference to a real DOM node

Question 13

How to create refs

Answer 13

• useRef hook

- React.createRef

Question 14

What is the Virtual DOM

Answer 14

• Javascript binary tree version of the DOM tree
• Listens for component events (Synthetic events)
• Selectively updates the real DOM instead of refreshing the entire thing

Question 15

What are controlled components?

Answer 15

• Component value is tracked by React state
• — Props
• — State
• — Context

Question 16

What are uncontrolled components?

Answer 16

• Components whose value is tracked by HTML itself

- Traditional HTML

Question 17

What is “lifting up state”?

Answer 17

• Letting parents know about changes in child’s state
• Pass down handlers
• Context

Question 18

What is context?

Answer 18

• State mechanism
• — To avoid prop drilling
• ——- Passing props multiple layers down
• Providers & Consumers

Question 19

What are the different phases of a component lifecycle?

Answer 19

• Mounting
• Updating (Reacting)
• Unmounting
• **Render
• —Part of all the cycles

Question 20

What are higher order components (HOCs)

Answer 20

• Functions that take components and return components

- It wraps reusable functionality around a component

Question 21

What are children props?

Answer 21

• Pass component tree between opening & closing tags as prop data

Question 22

What are the core principles of Redux?

Answer 22

• Reducers are pure functions
• Global store is the single source of truth
• Store is immutable

Question 23

What is the difference between mapState & mapDispatch?

Answer 23

• mapState = read props

- mapDispatch = write props (actions)

Question 24

How does “connect()” work?

Answer 24

• Takes in
• — mapState
• — mapDispatch
• —Component to be wrapped