Антон Спирин

Не нужны тут дженерики.

interface Filter {
  name?: string;
  title?: string;
}

interface FiltersProps {
  filters: Filter[];
}

const Filters: React.FC<FiltersProps> = ({ filters }) => (
  <div>
    {filters.map((filter: Filter) => (
      <div key={filter.name}>
        {filter.title}
        {filter.name}
      </div>
    ))}
  </div>
);

const Main: React.FC = () =>  (
  <Filters filters={filters} />
);

debounce
Пример.

В React разработке приветствуется подход с изменением состояния:

interface State {
  shouldShowBtn: boolean;
}

class MyComponent extends React.Component<null, State> {
  state = {
    shouldShowBtn: true,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.scrollHandler);
  }

  scrollHandler = () => {
    const { shouldShowBtn } = this.state;

    if (window.pageYOffset > 50 && shouldShowBtn) {
      this.setState({ shouldShowBtn: false });
    } else if (window.pageYOffset <= 50 && !shouldShowBtn) {
      this.setState({ shouldShowBtn: true });
    }
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollHandler);
  }

  render() {
    return (
      <>
       {this.state.shouldShowBtn && <button>lioih </button>}
      </>
    );
  }
}

или:

const MyComponent: React.FC = () => {
  const [shouldShowBtn, setShouldShowBtn] = useState(true);
  
  const context = useMemo(() => ({ shouldShowBtn }), []);

  useEffect(() => {
    context.shouldShowBtn = shouldShowBtn;
  }, [shouldShowBtn]);

  useEffect(() => {
    const scrollHandler = () => {
      if (window.pageYOffset > 50 && context.shouldShowBtn) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !context.shouldShowBtn) {
        setShouldShowBtn(true);
      }
    };

    window.addEventListener('scroll', scrollHandler);
    
    return () => {
      window.removeEventListener('scroll', scrollHandler);
    };
  }, []);
  
  return (
    <>
     {shouldShowBtn && <button>lioih </button>}
    </>
  );
};

Можно еще для подобных кейсов кастомный хук написать:

const useGetState = (initialState: any) => {
  const [state, _setState] = useState(initialState);
  const context = useMemo(() => ({ state }), []);
  const getState: any = useCallback(() => context.state, []);
  const setState = useCallback((state) => {
    context.state = state;
    _setState(state);
 }, []);

  return [getState, setState];
};

и тогда:

const MyComponent: React.FC = () => {
  const [getShouldShowBtn, setShouldShowBtn] = useGetState(true);

  useEffect(() => {
    const scrollHandler = () => {
      console.log(window.pageYOffset, getShouldShowBtn());
      if (window.pageYOffset > 50 && getShouldShowBtn()) {
        setShouldShowBtn(false);
      } else if (window.pageYOffset <= 50 && !getShouldShowBtn()) {
        setShouldShowBtn(true);
      }
    }
    window.addEventListener("scroll", scrollHandler);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    };
  }, []);
  return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;
};

Вы должны использовать 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>
);

Не получается. При отсутствии в DOM элемента с id 'header' вы присвоите вместо объекта null.

var header = document.getElementById('header');
console.log(header); // null

true, потому что null относиться к объектам!

Неверно. Объекты кастуются в true.

Получается, что null == undefined / true, но null === undefined/false?WTF JS?)

Почитать.

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

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

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

Надо на сервере добавить заголовки:

'Access-Control-Allow-Origin': '*' // * или ваш домен
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE'
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

Если не собираетесь устанавливать cookie с сервера, то свойство withCredentials передавать не надо.

У вас бессмысленное сравнение получилось. Все, что можно вынести из этого способа, это то, что экземпляры компонентов создаются вызовом 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'),
);

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