Human Made React Standards

Component Style

• Use functional components with hooks for most cases
• Class components only when required by external libraries
• Keep components focused and single-purpose
• Extract complex logic into custom hooks

Semantic HTML

• Use semantic HTML5 elements (<article>, <section>, <nav>, etc.)
• onClick handlers only on focusable elements (buttons, links)
• Ensure keyboard accessibility for interactive elements
• Use ARIA attributes when semantic HTML is insufficient

Props and State

• Specify PropTypes for all component properties
• Prefer props over state; lift state up when needed
• Avoid storing state in DOM
• Use controlled components for form inputs

Component Organization

• Co-locate styles and tests with components
• One component per file for significant components
• Small helper components can share a file with their parent

Example Component

import PropTypes from 'prop-types';
import { useState, useCallback } from 'react';

const UserCard = ( { user, onSelect } ) => {
    const [ isExpanded, setIsExpanded ] = useState( false );

    const handleToggle = useCallback( () => {
        setIsExpanded( prev => ! prev );
    }, [] );

    return (
        <article className="user-card">
            <h3>{ user.name }</h3>
            <button onClick={ handleToggle }>
                { isExpanded ? 'Collapse' : 'Expand' }
            </button>
            { isExpanded && (
                <div className="user-card__details">
                    <p>{ user.email }</p>
                    <button onClick={ () => onSelect( user.id ) }>
                        Select User
                    </button>
                </div>
            ) }
        </article>
    );
};

UserCard.propTypes = {
    user: PropTypes.shape( {
        id: PropTypes.number.isRequired,
        name: PropTypes.string.isRequired,
        email: PropTypes.string.isRequired,
    } ).isRequired,
    onSelect: PropTypes.func.isRequired,
};

export default UserCard;

WordPress Block Editor

When building Gutenberg blocks:

• Use @wordpress/element for React (it re-exports React)
• Use @wordpress/components for UI primitives
• Use @wordpress/block-editor for block-specific components
• Follow the block.json schema for block registration
• Use @wordpress/data for state management with WordPress stores