Антон Спирин

date={new Date('Thu Aug 29 2019 11:22:58')}

Установите и импортируйте в проект regenerator-runtime

Вы не можете использовать BigInt пока у вас в tsconfig.json в compilerOptions свойство target в значении отличном от ESNext. Но делать этого не стоит, так как Safari, IE и Edge о BigInt ничего не знают.

BigInt. Совместимость браузера
can-i-use

В вашем примере, чтобы в вызове this.setState, this указывал на ваш компонент, а не на undefined.
Сейчас в React-разработке вместо вызова конструктора и bind, принято использовать свойства класса:

class Example extends React.Component {
  state = {
    someProp: '',
  };

  someHandler = () => {
    this.setState({ someProp: 'someValue' });
  };

  render() { ... }
}

Не надо никаких порталов.

document.body.classList.add('no-scroll');

Только сделать eject и отказаться от использования webpack-dev-server.
Но делать этого, имхо, не стоит.

Serving Apps with Client-Side Routing

Вариант с использованием JSX:

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
          {this.props.counter.map(({ tag: Tag }, i) => <Tag key={i} />)}
        </div>
        <Edit/>
      </article>
    );
  }
}

npx create-react-app my-app
cd my-app
npm start

github

Потому что массив приводится к строке:
console.log([1,2,3]); // 1,2,3

Array.prototype.toString()

Запись вида:

const methodName = 'bar';

const foo = {
  [methodName](message) {
    alert(message);
  }
}

аналогична записи:

const foo = {
  bar(message) {
    alert(message);
  }
}

Демо
Вычисляемые свойства
Symbol.toPrimitive

Стандартные потоки
process.stdin
Пример с использованием readline.

Значение по-умолчанию для первого аргумента.
Демо.

Порталы

Достаточно грубый пример, но суть должен передать:

const updater = (component, prevState) => {
  if (Object.keys(prevState).some(
    key => prevState[key] !== component.state[key],
  )) {
    component.render();
    
    if (component.componentDidUpdate) {
      component.componentDidUpdate(prevState);
    }
  }
}

const domRender = (Component) => {
  const component = new Component();
  
  component.render();
  
  if (component.componentDidMount) {
    component.componentDidMount();
  }
}

class Component {
  constructor() {
    this.updater = updater;
  }
  
  setState(newState) {
    const prevState = this.state;
    
    if (typeof newState === 'function') {
      this.state = newState(prevState);
    } else {
      this.state  = { ...prevState, ...newState };
    }
    
    this.updater(this, prevState);
  }
}

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: 'Initial value',
    }
  }
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ value: 'New value' });
    }, 2000);
  }

  componentDidUpdate(prevState) {
    console.log('Prev state: ', prevState);
    console.log('New state: ', this.state);
  }

  render() {
    const { value } = this.state;
    
    document.querySelector('.example').innerHTML = value;
  }
}


domRender(Example);

Демо

Объявление:
class Example extends Component { ... }
Определяет класс Example который наследуется от Compоnent.

super(props);
Вызов конструктора Component с передачей первым аргументом объекта props.

Классовые компоненты никуда не уходят. Для них осталось несколько удобных кейсов. Например:
1. Удобное получение предыдущих значений свойств и состояний в componentDidUpdate.
2. Доступ к экземпляру компонента в хандлерах, передаваемых в браузерные API.
3. Сложные компоненты с большим количеством методов. Например VideoPlayer.

Производительность может и отличается, но вы и ваши пользователи это вряд ли заметите. Стоит понимать, что инициализация хуков и переопределение всех колбеков в функциональных компонентах при перерисовке - операция позатратней, чем вызов render классового компонента у которого все хандлеры определены за пределами render в свойствах экземпляра или в прототипе. Поэтому если в теле функционального компоннета много чего происходит, то, возможно, его стоит переписать в классовый, ну или по возможности вынести из него логику, тут в помощь кастомные хуки.

Оптимизация это отдельный вопрос, которому стоит посвятить время. Сейчас разве стоит предупредить вас, что преждевременная оптимизация - зло.

Попробуйте использовать в коде преимущественно функциональные компоненты и хуки. Сейчас почти все популярные библиотеки имеют в API довольно удобные в использовании хуки. Там, где покажется, что будет удобней использовать класс, не бойтесь использовать классы.

Обычно это делают так:

divs.forEach(function(_, i) {
  console.log(i);
});

Можно еще извратиться так:

divs.forEach(function() {
  console.log(arguments[1]);
});

Но в этом нет особого смысла, так как первый вариант короче и его можно использовать со стрелочными функциями.