Антон Спирин

На примере использования токенов.

Авторизация:
1. Отправляем пару логин/пароль, в случае успеха получаем в ответе токен и данные пользователя.
2. Пишем данные пользователя в состояние главного компонента, из него прокидываем в контекст.
3. Токен пишем в cookie и в заголовки по-умолчанию библиотеки для http запросов.
4. Колбеки авторизации и логаута можно так-же прокинуть в форму логина и кнопку логаута через контекст.

Инициализация приложения:
1. Проверяем cookie на наличие токена.
2. Если он есть запрашиваем пользователя и пишем в главный компонент.
3. Пишем токен в заголовки по-умолчанию библиотеки для http запросов.

Логаут:
1. Удаляем токен из cookie и заголовков по-умолчанию библиотеки для http запросов.
2. Удаляем данные пользователя из состояния главного компонента.
3. Делаем редирект с защищенной страницы.

react-helmet
<Helmet title="My site" />

при использовании модульности css файлов в компоненте возникают проблемы при обращении в JS к нужному классу.

Забудьте подобные подходы в React разработке. Удалите из проекта JQuery и учитесь работать с состоянием.

Пример:

class Example extends React.Component {
  state = {
    shouldShowMenu: false,
  };
  
  handleToggleMenuClick = () => {
    this.setState(state => ({
      shouldShowMenu: !state.shouldShowMenu,
    }));
  };
  
  render() {
    const { shouldShowMenu } = this.state;
 
    return (
      <div>
         <button onClick={this.handleToggleMenuClick}>Toggle menu</button>
         {shouldShowMenu && <Menu />}
      </div>
    );
  }
}

1. Вы экспортируете из search-reducer функцию reducer, а импортировать пытаетесь как search. По-хорошему, экспортируйте дефолтное значение:

export default function reducer(state = {}, action) {

и импортируйте:

import search from "./search-reducer";

2. Учтите, что структура вашего хранилища изменится и в приложение надо будет внести соответствующие правки.

3. В редьюсеры, по-хорошему, передавать начальное состояние:

const initialState = {
  value: "",
  works: [],
};

export default function search(state = initialState, action) {

import React, { useState, useCallback } from 'react';
import { Icon, Hint } from '../some-place';

const Example = () => {
  const [shouldShowHint, setShouldShowHint] = useState(false);

  const onMouseEnter = () => useCallback({
    setShouldShowHint(true);
  }, []);
  
  const onMouseLeave = useCallback(() => {
    setShouldShowHint(false);
  }, []);

  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <Icon />
      {shouldShowHint && <Hint />}
    </div>
  );
};

<div className="list" />

const className = 'list';

return <div className={className} />;

Ну сам кейс довольно редкий. У вас же есть эта подсказка и ошибка маловероятна. Если по переходу на страницу подсказки, обновлять ключ в componentDidMount при запросе, то в случае ошибки на главной, пользователи по идее не должны ничего заметить.

Тем не менее, вы можете хранить ошибки по ключу:

const initialState = {
  tip: null,
  isFetching: false,
  errors: {},
};

case FETCH_VIDEO_TIP_FAILED:
  return {
    ...state,
    isFetching: false,
    errors {
      [payload.slug]: payload.error,
    },
  };

mapStateToProps для отдельной страницы:

const mapStateToProps = (state, ownProps) => ({
  error: state.videotips.errors[ownProps.match.params.slug],
});

mapStateToProps для главной:

const mapStateToProps = (state) => ({
  error: state.videotips.errors.homepage,
});

{items.map(item => (
  <CardImg key={item.picture} top width="100%" src={item.picture} alt={item.imgalt} />
))}

Lists and keys

Исправленный вариант:

const jsx = (
  <div>
    <h1>Title</h1>
    <Header />
    <Action />
  </div>
);

import { myAsyncAction } = this.props;

/ * ... * /

const mapDispatchToProps = {
  myAsyncAction,
};

export default connect(mapStateToProps, myAsyncAction)(MyComponent);

В React вы рендерите список на основе данных:

<List>
  {data.map(item => <Item key={item.id} item={item} />)}
</List>

При обновлении state c иммутабельным удалением элемента произойдет перерисовка компонента и сверка новой версии древа нод со старой, отсутствующие в новой версии элементы будут удалены из DOM.
Lists and keys
Reconciliation

<Switch>
  <Route exact path="/(route1|route2|route3)" component={RoutesWithoutHeaderAhdFooter} />
  <Route component={RoutesWithHeaderAndFooter} />
</Switch>

Это стандартное поведение библиотеки. По-умолчанию происходит проверка на идентичность:

function defaultEqualityCheck(a, b) {
  return a === b
}

API библиотеки предоставляет возможность создать билдер селекторов с кастомным сравнением.
В официальной документации есть пример с deepEqual

Странный вопрос, но:

const ROOT_ID = 'root';

ReactDOM.render(<App />, document.getElementById(ROOT_ID));

Переменную можете хоть экспортировать, хоть передавать свойством в App.

{shouldShowElement && <Element />}

Conditional rendering

class Example extends React.Component {
  state = { filter: 'all' };

  componentDidMount() {
    this.props.fetchData(this.state.filter);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.filter !== this.state.filter) {
       this.props.fetchData(this.state.filter);
    }
  }
  
  render() { /* ... */ }
}

connected-react-router

Варианты:
1. Указать свойство key если не указано.
2. Обернуть элементы в вызов connect из пакета react-redux. Это предотвратит перерендер, если props не изменились.
3. Использовать PureComponent.
4. Реализовать в элементах списка метод shouldComponentUpdate.
5. Проверить, что при обновлении state, объекты, передаваемые в элементы списка не пересоздаются. То есть выполняется условие:
prevProp === prop

Да так делать можно, но лучше как-то так:
window.__INITIAL_STATE__ = { /* ... */ };
При инициализации эти данные можно перехватить в состояние рутового компонента, или хранилище state management библиотеки если она используется.