[Docs] sort-comp: add class component examples

CHANGELOG.md

@@ -20,7 +20,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-indent-props`]: improved readability of the checkNodesIndent function ([#3315][] @caroline223)
 * [Tests] [`jsx-indent`], [`jsx-one-expression-per-line`]: add passing test cases ([#3314][] @ROSSROSALES)
 * [Refactor] `boolean-prop-naming`, `jsx-indent`: avoid assigning to arguments ([#3316][] @caroline223)
+* [Docs] `sort-comp`: add class component examples ([#3339][] @maurer2)
 
+[#3339]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3339
 [#3331]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3331
 [#3328]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3328
 [#3327]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3327

docs/rules/sort-comp.md

@@ -24,6 +24,15 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+  static displayName = 'Hello';
+}
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
@@ -35,6 +44,15 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  static displayName = 'Hello';
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 ## Rule Options
 
 This rule can take one argument to customize the components organisation.
@@ -128,6 +146,16 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+  onClick = this.onClick.bind(this);
+  onClick() {}
+}
+```
+
 Examples of **correct** code for this rule, with the above configuration:
 
 ```jsx
@@ -139,6 +167,16 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 If you want to split your `render` method into smaller ones and keep them just before render:
 
 ```js
@@ -170,6 +208,17 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  renderButton = () => {}
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 Examples of **correct** code for this rule, with the above configuration:
 
 ```jsx
@@ -182,6 +231,17 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  renderButton = () => {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 If you want to flow annotations to be at the top:
 
 ```js