What is React?
- Open-source frontend Javascript library
- SPA (Single Page Application)
What are the major features of React?
- Virtual DOM
- Unidirectional dataflow
- Reusability & composability
- — Lego bricks
- Isomorphic (server-side rendering)
- — Splits up the bundle for faster initial load
What is JSX?
- Infused with Javascript & XML/HTML syntax
- — XML = markdown language
- — Syntactic sugar for creating elements
What is the difference between a component & element?
- React mainly uses components
- Elements are the immutable version
What is state?
- Holds information
- It can change over the lifetime of a component
What are props?
- Inputs to components
- They are always passed down
- Unidirectional dataflow
What is the difference between props & state?
- Locally, state can change
- — Props can’t
What is the difference between HTML & React events?
- lowercase vs camelCase
- Native events vs Synthetic Events
What are Synthetic Events?
- A wrapper around HTML native events
- So the Virtual DOM can track changes
What are conditional expressions?
- Ternary (true ? ‘yes ‘ : ‘no’)
- &&
- ||
What is ‘key’ used for?
- Unique key
- — Helps in fetching & changing that specific element
What are refs?
- They provide a reference to a real DOM node
How to create refs
- useRef hook
- React.createRef
What is the Virtual DOM
- 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
What are controlled components?
- Component value is tracked by React state
- — Props
- — State
- — Context
What are uncontrolled components?
- Components whose value is tracked by HTML itself
- Traditional HTML
What is “lifting up state”?
- Letting parents know about changes in child’s state
- Pass down handlers
- Context
What is context?
- State mechanism
- — To avoid prop drilling
- ——- Passing props multiple layers down
- Providers & Consumers
What are the different phases of a component lifecycle?
- Mounting
- Updating (Reacting)
- Unmounting
- **Render
- —Part of all the cycles
What are higher order components (HOCs)
- Functions that take components and return components
- It wraps reusable functionality around a component
What are children props?
- Pass component tree between opening & closing tags as prop data
What are the core principles of Redux?
- Reducers are pure functions
- Global store is the single source of truth
- Store is immutable
What is the difference between mapState & mapDispatch?
- mapState = read props
- mapDispatch = write props (actions)
How does “connect()” work?
- Takes in
- — mapState
- — mapDispatch
- —Component to be wrapped
