83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
# React Component Development Checklist
|
|
|
|
## Pre-Development
|
|
|
|
- [ ] Component purpose and requirements clearly defined
|
|
- [ ] Component interface (props) designed
|
|
- [ ] Accessibility requirements identified
|
|
- [ ] Design mockup/wireframe available
|
|
|
|
## Development
|
|
|
|
- [ ] TypeScript interface defined for all props
|
|
- [ ] Component follows naming conventions (PascalCase)
|
|
- [ ] Proper file structure and organization
|
|
- [ ] Default props defined where appropriate
|
|
- [ ] Error boundaries implemented for critical components
|
|
|
|
## Styling
|
|
|
|
- [ ] Tailwind CSS classes used consistently
|
|
- [ ] Responsive design implemented
|
|
- [ ] Dark mode support (if applicable)
|
|
- [ ] Custom CSS kept to minimum
|
|
- [ ] CSS class conflicts avoided
|
|
|
|
## Accessibility (a11y)
|
|
|
|
- [ ] Semantic HTML elements used
|
|
- [ ] ARIA labels added where needed
|
|
- [ ] Keyboard navigation supported
|
|
- [ ] Focus management implemented
|
|
- [ ] Screen reader friendly
|
|
- [ ] Color contrast meets WCAG guidelines
|
|
|
|
## Performance
|
|
|
|
- [ ] Unnecessary re-renders avoided
|
|
- [ ] React.memo used where appropriate
|
|
- [ ] Heavy computations memoized with useMemo
|
|
- [ ] Event handlers memoized with useCallback
|
|
- [ ] Large lists virtualized (if applicable)
|
|
|
|
## Testing
|
|
|
|
- [ ] Unit tests written and passing
|
|
- [ ] Component renders without crashing
|
|
- [ ] Props validation tested
|
|
- [ ] User interactions tested
|
|
- [ ] Edge cases covered
|
|
- [ ] Accessibility testing performed
|
|
|
|
## Code Quality
|
|
|
|
- [ ] TypeScript types are strict and accurate
|
|
- [ ] ESLint rules pass
|
|
- [ ] Prettier formatting applied
|
|
- [ ] No console errors or warnings
|
|
- [ ] Code is self-documenting
|
|
- [ ] Comments added for complex logic
|
|
|
|
## Integration
|
|
|
|
- [ ] Component integrates well with parent components
|
|
- [ ] State management working correctly
|
|
- [ ] API calls handled properly (if applicable)
|
|
- [ ] Error states handled gracefully
|
|
- [ ] Loading states implemented
|
|
|
|
## Documentation
|
|
|
|
- [ ] Component documented with JSDoc comments
|
|
- [ ] Props interface documented
|
|
- [ ] Usage examples provided
|
|
- [ ] Storybook story created (if using Storybook)
|
|
|
|
## Review
|
|
|
|
- [ ] Code review completed
|
|
- [ ] Design review completed
|
|
- [ ] Performance review completed
|
|
- [ ] Accessibility review completed
|
|
- [ ] Security review completed (if handling sensitive data)
|