2.2 KiB
2.2 KiB
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)