Антон Спирин

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

Добавьте в редьюсер состояние загрузки и ошибки:

initialState = {
  isFetching: false,
  data: null,
  error: null,
};

В компоненте:

const Example = ({ isFetching, error, data }) => {
  if (isFetching) return <Preloader />;
  if (error) return <Error error={error} />;
  if (!data) return null; // или что хотите показывать при отсутствии данных
  
  // далее обращения к ключам data и JSX.
}

Локальное состояние загрузки использовать не надо.
Метод onGetWeather(path) переделайте в getWeather(lat, long)

1. Вы инициируете загрузку данных после монтирования компонента, а присваиваете состояние до.
2. В вашем случае, вообще не надо хранить данные в состоянии компонента.
3. По изменению параметров фильтрации/сортировки, по-хорошему, должен происходить новый запрос с соответствующими параметрами.

Во время вызова render, элементы еще не созданы и не добавлены в DOM, соответственно ref равен null. Вы можете получить ref после монтирования:

class B extends React.Component {
  componentDidMount() {
    console.log(this.props.anchorRef);
  }
}

В вашем случае правильней использовать useRef, так как в отличии от вызова createRef, он при перерисовках возвращает один и тот же объект. Вызов createRef, в свою очередь, каждый раз возвращает новый.

function A {
  const anchorRef = useRef<HTMLDivElement>(null);
  // ...
}

вопросов о выносе SubmitButton в отдельный компонент не возникает.

SubmitButton выносить в отдельный компонент не надо. В большинстве случаев хватает использования обычной кнопки вашего приложения.
<Button onClick={handleSubmit}>Submit</Button>

Чем руководствоваться при выборе, вынести ли «подкомпонент» react в компонент или поместить в функцию внутри компонента?

Компонент это сущность, если часть древа можно описать как сущность, то логичней ее вынести в компонент. Особенно если она будет в последствии переиспользована. Например:
ListItem, Preloader, Layout, Modal, Container, FormControl, etc.

Если часть древа описывается задачей(например renderRows, renderItem, etc) и ее надо меморизировать, или она используется под условным рендерингом и для отрисовки необходимы дополнительные вычисления, то ее часто логично вынести в отдельный рендер метод, не нагромождая кодовую базу дополнительными компонентами.
Колбеки паттерна render-props так же имеет смысл выносить в отдельные render-методы.

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

router.post('/api/auth/sign-up', ctx => {
  const { username, email, password } = ctx.request.body;

  const user = new UserModel({
    'info.name': username,
    email,
    password,
  });

  user
    .save()
    .then(user => {
      ctx.body = user;
    })
    .catch(err => {
      ctx.throw(403, "Cannot create user or user is already created!");
    });
});

const MyCom = ({ children }) => (
  <div>{children}</div>;
);

Какой смысл писать состояние из store в состояние компонента? Используйте состояние из store напрямую.
Оптимальней всего, в данном случае, где-то хранить состояние фильтра и фильтровать данные из store налету.

const phoneList = useSelector((state) => state.phoneListReducer.phoneList);
const [search, setSearch] = useState('');
const filteredPhoneList = useMemo(
  () => phoneList.filter(phone => phone.includes(search)),
  [search],
);

Подход с display: none в React разработке использовать не принято.

Условный рендеринг
Подъем состояния

React не обрабатывает событие onClick на iphone,

React обрабатывает событие onClick на iPhone.
Проблема в чем-то другом. И, возможно, гораздо лучшим решением будет ее выявление, нежели костылить по всему проекту onTouchStart.

Используйте стрелочные функции в свойствах класса. Они являются негласным стандартом в React разработке и, скорей всего, очень скоро войдут в стандарт. Уже добрались до stage-3, а в Chrome уже есть нативная поддержка.

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

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

В связи с этим вопрос, нужно теперь всегда два сервера запускать один для node js другой для react js?

React клиентская библиотека и html с приложением вы можете отдавать любым статическим сервером Apache/Nginx/etc.

Может есть где-то документация

Create React App: Deployment

Если приложение учебное, то вместо собственного сервера для проксирования запросов к API, вам должно хватить https://cors-anywhere.herokuapp.com/
Для кеширования запросов можно использовать axios-cache-adapter

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

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

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

  render() { ... }
}

Redux в React-разработке надо знать обязательно. Еще, хорошо знать MobX, так как все больше компаний используют его в новых проектах.

Так же, вам стоит познакомиться с такими инструментами как:
typescript
webpack/babel
react-router
redux-thunk
redux-act (имхо, лучшая упрощалка бойлерпелйта redux)
styled-components
reselect
next/create-react-app
axios
react-helmet
react-portal
classnames
eslint/tslint/prettier/lint-staged/husky
jest
express

Перечисленные инструменты, кроме redux-act, используют в React-разработке чаще всего.

Почему this.props.location.pathname и this.props.history.location.pathname вдруг оказываются равны ?

Потому что location и history.location - это один и тот же объект. Ваше условие не выполнится никогда.

Поправить можно так:

componentDidUpdate(prevProps) {
  if (
    prevProps.location.pathname !== this.props.location.pathname &&
    this.state.menuMobile
   ) {
    this.setState({ menuMobile: false });
  }
}

const myAppRoot = document.getElementById(“my-app”);
ReactDOM.render(<MyApp />, myAppRoot);

export default React.memo(Header);

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

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