React
ℹ️ Notes collected from across the infinite todo lists of my life.
Misc utility components
<Typeof>{<Component />}</Typeof>
DevTools
Lesson6
Freeze time with React Dev Tools
Challenge
- Use the React Dev Tools to find a Component that can be suspended
- Click the stopwatch icon to toggle it’s suspended state
- Use the React Dev Tools to find the ErrorBoundary component
- Change the
state
fieldhasError
from “false” to “true” to see the error state
- Change the
Before you move on
Take a break. Make sure you know everything we’ve covered so far. Before you move on. Get everything working again.
React principles you should interview for
- Composition
Basics
Components
Components are the primary building block of React.
To start, you can think of them like custom HTML Elements.
They can be simple or very complex.
Let’s start with a simple one…
Hooks
Hooks are the secondary building block of React.
They are functions we use to add interactivity to components.
They can be simple or complex.
Let’s start with a simple one…
Context
Context is a startegy for sharing data between may components
Patterns
- Setup a React CodeSandbox
- What’s a React Component?
- What are Props in React?
- Make React Components as Re-usable as HTML Elements
- Track State with the React.useState
- Render Conditionally with a Conditional (Ternary) Operator
- Fetch Data with React.useEffect
- Connect useEffect and useState to Update Components with Data
- 8 Extract a Custom Hook
- 9 Catch Errors with an ErrorBoundary Component (class stuff?)
- 1o Map Arrays of Data to Arrays of Components
- 11 Make Root Elements Dynamic with an as Component Prop (ol, ul, etc)
- 12 Invert Control of Redering with a Render Prop
- 13 Return an Array of Elements with React.Fragment
- 9 Limit useEffect Calls with the Inputs Argument :: (add a button that just re-renders the component to show that we re-fetch every update)
- ? useRef, useLayoutEffect, useReducer
- ? Concent, Context.Provider, Context.Consumer, useContext
- ? React DevTools, Hooks linting
- ? Lift State, Controller Component
- props: children, components
- Code Splitting with Dynamic imports
- ? Suspese, SuspenseList, useTransition, useDeferredValue
- JSX as an alternate root. “Why is there HTML in my JavaScript ->” for those who are brand-brand ne
Basics (alt)
- Element — createElement (React instructions for creating an element)
- ReactDOM — renders to a platform
- JSX
- Component — function that takes props and returns a React Element
- children
- Hooks: useState (single state), useReducer (complex state), useEffect (sync state)