Advanced React Agenda - Paycor

[coryhouse]

Overview

9 - 4ish EST Daily
Breaks once/hour - get away from the machine! 🏃‍♂️💨
Please mute when not speaking
Post "done" in chat when done with an exercise
Let's dialogue like we did in person
Lunch at 12:30 EST?

Agenda

Tweak existing app

• Change hair color to role with a dropdown.
• Convert user class to func
• Add Nodemon to hot reload apiServer changes

Reusable components

• Signs it's time to consider extracting a component
• Install Storybook
  • Configure to look in /src
  • Explain CSF vs storyOf
  • Add Input component story
  • Add knobs
• Create reusable Select based on Input
• Slides for fundamentals
• Add propType comments
• Place Input in folder, then barrel
• Wrap an existing component - Create Accordion via react-animate-height
• Create H1 as example of styling only component
• Create SubmitButton with optional cancel included
• Compound components
  • Exercise - Tab control approaches - See compound components here
• Responsive mobile vs web - separate components lazy loaded - see Responsive tables here
  • Create reusable course card. Display data as a card when on mobile.

Barrel Pattern

Children

• Create simple layout in App.js
• Slot pattern: Create layout component with slots to support with header above nav
  • Accept heading as either a string or an element. use isValidElement to compose either.
  • Use React.cloneElement to add React Router props to child element passed in
  • Exercise: Use slot pattern to create card component with Heading, body, and footer with gray background.

Cypress Driven Dev

• Add @testing-library/cypress 
• Add https://github.com/cypress-io/eslint-plugin-cypress
• Update User.spec.js to use Cy testing lib queries
• Setup scenario selector
  • Create ScenarioSelector component and style it
  • Fork api proxies for prod and mock
  • Pass scenarios on header via API proxy
  • Enhance apiServer.js to read different scenarios

Error Handling

• Create 404 Page
• Redirect unmatched routes
• Create ErrorPage
• Add API call error handling
  • console.error in api proxy
  • redirect to ErrorPage in app
• ErrorBoundary
  • Create App ErrorBoundary that embeds ErrorsPage
  • Create nested ErrorBoundary for portion of app
• Discuss error logging services

Advanced State

• Challenge: Show number of courses next to the header link. How?
• Lift course state to avoid reloads
  • Use functional setState to add course to existing state
  • Declare propTypes for Users and ManageUser. Declare exact shape
  • Centralize user propType
• Use Immer for handling state changes
• UseReducer for course page state
  • Automated test reducer
• Avoid calling setState on unmounted components
• Use context for login
  • See context here for details
  • Display hello username in the header
  • Add updatedBy when saving
  • Exercise: Context for course state
  • Exercise: use context to create our own Toast system with a fixed location just below the nav.
  • Exercise: Add i18n on navigation or greeting with a toggle button for English/Español.

Props

• Spread props on Input to show how some props can be destructured, others not.

API

• Convert to async/await
• Centralize apiUtils to streamline

Other Advanced Hooks

• useRef to focus first input on manageCourse
  • Use forwardRef to support forwarding ref to the input
• create custom hook for handling async (or for displaying mouse coords)
• Create useLocalStorage custom hook and use on scenario selector.
• useLayoutEffect

Routing

• Lazy load pages with React.lazy and Suspense
• Add auto scroll on route change

Performance

• Switch to large user dataset
  • Add filter and sort fields with a submit. Note that as you enter keystrokes, the table redraws slowly.
  • Wrap component in React.memo so it only re-renders when form is resubmitted (check submit counter)

Redux

• Slide intro
• Convert app to use Redux for courses in a branch
  • Exercise: handle another part of CRUD on your own.
  • Exercise: handle user info via Redux

To do

Pick advanced hook demos
Create large dataset for perf testing
Find a useCallback and useLayoutEffect examples