Антон Спирин

Вы должны использовать web-сервер, а не отрывать файл через браузер.

1. Вам надо либо остановить всплытие события:

onMarkClick = (e) => {
    e.stopPropagation();
    this.setState({
      important: true,
    });
  };

либо изменить структуру:

return (
  <span>
    <span
      className={classNames} 
      onClick={this.onLabelClick}
    >
      {label}
    </span>
    <button type="button"  onClick= {this.onMarkClick}>
      <i className="fa fa-exclamation"/>
    </button>        
  </span> 
);

2.

.todo-list-item.done {
  text-decoration : line-through;
}

Что бы Вы изменили в коде?

Все.

const uid = () => Math.random().toString(36).slice(2);

class App extends React.Component {
  state = {
    tasks: [
      {
        id: uid(),
        title: 'title',
        description: 'description',
      }
    ]
  };

  handleCreateTaskClick = () => {
    this.setState(state => ({
      tasks: [
        ...state.tasks,
        {
          id: uid(),
          title: 'title',
          description: 'description',
        },
      ],
    }));
  };

  render() {
    const { tasks } = this.state;

    return (
      <div>
        <button onClick={this.handleCreateTaskClick}>Добавить задачу</button>
        <ul>
          {tasks.map(task => (
            <li key={task.id}>
              id: {task.id} | {task.title} | {task.description}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

interface Props {
  someProp: string;
}

const Example: React.FC<Props> = ({ someProp }) => (
  <div>{someProp}</div>
);

<a href="/admin">Admin</a>

1. Лучше сделать наоборот и не использовать устаревшие пакеты.
2.yarn add react-redux устанавливает стабильную, рекомендованную к использованию версию пакета.

Обычно в проектах нет необходимости в использовании библиотек вроде react-router-redux или connected-react-router. Самостоятельно прокинуть в store history, при необходимости, пара строк кода.

У вас бессмысленное сравнение получилось. Все, что можно вынести из этого способа, это то, что экземпляры компонентов создаются вызовом React.createElement. Но это есть в документации.
Классовые компоненты имеют методы жизненного цикла, состояние и возможность работы с контекстом. Функциональные компоненты достигают подобного функционала при использовании Hooks API.

Использование StyledComponent в функциональных компонентах не overhead. Это просто обертки над вашими компонентами. В консоли вы видите результат вызова React.forwardRef. Вызов нужен для того, чтобы передать оборачиваемому компоненту ref как свойство, иначе при попытке получить ref вы бы получили компонент обертку.

По-максимуму простые приложения это обычно Todo листы и прочие HelloWorldApp. Реально приложение скорей всего будет в разы сложней.

FLUX это не совсем MVC.

Еще вариант:

const linkProps = {
  activeClass: 'active',
  activeStyle: { fontWeight: 'bold' },
};

return (
  <>
    <NavLink to='/stats' {...linkProps}>Stats</NavLink>
    <NavLink to='/home' {...linkProps}>Home</NavLink>
  </>
);

1. В таком случае, React надо подключать к странице внешней библиотекой. Например так:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

2. У вас в tsconfig.js свойство allowSyntheticDefaultImports установленно в значении true.
Этот вариант удобней тем, что можно писать импорты вида:
import React, { useContext } from 'react';

react-bootstrap.github.io
https://reactstrap.github.io

Последняя версия superagent не содержит стрелочных функций в коде.
Если у вас в зависимостях есть проблемные пакеты, которые необходимо транспилировать, то их можно исключить из exclude регулярным выражением:

test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!(trouble-package-name|other-thouble-package-name)\/).*/,

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,     
  document.getElementById('root'),
);

или:

import React from 'react';
import { render } from 'react-dom';
import { Router } from 'react-router';
import { createBrowserHistory } from 'history';
import App from './App';

const history = createBrowserHistory();

render(
  <Router history={history}>
    <App />
  </Router>,     
  document.getElementById('root'),
);

Документация

По клику выполнить history.push(newRoute) и обработать обновление url в componentDidUpdate(запросить каталог с обновленными параметрами).

componentDidMount() {
  window.addEventListener('beforeunload', this.handleWindowBeforeUnload);
}

handleWindowBeforeUnload = e => {
  // e - целевое событие
};

1. Обновляйте не свойство, а состояние компонента.
Component State
2. Передавайте в дочерние компоненты свойства на основе состояния:

render() {
  const { value } = this.state;
  return (
    <>
      <Child1 value={value} />
      <Child2 value={value} />
      <Child3 />
    </>
  );
}

3. В дочерних компонентах можно реагировать на обновление свойства:

componentDidUpdate(prevProps) {
  if (prevProps.value !== this.props.value) {
    this.doSomething();
  }
}

Object property shorthand

this.setState({ scale: 'c', temperature });

равносильно:

this.setState({ scale: 'c', temperature: temperature });

Как симулировать клики мышкой на React компоненте?

Так же как и на любом другом DOM элементе.

загвоздка с выпадающими селектами на форме

select.value = someValue;
select.dispatchEvent(new Event('change', { bubbles: true }));

render() {
  const { playList, slug }  = this.props;
  const index = playList.findIndex(i => i.slug === slug);
  const video = playList[index];
  const prev = playList[index - 1];
  const next = playList[index + 1];
  
  render(
    <div>
      {/* ... */}
      <div>
        {prev && <Link to={`/video/${prev.slug}`}>Prev</Link>}
        {next && <Link to={`/video/${next.slug}`}>Next</Link>}
      </div>
    <div/>
  );
}

componentDidUpdate(prevProps) {
  if (prevProps.filmId !== this.props.filmId) {
    this.setCurrentFilm(this.props.filmId);
  }
}

Lifting state up