Demo App Checklist

[coryhouse]

Initial Order

• Hello world
• Display hard coded data
• Display list from an API call
• Delete item from list
• Add item to list
• Refactor to separate manage page
• Add React Router
• Edit item in list

Core features

• Display tabular list
• Add item
• Edit item
• Delete item
• Treat state as immutable
• Validate before save
• Handle numeric form value (default to empty string, use parseInt when resetting)
• Declare defaultProps for TextInput (Default disable to false)
• Implement footer
• Hide list when no records exist (conditional rendering)
• Disable save button until form is populated when adding (Use derived state)
• Show number of items in header link
• Publish list as a reusable component on npm
• Set focus on first form field via ref (yes, doable native via autofocus too)
• Handle async calls
• Use immer to handle a state transition
• Filter list
• Sort list
• Use Barrel pattern to shorten imports for components in dedicated folders
• Avoid calling setState on unmounted components by cancelling any async work
• Implement login
• Display "Hello username" in header
• Use username when saving records

React fundamentals

• Utilize centralized propTypes with exact shapes
• Wrap peer elements in Fragment
• Add ErrorBoundary
• Use lifecycle / hook to request data on mount
• Handle data via context
• Use class and function components with Hooks
• Use functional setState
• Use destructuring to shorten calls in render
• Use destructuring in functional component argument lists
• Use standardized event handler names (onX when passed, handleX when handled)
• Utilize all hooks

State

• See React State #49

Performance

• Load large dataset and add filters. Note that rendering gets slow as filters change
• Lazy load routes and display spinner via Suspense
• Implement shouldComponentUpdate / PureComponent / useMemo on long list of records to avoid needless re-renders
• Timeout calls using promise.race and display an error page after x seconds.
• More in Performance Checklist #77

Reusable components

• Consume a reusable component: Use react-toastr for notifications, React bootstrap table
• Implement reusable TextInput and document it
• Create reusable component build

Routing

• Handle 404s
• Route between pages
• Style active link
• Set page titles
• Redirect

Styling

• Apply at least one inline style
• Reference a dedicated CSS file for each component

Redux

• Implement action creator, action constants, store, reducers, and connected components
• Utilize Redux thunk for async calls
• Configure Redux dev tools