Django(+cms)+reactjs+typescript+bootstrap+SASS. Как можно сделать?

Затем верстаеете сайт при помощи Bootstrap.
И заключительная часть, соединяете Frontend и Backend при помощи React.

Плохой совет. Правильней взять react библиотеку Bootstrap компонентов и сразу писать JSX.

Почему не могу получить значение из стилей?

Владимир Голубь, Попробуйте так:

setTimeout(() => {
  console.log(this._slider.innerSlider.list.querySelector('.slick-current.slick-active').style.width);
}, 0);

Костыль, конечно, но должно помочь. Возможно, сам слайдер имеет нужный колбек в API.

Почему не могу получить значение из стилей?

Владимир Голубь, ну во-первых из примеров не ясно где и в какой момент вы делаете выводы в консоль. Во-вторых тут можно посмотреть глазами в реальном времени как изменяется значение в панели разработчика. Ну и в-третьих вы пишите, что значение меняется при изменении ширины, а получить его хотите в componentDidMount, но это же два ничем не связанных события. Тут надо либо искать другой путь, либо больше деталей.

Почему не могу получить значение из стилей?

Владимир Голубь, смотря в какой момент его надо получить. Можно, например, resize слушать. Тут стоит про оптимизацию почитать. Сами пользователи ну очень редко делают ресайз окна, поэтому, думаю, не страшно если он будет немного троттлить.

React app, можно ли создать такой компонент?

Егор Грубов, так вы же передаете в компонент не состояние, а замокапленное значение value.
Измените атрибут value на:
value={this.state[element.id]}
и все будет работать.

Как менять цвет внешнего SVG?

KononovD, там надо инъекцию делать любым удобным способом. Посмотрите пример с runtime browser sprite в документации.

Как менять цвет внешнего SVG?

KononovD, этот лоадер добавляет картинки тегом symbol в svg контейнере, далее происходин инъекция в html код и иконки используются тегом use с доступом по id. Но в исхдном коде вы этого не видите, вы просто делаете импорт и используете:

import twitterLogo from './logos/twitter.svg';

const Example = () => (
  <svg viewBox={twitterLogo.viewBox}>
    <use xlink:href={`#${twitterLogo.id}`} />
  </svg>
);

Кроссбраузерно при таком использовании можно менять иконке два цвета: fill и color.

Само собой удобно вынести повторяющийся код в контейтер:

const Svg = ({ src, className }) => (
  <svg className={className} viewBox={src.viewBox}>
    <use xlink:href={`#${src.id}`} />
  </svg>
);

И использовать потом в коде просто:

import twitterLogo from './logos/twitter.svg';
import Svg from 'app-components/core/Svg';

const Example = () => (
  <Svg src={twitterLogo} />
);

Как выглядит рабочий процесс при использовании Auth0 (jwt)?

havemanyquestions, не заметил, что в вопросе Auth0, никогда им не пользовался, поэтому по flow не подскажу.
По поводу безопасности, в интернете описано множество методик, как относительно безопасно работать с токенами и защищаться от xss и csrf.
1. Для этого и хранят токен, чтобы без логина получить пользовательские данные и обращаться по защищенным маршрутам. Вспомните когда последний раз осуществляли вход в том же VK.
2. isUserLoggedIn бесполезнейший флаг который вам не даст ничего.
Насчет времени жизни токена почитайте про refresh token, ну или просто делайте logout.

Как написать такой JS код на React?

hulktoster, судя по истории ваших вопросов предыдущий ответ вам вообще ничем не помог, хотя в обоих задачах используются одни и те же приемы и эта задача гораздо легче.

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

А зачем вам сохранять подключение при перезагрузке страницы? По логике
если это какой-то канал, то при перезагрузке надо переподключаться заново.
Если это что-то вроде социальной сети, где пользователь должен уходить в офлайн только через какое-то время с последней активности, то такие вещи реализуются на стороне сервера.

Кто знает хороший стартовый шаблон webpack 4 чтобы уже с ecmascript 6 в js 5?

Зачем использовать чужие велосипеды, написанные под чужие задачи, когда накидать конфиг под собственные нужды дело пары минут/часов? Стоит только хоть немного разобраться в теме. В которой, к слову, фронтенд разработчику разбираться надо.

Поддержка es6 это установка: @babel/preset-env, @babel/core и babel-loader, добавление .babelrc и лоадера в ваш webpack config.

Почему слетает авторизация после обновления страницы?

Олег Котов, в вызов dispatch надо передавать вызов asyncAction так же, как у вас они передаются в коде authCheckState. Вы передавали сам asyncAction без вызова.

Еще я длинную запись return на короткую заменил.

длинная:

const foo () => {
  return {};
};

короткая:
const foo () => ({});

Но в таких случаях, когда вызов action не надо как-либо модернизировать лучше использовать объект:

const mapDispatchToProps = {
  myActionName,
};

Как сделать логику сайта?

Pavel Pikat, ну хз. Тут каждый сам решает что для него лучше. Время потраченное на изучение фреймворка - хорошо инвестированное время.
А по приложению и не сказать какой функционал остался за кадром. Строчить что-то сложное с интерактивными элементами на ванильке или JQuery неблагодарное дело.

Сдается мне, автор в эти выходные участвует в Цифровом Прорыве. Интерфейс как раз подходит под номинацию ЖКХ и городская среда.

Как использовать SSR посредством react-dom/server с CSS Modules?

PrKassad, это codesandbox, там используется react-scripts. Я css modules в работе не использую. Могу разве порекомендовать поискать нужные настройки на github.

Например тут: react-ssr-setup

Как добавить 2 класса по очереди (React)?

Kerhin, пример

Как ускорить сборку Webpack с 30 минут до 5-10?

Никита, ну навскидку видно, что можно оптимизировать lodash.
Замените все импорты lodash вида:
import { debounce } from 'lodash';
на:
import debounce from 'lodash/debounce';

И так оптимизировать можно многие библиотеки. Тот же date-fns. Обязательно сделайте это.

А почему у вас так много чанков? У вас используется lazy-loading?

Как ускорить сборку Webpack с 30 минут до 5-10?

Никита, webpack-bundle-analyzer работает по socket соединению, я не могу посмотреть, что он вам показал. Можете просто скриншот прислать.
По поводу времени webpack выводит время сборки в миллисекундах в консоль. Смотрите внимательно.

Как правильно поставить полученный token в GET запрос?

timonck, посмотрите на вкладку network в браузере, должен отправляться заголовок.

Прототип (отдельно) и конструктор (отдельно) на реальных примерах из сайтов?

nathan111777, вряд ли сейчас кто-либо просто так использует конструкторы и прототипы на простых сайтах. А те кто использовал давно перешли на ES6 классы.

Хотите реальный кейс применения конструктора с прототипом? Посмотрите исходный код почти любой библиотеки из тех, что когда-либо использовали в своих проектах. Например, slick.

Разницу с конструктором и без него продемонстрировал на словах в ответе. Нет смысла описывать методы в конструкторе, так как создав 1000 экземпляров вы создадите 1000 копий каждого метода, если вынести методы в прототип, то они будут вызываться из него.

Весь JavaScirpt построен на прототипах. Создайте, например, массив и посмотрите в консоли его содержимое, откройте и посмотрите прототип(__proto__), затем прототип прототипа. Попробуйте сделать выводы.

Как ускорить сборку Webpack с 30 минут до 5-10?

Никита, ваш коллега явно темнит или, возможно, сам что-то не до конца понимает. Новый проект, который пока в разработке, собирается за 12 секунд.
И это мы еще не используем awesome-typescript-loader, который поддерживает потоки и ускоряет сборку, во всех проектах стандартный.

Если хотите, можете сбросить конфиг посмотреть.