React Classes

class Human {
  constructor() {
    this.gender = 'male'
  }

  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    super()
    this.name = 'Max'
    this.gender = 'female'
  }
  
  printMyName() {
    console.log(this.name)
  }
}

const person = new Person()
person.printMyName()
person.printGender()

class Human {
  gender = 'male'

  printGender = () => console.log(this.gender)
}

class Person extends Human {
  name = 'Max'
  gender = 'female'
  
  printMyName = () => console.log(this.name)
}

const person = new Person()
person.printMyName()
person.printGender()

ES6: Try it on jsbin
ES7: Try it on jsbin

As you can see the Docusaurus live editor works fine with es6 standard. About restrictions of arrow function read developer.mozilla.org.

Live Editor

class Person extends React.Component {
  constructor(){
    this.name = 'MAx'
    this.gender = 'female'

    printGender = () => this.gender
  }

  render() {
    return (
      <div>
        <h2>It is {this.name}</h2>
        <h3>{printGender()}</h3>
      </div>
    );
  }
}

class Person extends React.Component {
  constructor(){
    this.name = 'MAx'
    this.gender = 'female'

    printGender = () => this.gender
  }

  render() {
    return (
      <div>
        <h2>It is {this.name}</h2>
        <h3>{printGender()}</h3>
      </div>
    );
  }
}

Result