react-human-made

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Human Made React Standards

Human Made React组件规范

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

大多数情况下使用带Hooks的函数式组件
仅在外部库要求时使用类组件
保持组件专注且单一职责
将复杂逻辑提取到自定义Hooks中

Semantic HTML

语义化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

使用语义化HTML5元素 (
```
<article>
```
,
```
<section>
```
,
```
<nav>
```
, etc.)
```
onClick
```
处理器仅用于可聚焦元素（按钮、链接）
确保交互式元素的键盘可访问性
当语义化HTML不足以满足需求时使用ARIA属性

Props and State

Props与状态

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

为所有组件属性指定PropTypes
优先使用Props而非状态；必要时提升状态
避免在DOM中存储状态
表单输入使用受控组件

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

示例组件

jsx

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;

jsx

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

WordPress区块编辑器

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

构建Gutenberg区块时：

使用
```
@wordpress/element
```
作为React（它会重新导出React）
使用
```
@wordpress/components
```
获取UI基础组件
使用
```
@wordpress/block-editor
```
获取区块专属组件
遵循block.json schema进行区块注册
使用
```
@wordpress/data
```
配合WordPress存储进行状态管理