Building Reusable Components in React: A Comprehensive Guide

Introduction

In the world of modern web development, React has emerged as one of the most popular JavaScript libraries for building user interfaces. One of React's greatest strengths lies in its component-based architecture, which promotes code reusability, maintainability, and scalability. Building reusable components is not just a best practice—it's essential for creating efficient, maintainable applications that can grow with your needs.

Reusable components serve as the building blocks of your application, allowing you to write code once and use it multiple times across different parts of your project. This approach reduces redundancy, minimizes bugs, and creates a consistent user experience throughout your application. Whether you're building a small personal project or a large enterprise application, mastering the art of creating reusable React components will significantly improve your development workflow and code quality.

This comprehensive guide will explore the fundamental concepts and advanced techniques for building robust, reusable React components. We'll dive deep into props management, examine the composition versus inheritance paradigm, explore various state management strategies, and discuss styling approaches that maintain consistency while allowing for customization.

Understanding Props: The Foundation of Reusable Components

Props (short for properties) are the primary mechanism for passing data and configuration to React components. They serve as the interface between your component and the outside world, making components flexible and reusable across different contexts.

Basic Props Implementation

Let's start with a simple example of a reusable Button component:

`jsx const Button = ({ children, onClick, variant = 'primary', disabled = false }) => { const baseClasses = 'px-4 py-2 rounded font-medium transition-colors'; const variantClasses = { primary: 'bg-blue-500 text-white hover:bg-blue-600', secondary: 'bg-gray-300 text-gray-800 hover:bg-gray-400', danger: 'bg-red-500 text-white hover:bg-red-600' };

return ( {children} ); };

// Usage examples console.log('Primary clicked')}> Primary Button

console.log('Secondary clicked')}> Secondary Button

Disabled Danger Button `

This Button component demonstrates several key principles of reusable component design:

1. Default props: The variant and disabled props have default values, making the component usable with minimal configuration. 2. Flexible content: Using children allows the button to contain any content, not just text. 3. Event handling: The onClick prop enables the parent component to define behavior. 4. Visual variants: The variant prop allows for different visual styles while maintaining the same functionality.

Advanced Props Patterns

As components become more complex, you'll need more sophisticated prop patterns:

`jsx const Card = ({ title, subtitle, image, actions, children, className = '', headerClassName = '', bodyClassName = '', ...restProps }) => { return (

bg-white rounded-lg shadow-md overflow-hidden ${className}} {...restProps} > {image && (

)}

p-6 ${headerClassName}}> {title &&

{title}

} {subtitle &&

{subtitle}

}

{children && (

px-6 pb-4 ${bodyClassName}}> {children}

)} {actions && (

{actions}

)}

// Usage example Edit, Delete ]} className="max-w-sm" onClick={() => console.log('Card clicked')} >

Additional content can go here.

This Card component showcases advanced prop patterns:

1. Object props: The image prop accepts an object with src and alt properties. 2. Array props: The actions prop accepts an array of React elements. 3. Spread operator: ...restProps allows passing any additional props to the root element. 4. Conditional rendering: Components only render when the relevant props are provided. 5. Customizable styling: Multiple className props allow styling different parts of the component.

PropTypes and TypeScript for Better Props

To make your components more robust and developer-friendly, consider using PropTypes or TypeScript:

`jsx import PropTypes from 'prop-types';

const DataTable = ({ columns, data, onRowClick, loading = false }) => { if (loading) { return

return (

DataTable.propTypes = { columns: PropTypes.arrayOf( PropTypes.shape({ key: PropTypes.string.isRequired, label: PropTypes.string.isRequired, render: PropTypes.func }) ).isRequired, data: PropTypes.array.isRequired, onRowClick: PropTypes.func, loading: PropTypes.bool }; `

Composition vs Inheritance: The React Way

React strongly favors composition over inheritance for component reuse. This approach provides greater flexibility and makes components easier to understand and maintain.

Understanding Composition

Composition involves building complex components by combining simpler ones. This approach creates a more flexible and maintainable codebase:

`jsx const Modal = ({ isOpen, onClose, children }) => { if (!isOpen) return null;

return (

const ModalHeader = ({ children, onClose }) => (

const ModalBody = ({ children }) => (

const ModalFooter = ({ children }) => (

// Usage example const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, message }) => ( {title}

{message}

Specialized Components Through Composition

You can create specialized versions of components while maintaining the flexibility of the base components:

`jsx const FormField = ({ label, error, required, children, className = '' }) => (

const Input = ({ className = '', error, ...props }) => ( );

const TextArea = ({ className = '', error, rows = 3, ...props }) => ( );</p><p>// Specialized composed components const TextInput = ({ label, error, required, ...inputProps }) => ( <FormField label={label} error={error} required={required}> <Input error={error} {...inputProps} /> </FormField> );</p><p>const TextAreaInput = ({ label, error, required, ...textareaProps }) => ( <FormField label={label} error={error} required={required}> <TextArea error={error} {...textareaProps} /> </FormField> );</p><p>// Usage in a form const ContactForm = () => ( <form> <TextInput label="Full Name" required placeholder="Enter your full name" /> <TextInput label="Email" type="email" required placeholder="Enter your email" /> <TextAreaInput label="Message" required placeholder="Enter your message" rows={5} /> </form> ); <code></code>`</p><p><h3>Higher-Order Components (HOCs) and Render Props</h3></p><p>While composition is preferred, HOCs and render props are powerful patterns for sharing logic between components:</p><p><code></code>`jsx // HOC example const withLoading = (WrappedComponent) => { return ({ isLoading, ...props }) => { if (isLoading) { return ( <div className="flex items-center justify-center p-8"> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div> </div> ); } return <WrappedComponent {...props} />; }; };</p><p>// Render props example const DataFetcher = ({ url, children }) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);</p><p> useEffect(() => { fetch(url) .then(response => response.json()) .then(data => { setData(data); setLoading(false); }) .catch(error => { setError(error); setLoading(false); }); }, [url]);</p><p> return children({ data, loading, error }); };</p><p>// Usage const UserProfile = ({ userId }) => ( <DataFetcher url={<code>/api/users/${userId}</code>}> {({ data, loading, error }) => { if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <div>Welcome, {data.name}!</div>; }} </DataFetcher> ); <code></code>`</p><p><h2>State Management in Reusable Components</h2></p><p>Effective state management is crucial for building reusable components that work well in different contexts while maintaining their internal logic.</p><p><h3>Local State with useState</h3></p><p>For simple state management, the <code>useState</code> hook is often sufficient:</p><p><code></code>`jsx const Accordion = ({ items, allowMultiple = false }) => { const [openItems, setOpenItems] = useState(new Set());</p><p> const toggleItem = (index) => { const newOpenItems = new Set(openItems); if (allowMultiple) { if (newOpenItems.has(index)) { newOpenItems.delete(index); } else { newOpenItems.add(index); } } else { if (newOpenItems.has(index)) { newOpenItems.clear(); } else { newOpenItems.clear(); newOpenItems.add(index); } } setOpenItems(newOpenItems); };</p><p> return ( <div className="border border-gray-200 rounded-lg overflow-hidden"> {items.map((item, index) => ( <div key={index} className="border-b border-gray-200 last:border-b-0"> <button className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onClick={() => toggleItem(index)} > <span className="font-medium">{item.title}</span> <span className={`transform transition-transform ${ openItems.has(index) ? 'rotate-180' : '' }`}> ▼ </span> </button> {openItems.has(index) && ( <div className="px-4 py-3 bg-white"> {item.content} </div> )} </div> ))} </div> ); }; <code></code>`</p><p><h3>Controlled vs Uncontrolled Components</h3></p><p>Reusable components should often support both controlled and uncontrolled usage:</p><p><code></code>`jsx const SearchInput = ({ value: controlledValue, onChange: controlledOnChange, onSearch, placeholder = "Search...", debounceMs = 300 }) => { const [internalValue, setInternalValue] = useState(''); const [debouncedValue, setDebouncedValue] = useState(''); const isControlled = controlledValue !== undefined; const value = isControlled ? controlledValue : internalValue; // Debounce logic useEffect(() => { const timer = setTimeout(() => { setDebouncedValue(value); }, debounceMs);</p><p> return () => clearTimeout(timer); }, [value, debounceMs]);</p><p> // Call onSearch when debounced value changes useEffect(() => { if (onSearch && debouncedValue !== '') { onSearch(debouncedValue); } }, [debouncedValue, onSearch]);</p><p> const handleChange = (e) => { const newValue = e.target.value; if (isControlled) { controlledOnChange?.(e); } else { setInternalValue(newValue); } };</p><p> const handleClear = () => { if (isControlled) { controlledOnChange?.({ target: { value: '' } }); } else { setInternalValue(''); } };</p><p> return ( <div className="relative"> <input type="text" value={value} onChange={handleChange} placeholder={placeholder} className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> {value && ( <button onClick={handleClear} className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700" > × </button> )} </div> ); };</p><p>// Uncontrolled usage <SearchInput onSearch={(query) => console.log('Searching for:', query)} /></p><p>// Controlled usage const [searchQuery, setSearchQuery] = useState(''); <SearchInput value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} onSearch={(query) => console.log('Searching for:', query)} /> <code></code>`</p><p><h3>Complex State with useReducer</h3></p><p>For more complex state logic, <code>useReducer</code> provides better organization:</p><p><code></code>`jsx const initialState = { items: [], selectedItems: new Set(), sortBy: 'name', sortOrder: 'asc', filter: '' };</p><p>const listReducer = (state, action) => { switch (action.type) { case 'SET_ITEMS': return { ...state, items: action.payload }; case 'TOGGLE_ITEM': const newSelectedItems = new Set(state.selectedItems); if (newSelectedItems.has(action.payload)) { newSelectedItems.delete(action.payload); } else { newSelectedItems.add(action.payload); } return { ...state, selectedItems: newSelectedItems }; case 'SELECT_ALL': return { ...state, selectedItems: new Set(state.items.map(item => item.id)) }; case 'CLEAR_SELECTION': return { ...state, selectedItems: new Set() }; case 'SET_SORT': return { ...state, sortBy: action.payload.sortBy, sortOrder: action.payload.sortOrder }; case 'SET_FILTER': return { ...state, filter: action.payload }; default: return state; } };</p><p>const SelectableList = ({ items, onSelectionChange }) => { const [state, dispatch] = useReducer(listReducer, { ...initialState, items });</p><p> // Update items when prop changes useEffect(() => { dispatch({ type: 'SET_ITEMS', payload: items }); }, [items]);</p><p> // Notify parent of selection changes useEffect(() => { onSelectionChange?.(Array.from(state.selectedItems)); }, [state.selectedItems, onSelectionChange]);</p><p> // Compute filtered and sorted items const processedItems = useMemo(() => { let filtered = state.items.filter(item => item.name.toLowerCase().includes(state.filter.toLowerCase()) );</p><p> return filtered.sort((a, b) => { const aValue = a[state.sortBy]; const bValue = b[state.sortBy]; const comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0; return state.sortOrder === 'asc' ? comparison : -comparison; }); }, [state.items, state.filter, state.sortBy, state.sortOrder]);</p><p> return ( <div className="border border-gray-200 rounded-lg"> {/<em> Controls </em>/} <div className="p-4 border-b bg-gray-50 flex justify-between items-center"> <div className="flex space-x-2"> <button onClick={() => dispatch({ type: 'SELECT_ALL' })} className="px-3 py-1 bg-blue-500 text-white rounded text-sm" > Select All </button> <button onClick={() => dispatch({ type: 'CLEAR_SELECTION' })} className="px-3 py-1 bg-gray-500 text-white rounded text-sm" > Clear </button> </div> <input type="text" placeholder="Filter items..." value={state.filter} onChange={(e) => dispatch({ type: 'SET_FILTER', payload: e.target.value })} className="px-3 py-1 border border-gray-300 rounded" /> </div></p><p> {/<em> Items </em>/} <div className="max-h-64 overflow-y-auto"> {processedItems.map(item => ( <div key={item.id} className={`p-3 border-b border-gray-100 flex items-center cursor-pointer hover:bg-gray-50 ${ state.selectedItems.has(item.id) ? 'bg-blue-50' : '' }`} onClick={() => dispatch({ type: 'TOGGLE_ITEM', payload: item.id })} > <input type="checkbox" checked={state.selectedItems.has(item.id)} onChange={() => {}} // Handled by div onClick className="mr-3" /> <span>{item.name}</span> </div> ))} </div> </div> ); }; <code></code>`</p><p><h2>Styling Strategies for Reusable Components</h2></p><p>Choosing the right styling approach is crucial for creating components that are both visually consistent and customizable.</p><p><h3>CSS Modules Approach</h3></p><p>CSS Modules provide scoped styling that prevents conflicts:</p><p><code></code>`css /<em> Button.module.css </em>/ .button { padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; }</p><p>.button:disabled { opacity: 0.5; cursor: not-allowed; }</p><p>.primary { background-color: #3b82f6; color: white; }</p><p>.primary:hover:not(:disabled) { background-color: #2563eb; }</p><p>.secondary { background-color: #e5e7eb; color: #374151; }</p><p>.secondary:hover:not(:disabled) { background-color: #d1d5db; }</p><p>.large { padding: 0.75rem 1.5rem; font-size: 1rem; }</p><p>.small { padding: 0.375rem 0.75rem; font-size: 0.75rem; } <code></code>`</p><p><code></code>`jsx // Button.jsx import styles from './Button.module.css';</p><p>const Button = ({ children, variant = 'primary', size = 'medium', className = '', ...props }) => { const classes = [ styles.button, styles[variant], size !== 'medium' ? styles[size] : '', className ].filter(Boolean).join(' ');</p><p> return ( <button className={classes} {...props}> {children} </button> ); }; <code></code>`</p><p><h3>Styled Components with Theming</h3></p><p>Styled Components offer dynamic styling with JavaScript:</p><p><code></code>`jsx import styled, { ThemeProvider } from 'styled-components';</p><p>const theme = { colors: { primary: '#3b82f6', primaryHover: '#2563eb', secondary: '#e5e7eb', secondaryHover: '#d1d5db', text: '#374151', white: '#ffffff' }, spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2rem' }, borderRadius: { sm: '0.25rem', md: '0.375rem', lg: '0.5rem' } };</p><p>const StyledButton = styled.button` padding: ${props => { switch (props.size) { case 'small': return <code>${props.theme.spacing.xs} ${props.theme.spacing.sm}</code>; case 'large': return <code>${props.theme.spacing.sm} ${props.theme.spacing.lg}</code>; default: return <code>${props.theme.spacing.sm} ${props.theme.spacing.md}</code>; } }}; border: none; border-radius: ${props => props.theme.borderRadius.md}; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-size: ${props => { switch (props.size) { case 'small': return '0.75rem'; case 'large': return '1rem'; default: return '0.875rem'; } }};</p><p> background-color: ${props => { switch (props.variant) { case 'secondary': return props.theme.colors.secondary; default: return props.theme.colors.primary; } }};</p><p> color: ${props => { switch (props.variant) { case 'secondary': return props.theme.colors.text; default: return props.theme.colors.white; } }};</p><p> &:hover:not(:disabled) { background-color: ${props => { switch (props.variant) { case 'secondary': return props.theme.colors.secondaryHover; default: return props.theme.colors.primaryHover; } }}; }</p><p> &:disabled { opacity: 0.5; cursor: not-allowed; } `;</p><p>const Button = ({ children, ...props }) => ( <StyledButton {...props}> {children} </StyledButton> );</p><p>// Usage with theme const App = () => ( <ThemeProvider theme={theme}> <Button>Primary Button</Button> <Button variant="secondary" size="large">Secondary Large</Button> </ThemeProvider> ); <code></code>`</p><p><h3>Utility-First with Tailwind CSS</h3></p><p>Tailwind CSS provides utility classes for rapid styling:</p><p><code></code>`jsx const Button = ({ children, variant = 'primary', size = 'md', className = '', ...props }) => { const baseClasses = 'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'; const variantClasses = { primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500', outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500' }; const sizeClasses = { sm: 'px-3 py-2 text-sm', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base' };</p><p> const classes = [ baseClasses, variantClasses[variant], sizeClasses[size], className ].join(' ');</p><p> return ( <button className={classes} {...props}> {children} </button> ); };</p><p>// Icon Button variant const IconButton = ({ icon, children, ...props }) => ( <Button {...props}> <span className="mr-2">{icon}</span> {children} </Button> );</p><p>// Usage <IconButton icon="🔍" variant="outline"> Search </IconButton> <code></code>`</p><p><h3>CSS-in-JS with Emotion</h3></p><p>Emotion provides similar capabilities to styled-components with some performance benefits:</p><p><code></code>`jsx import { css, cx } from '@emotion/css';</p><p>const buttonStyles = css` padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem;</p><p> &:disabled { opacity: 0.5; cursor: not-allowed; } `;</p><p>const variantStyles = { primary: css` background-color: #3b82f6; color: white; &:hover:not(:disabled) { background-color: #2563eb; } `, secondary: css` background-color: #e5e7eb; color: #374151; &:hover:not(:disabled) { background-color: #d1d5db; } ` };</p><p>const Button = ({ children, variant = 'primary', className, ...props }) => ( <button className={cx( buttonStyles, variantStyles[variant], className )} {...props} > {children} </button> ); <code></code>`</p><p><h2>Advanced Patterns and Best Practices</h2></p><p><h3>Compound Components Pattern</h3></p><p>This pattern allows components to work together while maintaining a clean API:</p><p><code></code>`jsx const Tabs = ({ children, defaultTab = 0 }) => { const [activeTab, setActiveTab] = useState(defaultTab); const tabsContext = { activeTab, setActiveTab };</p><p> return ( <TabsContext.Provider value={tabsContext}> <div className="w-full"> {children} </div> </TabsContext.Provider> ); };</p><p>const TabsList = ({ children }) => ( <div className="flex border-b border-gray-200"> {children} </div> );</p><p>const Tab = ({ children, index }) => { const { activeTab, setActiveTab } = useContext(TabsContext); const isActive = activeTab === index;</p><p> return ( <button className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${ isActive ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700' }`} onClick={() => setActiveTab(index)} > {children} </button> ); };</p><p>const TabsContent = ({ children }) => { const { activeTab } = useContext(TabsContext); return ( <div className="py-4"> {React.Children.toArray(children)[activeTab]} </div> ); };</p><p>// Usage <Tabs defaultTab={0}> <TabsList> <Tab index={0}>Profile</Tab> <Tab index={1}>Settings</Tab> <Tab index={2}>Billing</Tab> </TabsList> <TabsContent> <div>Profile content</div> <div>Settings content</div> <div>Billing content</div> </TabsContent> </Tabs> <code></code>`</p><p><h3>Performance Optimization</h3></p><p>Use React.memo and useMemo for performance-critical components:</p><p><code></code>`jsx const ExpensiveListItem = React.memo(({ item, onSelect, isSelected }) => { const computedValue = useMemo(() => { // Expensive computation return item.data.reduce((sum, value) => sum + value.amount, 0); }, [item.data]);</p><p> return ( <div className={`p-4 border-b cursor-pointer ${ isSelected ? 'bg-blue-50' : 'hover:bg-gray-50' }`} onClick={() => onSelect(item.id)} > <h3 className="font-medium">{item.name}</h3> <p className="text-gray-600">Total: ${computedValue}</p> </div> ); });</p><p>const VirtualizedList = ({ items, onItemSelect, selectedItems }) => { const memoizedItems = useMemo(() => items.map(item => ({ ...item, isSelected: selectedItems.includes(item.id) })), [items, selectedItems] );</p><p> return ( <div className="max-h-96 overflow-y-auto"> {memoizedItems.map(item => ( <ExpensiveListItem key={item.id} item={item} onSelect={onItemSelect} isSelected={item.isSelected} /> ))} </div> ); }; <code></code>`</p><p><h2>Testing Reusable Components</h2></p><p>Comprehensive testing ensures your reusable components work correctly across different scenarios:</p><p><code></code>`jsx import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Button } from './Button';</p><p>describe('Button Component', () => { test('renders with default props', () => { render(<Button>Click me</Button>); const button = screen.getByRole('button', { name: /click me/i }); expect(button).toBeInTheDocument(); expect(button).toHaveClass('primary'); });</p><p> test('handles click events', async () => { const handleClick = jest.fn(); render(<Button onClick={handleClick}>Click me</Button>); await userEvent.click(screen.getByRole('button')); expect(handleClick).toHaveBeenCalledTimes(1); });</p><p> test('applies variant styles correctly', () => { render(<Button variant="secondary">Secondary</Button>); expect(screen.getByRole('button')).toHaveClass('secondary'); });</p><p> test('disables button when disabled prop is true', () => { render(<Button disabled>Disabled</Button>); const button = screen.getByRole('button'); expect(button).toBeDisabled(); expect(button).toHaveClass('disabled'); });</p><p> test('forwards additional props', () => { render(<Button data-testid="custom-button" aria-label="Custom">Test</Button>); const button = screen.getByTestId('custom-button'); expect(button).toHaveAttribute('aria-label', 'Custom'); }); }); <code></code>`</p><p><h2>Conclusion</h2></p><p>Building reusable React components is both an art and a science that requires careful consideration of multiple factors. Throughout this comprehensive guide, we've explored the fundamental principles and advanced techniques that make components truly reusable and maintainable.</p><p>The key to successful reusable components lies in finding the right balance between flexibility and simplicity. Props serve as the primary interface for customization, but they should be designed thoughtfully to avoid overwhelming users with too many options. The composition pattern, favored by React, provides superior flexibility compared to inheritance and allows for building complex interfaces from simple, focused components.</p><p>State management within reusable components requires careful consideration of whether to use local state, controlled/uncontrolled patterns, or more complex state management solutions. The choice depends on the component's complexity and the level of control needed by parent components.</p><p>Styling strategies should align with your project's architecture and team preferences. Whether you choose CSS Modules, Styled Components, Tailwind CSS, or CSS-in-JS solutions like Emotion, consistency and maintainability should be your primary concerns.</p><p>Advanced patterns like compound components, performance optimization techniques, and comprehensive testing strategies ensure that your components not only work correctly but also provide excellent developer experience and performance.</p><p>Remember that building truly reusable components is an iterative process. Start with simple, focused components and gradually add features and flexibility as needed. Pay attention to how your components are used in real applications and be prepared to refactor and improve them based on actual usage patterns.</p><p>By following the principles and patterns outlined in this guide, you'll be well-equipped to create a library of reusable React components that will serve as the foundation for scalable, maintainable applications. The investment in building quality reusable components pays dividends in reduced development time, fewer bugs, and more consistent user experiences across your applications.</p> </main> <section> <h2>Tags</h2> <ul class="tags"> <li itemprop="keywords">Components</li><li itemprop="keywords">Frontend</li><li itemprop="keywords">JavaScript</li><li itemprop="keywords">Props</li><li itemprop="keywords">React</li> </ul> </section> <section> <h2>Related Articles</h2> <ul> <li> <a href="/articles/javascript-modules-guide-organize-code-like-a-pro-2025" rel="related"> JavaScript Modules Guide: Organize Code Like a Pro 2025 </a> </li> <li> <a href="/articles/javascript-code-organization-best-practices-guide-2025" rel="related"> JavaScript Code Organization Best Practices Guide 2025 </a> </li> <li> <a href="/articles/vue-form-validation-vuelidate-vs-vee-validate-guide" rel="related"> Vue Form Validation: Vuelidate vs vee-validate Guide </a> </li> <li> <a href="/articles/vue-router-navigation-and-dynamic-routing-made-simple" rel="related"> Vue Router: Navigation and Dynamic Routing Made Simple </a> </li> <li> <a href="/articles/building-reusable-vue-components-complete-architecture-guide" rel="related"> Building Reusable Vue Components: Complete Architecture Guide </a> </li> <li> <a href="/articles/vue-3-composition-api-complete-developer-guide-and-tutorial" rel="related"> Vue 3 Composition API: Complete Developer Guide & Tutorial </a> </li> <li> <a href="/articles/state-management-in-vue-with-pinia-modern-vuex-alternative" rel="related"> State Management in Vue with Pinia: Modern Vuex Alternative </a> </li> <li> <a href="/articles/vue-4-roadmap-what-developers-should-expect" rel="related"> Vue 4 Roadmap: What Developers Should Expect </a> </li> </ul> </section> <section> <h2>Related Books - Expand Your Knowledge</h2> <p>Explore these JavaScript books to deepen your understanding:</p> <ul> <li> <a href="/book/284/writing-maintainable-and-scalable-javascript-code-dargslan" rel="related"> Writing Maintainable and Scalable JavaScript Code </a> by Dargslan - 8.99 EUR </li> <li> <a href="/book/283/testing-javascript-applications-with-jest-and-mocha-dargslan" rel="related"> Testing JavaScript Applications with Jest and Mocha </a> by Dargslan - 5.99 EUR </li> <li> <a href="/book/282/javascript-security-xss-csrf-and-secure-coding-dargslan" rel="related"> JavaScript Security: XSS, CSRF, and Secure Coding </a> by Dargslan - 6.99 EUR </li> <li> <a href="/book/281/design-patterns-in-javascript-dargslan" rel="related"> Design Patterns in JavaScript </a> by Dargslan - 8.99 EUR </li> </ul> <p><a href="/books">Browse all IT books</a></p> </section> <section> <h2>Popular Technical Articles & Tutorials</h2> <p>Explore our comprehensive collection of technical articles, programming tutorials, and IT guides written by industry experts:</p> <nav aria-label="Popular Articles"> <ul> <li><a href="/articles/fastapi-postgresql-tutorial-build-production-ready-python-apis">FastAPI PostgreSQL Tutorial: Build Production-Ready Python APIs</a></li><li><a href="/articles/powershell-parallel-processing-complete-multithreading-guide">PowerShell Parallel Processing: Complete Multithreading Guide</a></li><li><a href="/articles/python-json-file-handling-complete-guide-with-examples">Python JSON File Handling: Complete Guide with Examples</a></li><li><a href="/articles/automate-linux-backups-with-bash-complete-2025-guide">Automate Linux Backups with Bash: Complete 2025 Guide</a></li><li><a href="/articles/linux-file-permissions-guide-for-beginners">Linux File Permissions Guide for Beginners</a></li><li><a href="/articles/javascript-modules-guide-organize-code-like-a-pro-2025">JavaScript Modules Guide: Organize Code Like a Pro 2025</a></li><li><a href="/articles/javascript-code-organization-best-practices-guide-2025">JavaScript Code Organization Best Practices Guide 2025</a></li><li><a href="/articles/vue-form-validation-vuelidate-vs-vee-validate-guide">Vue Form Validation: Vuelidate vs vee-validate Guide</a></li> </ul> </nav> <p><a href="/articles">Browse all 8+ technical articles</a> | <a href="/blog">Read our IT blog</a></p> </section> </article> </div> <!-- End SEO Content --> <!-- SSR H1 for SEO and accessibility - screen-reader-only to prevent visual duplication --> <h1 class="sr-only">Building Reusable Components in React: Complete Guide</h1> <div id="root"></div> <script> // Vite preamble detection helper - both variables needed window.__vite_react_preamble_installed__ = true; window.__vite_plugin_react_preamble_installed__ = true; </script> </body> </html>