Rovo config example for enforcing an event naming convention in React components

[Krisztián Balla]

I thought this was interesting and sharing it might help others. We sometimes run into the problem of inexperienced developers naming React callback properties (which are really always events triggered by the component) according to what is happening in the parent component. This is wrong as these event callbacks should be named from the point of view of the component itself. Moreover it is common practice to start the name with "on" following how event callbacks are named on standard HTML elements (i.e. onClick for the click event of a button).

This is the config I came up with which addresses this issue:

## React code specific rules

### Enforce consistent naming for the events of React components

What: Check that every property of a React component which is a callback function is named according to the event which triggers the function. In addition the name of these properties should always start with the word "on".

Why: This rule makes sure that all properties on our React components that are event callbacks follow the standard HTML naming convention.

Example 1 - Correct code - The onOkClick property is named according to the click event of the OK button:

```tsx
/** Type for the properties of the MessageBox React component. */
type MessageBoxProps = {
    /** The text displayed in the message box. */
    text: string;
    /** The event executed when the user clicks the OK button in the message box. */
    onOkClick: () => void;
};

/** The React component for the message box. */
class MessageBox extends React.Component<MessageBoxProps> {
    public override render(): React.ReactNode {
        return (
            <div>
                <span>{this.props.text}</span>
                <button type="button" onClick={this.props.onOkClick}>
                    OK
                </button>
            </div>
        );
    }
}
```

Example 2 - Wrong code - The performSomeTask property is not named according to the event it is triggered on:

```tsx
/** Type for the properties of the MessageBox React component. */
type MessageBoxProps = {
    /** The text displayed in the message box. */
    text: string;
    /** The event executed when the user clicks the OK button in the message box. */
    performSomeTask: () => void;
};

/** The React component for the message box. */
class MessageBox extends React.Component<MessageBoxProps> {
    public override render(): React.ReactNode {
        return (
            <div>
                <span>{this.props.text}</span>
                <button type="button" onClick={this.props.performSomeTask}>
                    OK
                </button>
            </div>
        );
    }
}
```