Антон Спирин

state = {
  name: '',
  publicationYear: '',
  publisher: '',
  category: '',
  language: '',
  errors: {},
};

Ошибки валидации складывать по ключу в errors.

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

По идее ключи никакие не меняются и state меняется только когда скролл проходит отправную точку. Но React devtools выделяет красным мой хедер и componentDidUpdate отрабатывает при каждом скролле.

Скорей всего, просто криво написали код и он работает не так, как вы задумывали. Постоянный вызов componentDidUpdate говорит о том, что на каждый скролл происходит перерисовка.

Действительно ли реакт ререндерит эти компоненты?

Действительно.

Как вообще лучше работать со скроллом? Делать через React или просто подключить отдельный JS файл и работать с DOM напрямую?

Все зависит от задачи. Подключать отдельный файл с нативным кодом точно не стоит.

Знаю, что с React так работать с DOM не нужно

Можно и очень часто бывает нужно. Для этого в React есть рефы.

прописать логику чата в redux мешая с логикой сервиса

Зачем мешать? Можно писать в отдельных файлах в каталогах actions, reducers и components. Можно положить в отдельную папку как feature. Можно сделать отдельной точкой входа. Можно подгружать отдельным чанком по требованию.

или лучше реализовать это отдельным проетом, а потом подключить

Вам должно быть виднее, что для вас лучше. Путей много.

Тоже самое касается и бэк части на node

То же самое касается и части на node.

Там так же пихать всё в роуты сервиса или можно декомпазировать ?

Да, можно красиво разбить на модули, так же как и клиентскую часть.

const Example = () => {
  const [isLoading, setLoading] = useState(true);

  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <>
      {isLoading && <Preloader />}
      <iframe 
        title="iframe"
        src="..."
        onLoad={handleOnLoad}
      />
    </>
  );
};

Пример упрощения:

const Example = ({ disabled, onChange }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = useCallback((e) => {
    e.stopPropagation();
    if (disabled) return;
    setIsActive(!isActive);
    onChange(!isActive);
  }, [isActive, disabled]);

  return <Switch onClick={handleClick} />;
};

const Example = ({ children }) => <div className="some_selector">{children}</div>;

Если React добавил это предупреждение, должно быть решение для этого.

Это предупреждение добавляет ESLint. Если не хотите отключать правило глобально, то можно воспользоваться комментариями для отключения в конкретном блоке.

ESLint: Disabling Rules with Inline Comments

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

learn.javascript.ru
По возможности изучите все. Рано вам пока за React браться. Все ваши вопросы основаны на незнании JavaScript.

Так вот в данному случае if(novyna.lenght) в условиях запускает вариант, когда новостей нет, хотя подстчет количества работает правильно.

www.google.ru/search?q=length

<Switch>
  <Route exact path="/" component={App} />
  <Route path="/search" component={Results} />
</Switch>

const Results = ({ location }) => {
  const { search } = location;
  // do something with search
  return ( ... );
};

search будет иметь строчное значение вида:
'?кeyword=xxx&subject=AAA&filter2=BBB'
Его необходимо парсить любым удобным вам способом.

Как мне теперь узнать какой тип страницы показывать пользователю ?

Запросить с сервера данные и узнать какого типа новость. В зависимости от типа рендерить нужный компонент.

Порталы