React. Base
Presenter:
Yulia Galuzo
telegram: yuliaka71
JSX
Virtual DOM
Components
State
State of a component is an object that holds some information that may change over the lifetime of the component.
We should always try to make our state as simple as possible and minimize the number of stateful components.
State vs Props
Stateful vs Stateless components
Stateful Component
• Know how everything works
• Just a container for other components
• Provide application data
• Perform data fetching
Stateless Component
• Know how to display received data
• Receive and operate only with props
Parent-child communication
Best ways how to communicate between parents and children
-
State and Props
-
State management libraries like Redux, MobX etc
Lifecycle
Legacy methods
Synthetic events
- Just a normalized/cross-browser wrapper around plain event object Have the same interface as the browsers event
- Provide access to the original browser event through event.nativeEvent
- HTML vs React events:
• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.
Error boundaries
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit critical errors on next renders.
React did not provide any way to handle them gracefully in components, and could not recover from them.
Below are the cases in which error boundaries don't work
- Inside Event handlers
- Asynchronous code using setTimeout or requestAnimationFrame callbacks 3. During Server side rendering
- When errors thrown in the error boundary code itself
Styling
Styling
Styling
Styling
