full version update #88
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"ProjectStructureAndArchitecture": {
"organization": {
"featureBased": {
"description": "Organize files by feature, making the structure intuitive.",
"example": [
"src/",
" components/",
" features/",
" featureA/",
" FeatureA.jsx",
" featureA.slice.js",
" featureB/",
" FeatureB.jsx"
]
},
"domainBased": {
"description": "Organize files by domain or module, reducing dependence on feature specifics.",
"example": [
"src/",
" domains/",
" auth/",
" Login.jsx",
" Register.jsx",
" user/",
" UserProfile.jsx"
]
}
},
"codeSplitting": {
"entryPoint": "Use dynamic imports to split code at various points for performance.",
"example": "const FeatureA = React.lazy(() => import('./FeatureA'));"
}
},
"ComponentDesign": {
"functionalVsClassComponents": {
"description": "Prefer functional components; they are simpler and can utilize hooks.",
"example": [
"const MyComponent = () => { return <div>Hello</div>; }", // DO THIS
"class MyComponent extends React.Component { render() { return <div>Hello</div>; } }" // DON'T DO THIS
]
},
"hooksPatterns": {
"customHooks": "Create custom hooks to encapsulate logic and state.",
"example": "function useFetch(url) { ... }"
},
"renderOptimization": {
"pureComponent": "Use React.PureComponent or React.memo for pure components.",
"example": [
"const MyComponent = React.memo(({ prop }) => { return <div>{prop}</div>; });", // DO THIS
"class MyComponent extends React.Component { shouldComponentUpdate() { return false; }} // DON'T DO THIS"
]
}
},
"StateManagement": {
"options": {
"ReactContext": "Best for lighter applications where global state is minimal.",
"ReduxToolkit": "Ideal for complex applications that need central state management.",
"Zustand": "Lightweight alternative for simple state management.",
"Jotai": "Focus on atomic state management.",
"Recoil": "Great for managing state with derived state and async queries."
},
"avoidPropDrilling": {
"description": "Use context providers to encapsulate logic and provide state.",
"example": "const MyContext = React.createContext();"
}
},
"DataFetching": {
"modernPatterns": {
"ReactQuery": "Simplifies data fetching, caching, and synchronizing.",
"Suspense": "Utilizes loading states seamlessly.",
"ServerComponents": "Leverages server-side rendering."
},
"cachingAndRevalidation": {
"description": "Utilize cache-first strategies where applicable for improved performance."
}
},
"PerformanceOptimization": {
"memoization": {
"useMemo": "Cache calculation results.",
"useCallback": "Memoize callbacks to prevent unnecessary renders.",
"example": [
"const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);",
"const memoizedCallback = useCallback(() => { doSomething(a); }, [a]);"
]
},
"lazyLoading": {
"description": "Load components or routes only when needed."
},
"virtualization": {
"library": "Use react-window or react-virtualized for long lists."
}
},
"TypeSafety": {
"TypeScript": {
"description": "Utilize TypeScript for better type safety in props, hooks, and events.",
"example": "interface Props { title: string; } const MyComponent: React.FC<Props> = ({ title }) => <h1>{title}</h1>; "
}
},
"StylingApproaches": {
"CSSModules": {
"description": "Scoped styles that avoid conflicts.",
"example": "import styles from './Component.module.css';"
},
"Tailwind": {
"description": "Utility-first approach to styling.",
"example": "<div className='bg-blue-500 text-white'>Hello</div>; "
},
"CSS-in-JS": {
"library": "Styled-components or Emotion are great for theming and scoped styles."
}
},
"Testing": {
"unitTesting": {
"description": "Use Jest for unit tests.",
"example": "test('renders learn react link', () => { ... });"
},
"integrationTesting": {
"recommended": "React Testing Library for integration tests.",
"example": "render(<MyComponent />);"
},
"coveragePractices": {
"description": "Aim for at least 80% coverage."
}
},
"Accessibility": {
"ARIA": {
"description": "Use ARIA roles and attributes to improve accessibility."
},
"keyboardNavigation": {
"description": "Ensure all components are navigable with the keyboard."
},
"semanticMarkup": {
"description": "Use semantic HTML elements."
}
},
"ToolingAndDevWorkflow": {
"ESLint": {
"configs": "Use Airbnb or standard configs with React plugins."
},
"Prettier": {
"description": "Automatically format code for consistency."
},
"lint-staged": {
"description": "Run linters on staged files."
},
"Husky": {
"description": "Setup git hooks for pre-commit checks."
},
"CI/CDchecks": {
"description": "Ensure all checks pass before merging or deploying."
},
"VSCodeSetup": {
"description": "Use relevant extensions for React development."
}
},
"Deployment": {
"frameworks": {
"Vercel": "Ideal for Next.js apps.",
"Netlify": "Great for static sites."
},
"environmentVariables": {
"description": "Use .env files for local settings."
},
"buildOptimization": {
"description": "Minify and treeshake for production builds."
}
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"ProjectStructureAndArchitecture": {
"overview": "Organize files effectively to enhance maintainability and scalability.",
"organizationPatterns": {
"featureBased": {
"description": "Group by feature or module.",
"structure": "src/features/FeatureName/",
"pros": [
"Easier to navigate related files.",
"Enhanced encapsulation."
],
"cons": [
"Could lead to duplication across features.",
"Challenging in very large projects."
]
},
"domainBased": {
"description": "Group files by domain or category.",
"structure": "src/domains/DomainName/",
"pros": [
"Promotes sharing of reusable code.",
"Scalable in large applications."
],
"cons": [
"May complicate relationships between features.",
"Harder to find files related to a specific feature."
]
}
},
"codeSplitting": {
"description": "Use React.lazy and Suspense for dynamic imports.",
"example": "const Component = React.lazy(() => import('./Component'));"
}
},
"ComponentDesign": {
"functionalVsClassComponents": {
"useFunctional": {
"reason": "Hooks provide better state management and side-effect handling.",
"example": "const MyComponent = () => { /* hooks here */ };"
},
"don'tUseClass": {
"reason": "Typically more verbose and manage internal state without hooks."
}
},
"hooksPatterns": {
"customHooks": {
"description": "Encapsulate logic by creating reusable hooks.",
"example": "function useFetch(url) { /* logic here */ }"
}
},
"renderOptimization": {
"memoization": {
"useMemo": {
"description": "Memoize expensive calculations.",
"example": "const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);"
},
"useCallback": {
"description": "Memoize event handlers.",
"example": "const memoizedCallback = useCallback(() => { /* handler logic */ }, [dependencies]);"
}
}
}
},
"StateManagement": {
"options": {
"ReactContext": {
"useWhen": "Simple state management with low complexity.",
"example": "const Context = createContext();"
},
"ReduxToolkit": {
"useWhen": "More complex apps needing centralized state.",
"example": "const slice = createSlice({ name: 'sliceName', reducers: { /* reducers */ } });"
},
"Zustand": {
"useWhen": "Lightweight alternative for managing global state.",
"example": "const useStore = create(set => ({ /* state */ }));"
}
},
"avoidingPropDrilling": {
"strategy": "Use context or state management libraries instead of passing props down many levels."
}
},
"DataFetching": {
"modernPatterns": {
"ReactQuery": {
"description": "Handles caching, automatic refetching, and synchronization.",
"example": "const { data, error } = useQuery('fetchData', fetchFunction);"
},
"Suspense": {
"description": "Suspense for data fetching (along with React.lazy).",
"example": "const data = await fetchSuspenseData();"
}
},
"cachingAndRevalidation": {
"strategy": "Use stale-while-revalidate for fast, up-to-date interfaces."
}
},
"PerformanceOptimization": {
"memoization": {
"example": "const memoizedValue = useMemo(() => computeValue(), [deps]);"
},
"lazyLoading": {
"strategy": "Implement lazy loading for components or images."
},
"virtualization": {
"description": "Use libraries like react-window for rendering large lists efficiently."
}
},
"TypeSafety": {
"usingTypeScript": {
"overview": "Ensure type safety across props and states.",
"example": "const MyComponent: React.FC<{ propName: string }> = ({ propName }) => {}"
}
},
"StylingApproaches": {
"CSSModules": {
"useWhen": "Scoped styles without global conflicts.",
"example": "import styles from './Component.module.css';"
},
"Tailwind": {
"useWhen": "Utility-first approach for fast prototyping.",
"example": "<div className='bg-blue-500'>Content</div>"
},
"CSSinJS": {
"useWhen": "Dynamic styling based on props, e.g., styled-components.",
"example": "const StyledComponent = styled.div` color: ${props => props.color}; `;"
}
},
"Testing": {
"recommendedTools": {
"unitTesting": "Jest",
"integrationTesting": "React Testing Library",
"coveragePractices": "Aim for at least 80% coverage."
}
},
"Accessibility": {
"overview": "Ensure applications are usable for all.",
"aria": "Use ARIA roles where necessary, especially for custom components.",
"keyboardNavigation": "Ensure all interactive elements are keyboard accessible.",
"focusManagement": {
"strategy": "Maintain focus states for dynamic content updates."
}
},
"ToolingAndDevWorkflow": {
"configs": {
"ESLint": "Standard rules configuration.",
"Prettier": "Ensure consistent formatting.",
"lint-staged": "Run linting before commits.",
"Husky": "Set up hooks for pre-commit checks."
}
},
"Deployment": {
"frameworks": "Use Vercel or Netlify for seamless deployments.",
"environmentVariables": "Manage through the platform's settings.",
"buildOptimization": {
"strategy": "Minimize bundle sizes through code splitting."
}
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"projectStructure": {
"folders": {
"components": "Reusable UI components",
"features": "Feature-based organization, encapsulating related components, actions, and utils",
"hooks": "Custom hooks for shared stateful logic",
"contexts": "React contexts for global state management",
"assets": "Images, fonts, and other static files",
"pages": "Page components for routing",
"utils": "Utility functions and helpers"
},
"codeSplitting": {
"dynamicImports": "Use `React.lazy` and `Suspense` for lazy loading components",
"chunking": "Configure Webpack or Vite to split bundles for production builds"
},
"patterns": {
"featureBased": "Organizing by feature promotes encapsulation and scalability",
"domainBased": "Organizing by domain can help to separate concerns across diverse application areas"
}
},
"componentDesign": {
"functionalVsClass": {
"useFunctional": "Prefer functional components with hooks for simplicity and performance",
"avoidClass": "Resist using class components unless required for legacy reasons"
},
"hooksPatterns": {
"customHooks": "Abstract complex logic into reusable custom hooks",
"dependencies": "Always specify dependencies in `useEffect` and other hooks to avoid stale closures"
},
"renderOptimization": {
"memo": "Use `React.memo` for pure components",
"useMemoUseCallback": {
"useMemo": "Memoize expensive calculations",
"useCallback": "Memoize callback functions to prevent unnecessary renders"
}
}
},
"stateManagement": {
"preferredLibraries": {
"context": "Great for simple global state management",
"reduxToolkit": "Best for complex state management with advanced features",
"zustand": "Lightweight and simple for local/global state",
"jotai": "Built around atoms for granular state management",
"recoil": "Fine-grained reactivity and derived state"
},
"avoidingPropDrilling": {
"contextAPI": "Use React Context to manage deep tree state without prop drilling",
"Redux": "Centralized store for global state management"
}
},
"dataFetching": {
"modernPatterns": {
"reactQuery": "Automates caching, synchronization and background refreshing of data",
"suspense": "Integrate with React.lazy for seamless loading states",
"serverComponents": "Leverage for direct server data access"
},
"caching": {
"staleTime": "Configuration for how long data is considered fresh",
"revalidation": "Use background refetch for up-to-date data"
}
},
"performanceOptimization": {
"memoization": {
"useMemo": "Memoize results of expensive calculations",
"useCallback": "Prevent unnecessary renders of child components"
},
"lazyLoading": {
"codeSplitting": "Load components only when needed using React.lazy",
"images": "Lazy load images to improve initial load times"
},
"virtualization": "Use libraries like `react-window` for long lists to improve performance"
},
"typeSafety": {
"typescriptUsage": {
"props": "Always type component props using TypeScript interfaces/types",
"hooks": "Type hooks correctly to ensure safe usage",
"utilityTypes": "Utilize utility types like `Pick`, `Partial` appropriately"
}
},
"stylingApproaches": {
"cssModules": "Scoped CSS that avoids global clashes",
"tailwind": "Utility-first CSS framework for rapid UI development",
"css-in-js": "Dynamic styling based on component state",
"theming": {
"globalTheme": "Maintain a single theme context for consistent styling across components",
"themingBestPractices": "Utilize a theme provider from libraries like Material-UI or styled-components"
}
},
"testing": {
"unitTesting": "Focus on testing individual components and utilities",
"integrationTesting": "Test component lifecycle and interactions using React Testing Library",
"coveragePractices": {
"minimumCoverage": "Aim for above 80% code coverage",
"CIIntegration": "Integrate coverage checks in CI/CD pipeline"
}
},
"accessibility": {
"aria": {
"properUsage": "Use ARIA attributes responsibly when native HTML elements are insufficient",
"keyboardNavigation": "Ensuring navigation is keyboard accessible"
},
"focusManagement": "Use `tabIndex` and focus management in SPA routing to guide users",
"semanticMarkup": "Utilize semantic HTML for better structure and accessibility"
},
"toolingDevWorkflow": {
"eslint": {
"configs": "Use community configs like Airbnb or Google style guides",
"prettierIntegration": "Integrate Prettier for auto-formatting",
"lint-staged": "Run ESLint on staged files only for performance"
},
"husky": "Use to enforce pre-commit hooks",
"CI/CD": "Implement checks for linting and testing on branch pushes",
"vsCodeSetup": "Install ESLint and Prettier extensions for local development ease"
},
"deployment": {
"frameworks": {
"vercel": "Optimal for Next.js apps, handles serverless functions automatically",
"netlify": "Good for static sites with easy deployment configurations"
},
"environmentVariables": "Utilize .env files for managing environment-specific variables",
"buildOptimization": "Minimize bundle size via tree shaking and code splitting"
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"Project Structure & Architecture": {
"Best Practices": [
"Organize files by feature-based or domain-based structure depending on the project needs.",
"Use barrel files (index.js) to simplify imports of components and utilities.",
"Implement code splitting using React.lazy and React.Suspense for larger applications.",
"Use consistent naming conventions for directories and files."
],
"Example": {
"Feature-Based": "src/features/UserProfile/index.js",
"Domain-Based": "src/components/User/Profile.js"
}
},
"Component Design": {
"Best Practices": [
"Prefer functional components with hooks over class components for new code.",
"Use memoization techniques with `React.memo` for performance optimization.",
"Design reusable components with configurable props and default values."
],
"When to Use": {
"Functional": "For new components, state management via hooks (useState, useEffect).",
"Class": "If maintaining legacy components that were built with class-based patterns."
},
"Example": {
"Functional Component": "const MyComponent = () => { /* ... */ };",
"Memoized Component": "const MemoizedComponent = React.memo(MyComponent);"
}
},
"State Management": {
"Best Options": [
"React Context for smaller applications or when needing global state.",
"Redux Toolkit for larger applications with complex state logic.",
"Zustand or Jotai for simpler state management needs using hooks.",
"Avoid prop drilling with a global state solution or context."
],
"Example": {
"React Context": "const ThemeContext = React.createContext();",
"Redux Toolkit": "const store = configureStore({ reducer: rootReducer });"
}
},
"Data Fetching": {
"Modern Patterns": [
"Use React Query for server state management and caching.",
"Implement Suspense for loading states with data fetching.",
"Explore Server Components for data rendering directly on the server."
],
"Caching Strategies": "Use stale-while-revalidate for balancing speed and freshness."
},
"Performance Optimization": {
"Best Practices": [
"Use useMemo and useCallback to memoize values and functions.",
"Implement lazy loading for routes and components to reduce initial load time.",
"Use React.memo to avoid unnecessary re-renders of functional components."
],
"Example": {
"useMemo": "const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);",
"lazy loading": "const LazyComponent = React.lazy(() => import('./LazyComponent'));"
}
},
"Type Safety": {
"Best Practices": [
"Use TypeScript for type checking across props, state, and events.",
"Define utility types for reusable patterns (e.g., `React.FC` for functional components)."
],
"Example": {
"Typing Props": "const MyComponent: React.FC<MyProps> = (props) => { /* ... */ };"
}
},
"Styling Approaches": {
"Best Practices": [
"Use CSS Modules for scoped styling within components.",
"Consider Tailwind for utility-first CSS approach.",
"Embrace CSS-in-JS for theming and dynamic styles."
],
"Example": {
"CSS Modules": "import styles from './Component.module.css';",
"Tailwind": "<div className='bg-blue-500 text-white'>Hello World</div>"
}
},
"Testing": {
"Best Practices": [
"Implement unit tests for individual components with Jest.",
"Use React Testing Library for integration tests focused on user behavior.",
"Ensure good coverage but focus on meaningful tests, not just hitting coverage numbers."
],
"Example": {
"Unit Test": "test('renders correctly', () => { render(<MyComponent />); });"
}
},
"Accessibility (a11y)": {
"Best Practices": [
"Use ARIA attributes to enhance semantic meaning where necessary.",
"Ensure keyboard navigation support for all interactive elements.",
"Use semantic HTML elements (like <header>, <nav>, <footer>) for better accessibility."
],
"Example": {
"Keyboard Navigation": "Add `tabIndex` to elements for custom focus management."
}
},
"Tooling & Dev Workflow": {
"Best Practices": [
"Use ESLint and Prettier to maintain code quality and style.",
"Implement lint-staged and Husky for pre-commit checks.",
"Set up CI/CD with checks on pull requests to ensure code quality."
],
"Example": {
"ESLint Config": "{ 'extends': 'react-app', 'rules': { 'react-hooks/rules-of-hooks': 'error' }}",
"Prettier Config": "{ 'singleQuote': true, 'trailingComma': 'es5' }"
}
},
"Deployment": {
"Best Practices": [
"Choose frameworks like Vercel or Netlify for easy deployment.",
"Manage environment variables securely and ensure they are not exposed.",
"Optimize build settings for production to minimize bundle size."
]
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"Project Structure & Architecture": {
"Overview": "Organizing your project structure makes it scalable and maintainable.",
"File Organization": {
"Feature-based": "Group by features or modules.",
"Domain-based": "Structure by domain or functionality."
},
"Code Splitting": "Use React.lazy and Suspense for dynamic imports.",
"Example": {
"Feature-based": {
"src": {
"components": {
"FeatureA": "ComponentA.js",
"FeatureB": "ComponentB.js"
}
}
},
"Domain-based": {
"src": {
"ui": { "Button.js", "Input.js" },
"services": { "api.js", "auth.js" }
}
}
},
"Community Standards": "Refer to the React Docs for more detailed structures."
},
"Component Design": {
"Functional vs Class Components": {
"Functional": "Preferred for clean syntax and hooks.",
"Class": "Older syntax, but can be used where lifecycle methods are necessary."
},
"Hooks Patterns": {
"Custom Hooks": "Encapsulate logic.",
"Example": "Use `useFetch` for data fetching."
},
"Memoization": {
"PureComponent/memo": "Use for preventing unnecessary renders.",
"Example": "const MyComponent = memo((props) => { /*...*/ });"
},
"Reusable Components": "Create components that can be configured via props."
},
"State Management": {
"Options": {
"React Context": "Lightweight for small apps.",
"Redux Toolkit": "Best for large apps or complex state logic.",
"Zustand/Jotai": "Simpler alternatives for local state management.",
"Recoil": "Great for derived state and atomic state management."
},
"Avoiding Prop Drilling": {
"Solution": "Context API or use state management tools."
}
},
"Data Fetching": {
"Patterns": {
"React Query": "For caching and managing server state.",
"Suspense": "For lazy loading components.",
"Server Components": "Incremental loading of data."
},
"Strategies": {
"Caching": "On successful fetch, cache data.",
"Revalidation": "Background fetching of data."
},
"Example": "const { data, error } = useQuery('fetchData', fetchDataFunction);"
},
"Performance Optimization": {
"Memoization": "Use `useMemo` and `useCallback` judiciously.",
"Lazy Loading": "Load components or routes only when needed.",
"Virtualization": "Use libraries like react-window for long lists."
},
"Type Safety": {
"Using TypeScript": "Adds type safety to props and state management.",
"Typing Patterns": {
"Props": "Define PropTypes or interfaces.",
"Hooks": "Type your custom hooks."
}
},
"Styling Approaches": {
"CSS Modules": "Scoped styles, preventing clashes.",
"Tailwind": "Utility-first, encourages design consistency.",
"CSS-in-JS": "Dynamic styling based on props/state."
},
"Testing": {
"Frameworks": {
"React Testing Library": "Focus on testing components as a user would.",
"Jest": "For unit testing."
},
"Coverage Practices": "Aim for high coverage on critical components and pages."
},
"Accessibility (a11y)": {
"Best Practices": {
"ARIA": "Use appropriate roles and properties.",
"Keyboard Navigation": "Ensure all interactive elements are accessible via keyboard.",
"Focus Management": "Manage focus for modals and pop-ups."
}
},
"Tooling & Dev Workflow": {
"ESLint": "Use with Airbnb or Standard config.",
"Prettier": "For consistent code formatting.",
"Husky": "Run pre-commit hooks.",
"CI/CD": "Integrate checks in your workflow."
},
"Deployment": {
"Frameworks": "Use Vercel or Netlify for straightforward deployment.",
"Environment Variables": "Manage via `.env` files.",
"Build Optimization": "Minimize bundle size using tools like Webpack."
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"ProjectStructureAndArchitecture": {
"description": "Organize files for easy scalability and maintainability.",
"recommendations": [
{
"pattern": "Feature-based",
"structure": "Group by features or pages.",
"example": "src/features/FeatureName/"
},
{
"pattern": "Domain-based",
"structure": "Group by domain logic.",
"example": "src/domains/DomainName/"
},
{
"codeSplitting": "Use React.lazy and Suspense to load components only when needed."
},
{
"fileOrganization": "Assets, components, hooks, and contexts should be in their respective directories."
}
]
},
"ComponentDesign": {
"functionalVsClass": {
"useFunctional": "Prefer functional components with hooks for cleaner syntax and easier state management.",
"example": "const MyComponent = () => { /* logic */ }",
"useClass": "Only when necessary, like for error boundaries."
},
"hooksPatterns": "Keep hooks in a separate file if they are shared across multiple components.",
"memoization": {
"PureComponent": "Use React.PureComponent for class components.",
"memo": "Wrap functional components with React.memo to avoid unnecessary renders."
},
"reusableComponents": "Design components that accept props for customization."
},
"StateManagement": {
"options": [
{
"library": "React Context",
"useCase": "Best for light state management without prop drilling."
},
{
"library": "Redux Toolkit",
"useCase": "For complex state management with a global store."
},
{
"library": "Zustand",
"useCase": "For simple state management with a minimalistic API."
},
{
"library": "Jotai",
"useCase": "For atom-based state management."
},
{
"library": "Recoil",
"useCase": "For more complex derived state logic."
}
]
},
"DataFetching": {
"modernPatterns": [
{
"library": "React Query",
"description": "For fetching, caching, and updating data with minimal boilerplate."
},
{
"feature": "Suspense",
"description": "Use for declarative data fetching."
}
],
"cachingAndRevalidation": "Always cache data and revalidate based on user actions and data freshness."
},
"PerformanceOptimization": {
"memoization": {
"useMemo": "Use to memoize computationally expensive calculations.",
"useCallback": "Use to memoize callback functions."
},
"lazyLoading": "Use React.lazy to load components when needed.",
"virtualization": "Use libraries like react-window or react-virtualized for long lists."
},
"TypeSafety": {
"useTypeScript": "Use to enhance code quality with types.",
"typingPatterns": {
"props": "Define PropTypes or use TypeScript interfaces.",
"hooks": "Type your custom hooks for better intellisense in components."
}
},
"StylingApproaches": {
"CSSModules": "Scoped styles to prevent class name collisions.",
"Tailwind": "Utility-first approach for rapid design."
},
"Testing": {
"unitTesting": "Use Jest as the testing framework.",
"integrationTesting": "Use React Testing Library for testing components.",
"coveragePractices": "Aim for at least 80% code coverage."
},
"Accessibility": {
"aria": "Use ARIA attributes to enhance accessibility.",
"keyboardNavigation": "Ensure all interactive elements are accessible via keyboard.",
"focusManagement": "Manage focus for modals and dynamically rendered content."
},
"ToolingAndDevWorkflow": {
"eslint": "Configure ESLint for code quality checks.",
"prettier": "Use Prettier for consistent formatting.",
"husky": "Implement pre-commit hooks for linting and tests."
},
"Deployment": {
"frameworks": [
{
"name": "Vercel",
"description": "Optimized for deployments of React applications."
},
{
"name": "Netlify",
"description": "Great for static site deployments."
}
],
"environmentVariables": "Use environment variables for sensitive information."
}
},
"examples": {
"componentStructure": {
"example1": {
"do": "src/components/Button/",
"dont": "src/components/oldButton/"
}
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"Project Structure & Architecture": {
"organization": {
"featureBased": "Organize files by feature (e.g., components, hooks, services directly related to a feature).",
"domainBased": "Organize by domain to group related functionalities, making it easier to scale.",
"example": "src/features/[featureName]/components, src/domains/[domainName]/services"
},
"codeSplitting": {
"method": "Utilize dynamic imports with React.lazy for components that are not needed at startup.",
"example": {
"doThis": "const LazyComponent = React.lazy(() => import('./LazyComponent'));",
"dontDoThis": "import LazyComponent from './LazyComponent'; // Loaded at startup"
}
}
},
"Component Design": {
"functionalVsClass": {
"functional": "Use functional components with hooks for state and lifecycle management.",
"class": "Use class components only if you need legacy lifecycle methods.",
"example": {
"doThis": "const MyComponent = () => { const [state, setState] = useState(0); }",
"dontDoThis": "class MyComponent extends React.Component { constructor() { ... } }"
}
},
"hooksPatterns": {
"useCustomHook": "Abstract complex logic into reusable custom hooks.",
"example": "function useFetch(url) { ... }"
}
},
"State Management": {
"options": {
"ReactContext": "Best for simple state management in small to medium apps.",
"ReduxToolkit": "Recommended for larger apps with complex states.",
"Zustand": "Great for minimalistic state management with a simple API.",
"example": {
"doThis": "import { create } from 'zustand';",
"dontDoThis": "const initialState = {}; // Not using a store"
}
},
"avoidPropDrilling": {
"method": "Lift state to common ancestors or use context/api like React Context.",
"example": "const UserContext = React.createContext();"
}
},
"Data Fetching": {
"modernPatterns": {
"ReactQuery": "Manage server state and caching with ease.",
"Suspense": "Use for lazy loading and simplifying async data fetching.",
"example": {
"doThis": "const { data } = useQuery('fetchData', fetchDataFn);",
"dontDoThis": "Fetch data directly in component load."
}
}
},
"Performance Optimization": {
"memoization": {
"useMemo": "Cache expensive calculations.",
"useCallback": "Cache functions to prevent unnecessary re-renders.",
"example": {
"doThis": "const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);",
"dontDoThis": "const value = computeExpensiveValue(a, b);"
}
},
"lazyLoading": {
"method": "Use React.lazy for components and React.Suspense for loading states."
}
},
"Type Safety": {
"TypeScript": {
"usage": "Add types for props and state to catch errors earlier.",
"example": {
"doThis": "const MyComponent: React.FC<Props> = ({ prop }) => { ... };",
"dontDoThis": "const MyComponent = (props) => { ... };"
},
"utilityTypes": {
"Partial": "Use for optional props.",
"Pick": "Use to create a derived type."
}
}
},
"Styling Approaches": {
"CSSModules": {
"usage": "Scoped CSS to avoid collisions.",
"example": { "doThis": "import styles from './MyComponent.module.css';", "dontDoThis": "import './MyComponent.css';" }
},
"CSS-in-JS": {
"librarySuggestion": "Consider libraries like styled-components or Emotion."
}
},
"Testing": {
"unitTesting": {
"library": "Use Jest for unit tests.",
"example": {
"doThis": "test('renders component', () => { render(<MyComponent />); });",
"dontDoThis": "no tests defined."
}
},
"coveragePractices": {
"recommendation": "Aim for a minimum of 80% coverage on public APIs."
}
},
"Accessibility (a11y)": {
"ARIA": {
"usage": "Use ARIA roles and properties to enhance accessibility.",
"example": {
"doThis": "<button aria-label='Close'>X</button>",
"dontDoThis": "<button>X</button> // Not descriptive"
}
},
"keyboardNavigation": {
"method": "Ensure components are navigable via keyboard for a11y."
}
},
"Tooling & Dev Workflow": {
"ESLint": {
"configs": "Use recommended ESLint configs for React.",
"example": "extends: ['eslint:recommended', 'plugin:react/recommended']"
},
"Prettier": {
"integration": "Combine ESLint with Prettier for consistent style."
},
"CI/CD Checks": {
"recommendations": "Include linting, tests in CI/CD pipelines."
}
},
"Deployment": {
"frameworks": {
"cloudPlatforms": "Use Vercel or Netlify for easy deployments."
},
"buildOptimization": {
"method": "Enable tree-shaking and code splitting."
}
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"BestPractices": {
"ProjectStructure": {
"Organization": {
"FeatureBased": {
"Description": "Group related components, hooks, and styles together to make features easier to manage.",
"ExampleStructure": {
"src": {
"features": {
"FeatureA": {
"components": {},
"hooks": {},
"styles": {}
},
"FeatureB": {}
}
}
}
},
"DomainBased": {
"Description": "Organize by domain (e.g., user, order) focusing on entities.",
"ExampleStructure": {
"src": {
"domains": {
"user": {},
"order": {}
}
}
}
}
},
"CodeSplitting": "Use dynamic imports to split code at route level with React.lazy & Suspense."
},
"ComponentDesign": {
"FunctionalVsClass": {
"UseFunctional": "Prefer functional components for new codebases.",
"UseClass": "Use class components when needing lifecycle methods not available in hooks."
},
"HooksPatterns": "Organize hooks logically, often by feature, and use custom hooks for shared logic.",
"RenderOptimization": {
"AvoidUnnecessaryRenders": {
"UseMemo": "Use for expensive calculations.",
"UseCallback": "Use for stable function references."
},
"PureComponent": "Use React.PureComponent only in class components; use memo for functional."
}
},
"StateManagement": {
"Options": {
"ReactContext": "Good for minimal state requirements.",
"ReduxToolkit": "Great for complex state needs and large applications.",
"Zustand": "Lightweight and simple for small to medium apps.",
"Jotai": "Fine-grained atomic state management.",
"Recoil": "Ideal for shared state with complex dependencies."
},
"AvoidingPropDrilling": "Use context providers at appropriate levels in the component tree."
},
"DataFetching": {
"ReactQuery": {
"Description": "Manage server state and caching automatically.",
"Example": "Use `useQuery` for fetching."
},
"Suspense": "Use in combination with data fetching libraries for better loading states.",
"ServerComponents": "Utilize when working with Next.js for server-side data."
},
"PerformanceOptimization": {
"Memoization": {
"useMemo": "Use for derived state and expensive calculations.",
"useCallback": "Use to keep reference stable for event handlers."
},
"LazyLoading": "Use React.Lazy for component-based code splitting.",
"Virtualization": "Use libraries like react-window for rendering long lists."
},
"TypeSafety": {
"TypeScript": {
"Definition": "Strict typing helps prevent bugs.",
"Example": "Define prop types using interfaces.",
"UtilityTypes": "Utilize types like Partial<T>, Omit<T, K>."
}
},
"StylingApproaches": {
"CSSModules": "Scoped styles avoid conflicts.",
"Tailwind": "Utility-first approach encourages easier responsiveness.",
"CSS-in-JS": "Use styled-components for component-level styling."
},
"Testing": {
"UnitTesting": "Test individual components with Jest.",
"IntegrationTesting": "Utilize React Testing Library for integration tests.",
"CoveragePractices": "Aim for high coverage but focus on critical tests."
},
"Accessibility": {
"ARIA": "Use ARIA roles and properties for improved accessibility.",
"KeyboardNavigation": "Ensure all interactive elements can be accessed via the keyboard.",
"SemanticMarkup": "Use appropriate HTML elements (e.g., <header>, <footer>)."
},
"Tooling": {
"ESLint": {
"Description": "Use for enforcing code styles and catching errors.",
"Config": "Consider extending AirBnB config."
},
"Prettier": "Use for consistent formatting.",
"Lint-Staged": "Run linters on pre-commit.",
"Husky": "Prevent bad commits."
},
"Deployment": {
"Frameworks": {
"Vercel": "Ideal for Next.js applications.",
"Netlify": "Great for static site hosting."
},
"EnvironmentVariables": "Use .env files to manage environment-specific variables.",
"BuildOptimization": "Ensure tree-shaking and minification."
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"projectStructureAndArchitecture": {
"organization": [
"Feature-based: Group files by feature, making it easy to manage code related to specific functionality.",
"Domain-based: Organize files based on domain areas, promoting separation of concerns."
],
"folders": [
"src/components: For reusable UI components.",
"src/features: For feature-specific components and logic.",
"src/hooks: For custom hooks.",
"src/utils: For utility functions and constants."
],
"codeSplitting": {
"method": "Use React.lazy and Suspense for dynamic imports to reduce initial load times.",
"example": "const Component = React.lazy(() => import('./Component'));"
}
},
"componentDesign": {
"functionalVsClass": {
"functional": "Prefer functional components and hooks for new components.",
"class": "Use class components only when necessary, primarily in legacy projects."
},
"hooksPatterns": "Use custom hooks to encapsulate and reuse component logic.",
"renderOptimization": [
"Use React.memo for functional components to prevent unnecessary re-renders.",
"Use PureComponent for class components."
],
"reusableComponents": "Design components to accept props that control rendering and behavior."
},
"stateManagement": {
"options": [
"React Context: For simple state management needs.",
"Redux Toolkit: For complex global state management with a robust ecosystem.",
"Zustand: For minimalistic state management with less boilerplate.",
"Jotai: For atomic state management, focusing on simplicity.",
"Recoil: For more advanced state management with derived state capabilities."
],
"avoidingPropDrilling": "Lift state up and use context or state management libraries to share state between components."
},
"dataFetching": {
"patterns": [
"React Query: For asynchronous data fetching, caching, and updating.",
"Suspense: For loading states and code-splitting.",
"Server Components: For data-fetching directly in the server-rendered components."
],
"cachingAndRevalidation": "Use cacheTime and staleTime properties in React Query to control when data is considered stale."
},
"performanceOptimization": {
"memoization": {
"useMemo": "Use for expensive calculations.",
"useCallback": "Use for memoizing callback functions."
},
"lazyLoading": "Use React.lazy and Suspense to load components only when they are needed.",
"virtualization": "Use libraries like react-window or react-virtualized to render large lists efficiently."
},
"typeSafety": {
"usingTypeScript": "Incorporate TypeScript for better type safety.",
"typingPatterns": [
"Define prop types for components using interfaces.",
"Type hooks and events for maintainability."
]
},
"stylingApproaches": {
"options": [
"CSS Modules: For scoped styles.",
"Tailwind: For utility-first CSS.",
"CSS-in-JS: Using libraries like styled-components for dynamic styling."
],
"themingBestPractices": "Use context API or libraries like ThemeProvider to manage global themes."
},
"testing": {
"unitTesting": "Use Jest for unit tests.",
"integrationTesting": "Use React Testing Library for integration tests.",
"coveragePractices": "Aim for at least 80% code coverage but focus on critical parts."
},
"accessibility": {
"ARIA": "Use ARIA roles and properties to improve accessibility.",
"keyboardNavigation": "Ensure all interactive elements are accessible via keyboard.",
"focusManagement": "Manage focus for modals and dynamic content updates."
},
"toolingAndDevWorkflow": {
"linting": "Use ESLint and Prettier for code consistency.",
"lint-staged": "Run linters on staged files to maintain code quality.",
"Husky": "Use Husky for pre-commit hooks.",
"CI/CDChecks": "Integrate tests in the CI pipeline."
},
"deployment": {
"frameworks": [
"Vercel: Optimized for serverless functions and frontend frameworks.",
"Netlify: Good for static sites and JAMstack deployment."
],
"environmentVariables": "Use .env files for managing environment-specific variables.",
"buildOptimization": "Minimize bundle sizes with code-splitting and tree-shaking."
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"bestPractices": {
"ProjectStructure": {
"Organization": {
"FeatureBased": [
"Group files by feature/module.",
"Easier to manage related components, styles, and tests."
],
"DomainBased": [
"Group by domain/technical areas.",
"Better for large-scale applications."
]
},
"CodeSplitting": [
"Use dynamic `import()` for lazy loading.",
"Helps reduce initial bundle size."
],
"FolderStructure": {
"Example": {
"src": {
"components": {},
"hooks": {},
"pages": {},
"services": {},
"contexts": {}
}
}
}
},
"ComponentDesign": {
"FunctionalVsClass": {
"Functional": "Preferred for most cases due to hooks.",
"Class": "Use when lifecycle methods are strictly needed."
},
"HooksPatterns": [
"Custom hooks for shared logic.",
"Use `useEffect` and `useMemo` wisely to manage side effects and performance."
],
"Memoization": {
"PureComponent": "Use for class components to avoid unnecessary renders.",
"React.memo()": "Use for functional components."
},
"ReusableComponents": "Design components with clear and flexible APIs."
},
"StateManagement": {
"Options": {
"ReactContext": "Lightweight state management for smaller apps.",
"ReduxToolkit": "Advantages with complex state logic and middleware.",
"Zustand/Jotai": "Simpler alternatives for less boilerplate.",
"Recoil": "Suitable for complex derived state management."
},
"AvoidingPropDrilling": "Leverage context API or state management libraries."
},
"DataFetching": {
"Patterns": {
"ReactQuery": [
"Easy handling of server state.",
"Built-in caching and invalidation."
],
"Suspense": "For loading indicators while fetching data."
},
"CachingStrategies": "Use stale-while-revalidate for efficient user experience."
},
"PerformanceOptimization": {
"Memoization": [
"useMemo() for values, useCallback() for functions.",
"Helps prevent unnecessary renders."
],
"LazyLoading": "Implement with `React.lazy()` and `Suspense`.",
"Virtualization": "Use libraries like `react-window` or `react-virtualized`."
},
"TypeSafety": {
"UsingTypeScript": "Provide type safety across components and props.",
"TypingPatterns": [
"Use interfaces for props.",
"Utility types like Partial, Pick."
]
},
"StylingApproaches": {
"CSSModules": "Scoped styles, preventing global style conflicts.",
"Tailwind": "Utility-first, fast styling, theming support.",
"CSSinJS": "Dynamic styling, component-scoped."
},
"Testing": {
"UnitTesting": "Focus on individual components.",
"IntegrationTesting": "Ensure components work together.",
"Tools": [
"React Testing Library",
"Jest",
"Coverage tools like `jest --coverage`."
]
},
"Accessibility": {
"ARIA": "Use semantic HTML and ARIA roles.",
"KeyboardNavigation": "Ensure all interactive elements are accessible via keyboard.",
"FocusManagement": "Manage focus transitions on page updates."
},
"Tooling&DevWorkflow": {
"ESLintConfigs": "Preconfigured Airbnb or Standard Style.",
"Prettier": "Auto-formatting for code consistency.",
"lint-staged": "Run linters on staged files only.",
"Husky": "Git hooks for pre-commit checks."
},
"Deployment": {
"Frameworks": {
"Vercel": "Optimized for Next.js applications.",
"Netlify": "Supports a wide range of static and dynamic apps."
},
"EnvironmentVariables": "Use `.env` files for sensitive info.",
"BuildOptimization": "Minimize and tree-shake unnecessary code."
}
}
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/components/ScrollTop.jsx",
"summary": "Code patch introduces a minor issue in propTypes definition.",
"issues": [
{
"type": "bug",
"severity": "low",
"description": "The order of PropTypes in oneOfType may lead to confusion; PropTypes.node should typically be listed first.",
"recommendation": "Change the propTypes definition back to [PropTypes.node, PropTypes.any] for clarity and to follow common conventions."
}
],
"approval": false
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/hooks/useConfig.js",
"summary": "Corrects the error message in useConfig hook.",
"issues": [],
"approval": true
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavItem.jsx",
"summary": "Code patch correctly updates styles but lacks clarity.",
"issues": [
{
"type": "improvement",
"severity": "low",
"description": "The style object is somewhat hard to read due to the use of nested objects.",
"recommendation": "Consider using a clearer structure for the style object to enhance readability."
}
],
"approval": false
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/MiniDrawerStyled.js",
"summary": "The patch correctly updates to use theme.vars for handling theme customizations.",
"issues": [],
"approval": true
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/index.jsx",
"summary": "The code patch is mostly acceptable but has room for improvement.",
"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Using slotProps for styling can be less clear than using sx directly, especially for components that are well-known like MuiDrawer.",
"recommendation": "Consider retaining the original sx usage for the paper component directly within the Drawer as it provides clearer context and is more in line with common customizability practices."
}
],
"approval": false
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/components/ScrollTop.jsx",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "Using PropTypes.any is generally discouraged as it allows any type of value which undermines the advantages of PropTypes validation.",
"recommendedFix": "Replace PropTypes.any with a more specific type if possible, or remove it entirely.",
"codeFix": "ScrollTop.propTypes = { children: PropTypes.oneOfType([PropTypes.node]) };"
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/hooks/useConfig.js",
"approved": false,
"issues": [
{
"type": "bug",
"severity": "high",
"description": "There is a typo in the error message where 'useSConfig' should be 'useConfig'.",
"recommendedFix": "Correct the typo in the error message to accurately reflect the hook name.",
"codeFix": "if (!context) throw new Error('useConfig must be used inside ConfigProvider');"
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavItem.jsx",
"approved": false,
"issues": [
{
"type": "bug",
"severity": "medium",
"description": "The nested object structure for conditional styling is misformatted, leading to a possible syntax error.",
"recommendedFix": "Ensure the object is properly formatted to maintain correct JavaScript object syntax.",
"codeFix": "const styles = { ...(!drawerOpen && isSelected ? { bgcolor: 'primary.lighter', '&:hover': { bgcolor: 'primary.lighter' } } : {}) };"
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/MiniDrawerStyled.js",
"approved": false,
"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Using theme.vars for accessing styles may lead to inconsistencies if the theme is not universally updated to support the new vars structure across all components.",
"recommendedFix": "Ensure all parts of the theme use a consistent method of accessing styles. Revert theme.vars changes if the rest of the application does not follow this pattern.",
"codeFix": "borderRightColor: theme.palette.divider,\nboxShadow: theme.customShadows.z1"
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/layout/Dashboard/Drawer/index.jsx",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using slotProps for style customization is unnecessary and can be less readable compared to directly utilizing sx props.",
"recommendedFix": "Revert to using sx directly for the paper styling to maintain clarity and conciseness.",
"codeFix": " sx={{ display: { xs: drawerOpen ? 'block' : 'none', lg: 'none' }, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH, borderRight: '1px solid', borderRightColor: 'divider', boxShadow: 'inherit' } }} "
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/components/ScrollTop.jsx",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "The order of PropTypes should be more specific to general. Using PropTypes.any before PropTypes.node is not recommended as it allows for types that don't provide value in this context.",
"recommendedFix": "Change the order of the PropTypes to list PropTypes.node before PropTypes.any.",
"codeFix": "ScrollTop.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.any]) };"
}
]
}
Contributor
phoenixcoded20
left a comment
phoenixcoded20
left a comment
There was a problem hiding this comment.
{
"file": "src/components/ScrollTop.jsx",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "The order of PropTypes should prioritize more specific types over less specific ones. 'PropTypes.node' is more specific than 'PropTypes.any'.",
"recommendedFix": "Change the order of the PropTypes to list 'PropTypes.node' first and 'PropTypes.any' second.",
"codeFix": "ScrollTop.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.any]) };"
}
]
}
…on change version and one issue fix
| { | ||
| "name": "mantis-material-free-react", | ||
| "version": "4.0.0", | ||
| "version": "2.0.1", |
Contributor
There was a problem hiding this comment.
Is this correct version?
Member
There was a problem hiding this comment.
Yes, because the free version release is according set this version, and 4.0.0 is the pro version.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Commit Checklist
npx prettier --write .npx eslint src\ --fixcommandGeneral